React 教程

React 是一个用于构建用户界面的 JavaScript 库，它被广泛应用于各种 Web 应用程序的开发。以下是一些 React 基础知识的概述。

安装 React

要开始使用 React，首先需要安装它。你可以通过以下命令来安装：

npm install react

或者如果你使用的是 create-react-app：

npx create-react-app my-app

JSX

React 使用 JSX 来描述 UI。JSX 是 JavaScript 的一个语法扩展，看起来类似于 HTML。

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

组件

React 应用程序由组件组成。组件可以是函数组件或类组件。

函数组件

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

类组件

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Welcome;

状态与属性

组件可以拥有状态和属性。状态用于组件内部数据，属性用于外部数据传递。

import React, { useState } from 'react';

function Clock() {
  const [date, setDate] = useState(new Date());

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

export default Clock;

学习更多

要学习更多关于 React 的知识，请访问 React 官方文档。

React 是一个功能强大的库，学习它将为你的前端开发技能带来很大的提升。