React 是一个用于构建用户界面的 JavaScript 库。以下是一些关于 React 的基础教程。

安装 React

首先，您需要安装 Node.js 和 npm（Node.js 包管理器）。安装完成后，您可以使用以下命令全局安装 React：

npm install -g create-react-app

然后，您可以使用 create-react-app 命令来创建一个新的 React 项目：

create-react-app my-app

这将创建一个名为 my-app 的新目录，并初始化一个 React 应用程序。

创建组件

React 应用程序由组件组成。组件可以是一个函数或一个类。以下是一个简单的函数组件示例：

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

ReactDOM.render(
  <Welcome name="Alice" />,
  document.getElementById('root')
);

状态和属性

组件可以通过状态（state）和属性（props）来交互。状态是组件内部的数据，而属性是从父组件传递给子组件的数据。

以下是一个包含状态的组件示例：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

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

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

JSX

JSX 是 JavaScript 的语法扩展，它允许您在 JavaScript 代码中直接写 HTML 标签。以下是一个使用 JSX 的示例：

const element = <h1>Hello, world!</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

更多关于 React 的内容，请访问我们的React 教程。

图片展示

这里有一些 React 相关的图片：

React Logo
JavaScript Logo