欢迎来到 React 初学者教程！这里将带你一步步入门 React，一个流行的 JavaScript 库，用于构建用户界面和单页应用程序。

基础概念

React 的核心思想是组件化。组件是 React 应用程序的基本构建块，可以复用和组合。

  • JSX：React 使用 JSX 来描述用户界面，它看起来像 HTML，但实际上是 JavaScript。
  • 虚拟 DOM：React 使用虚拟 DOM 来提高性能，只有当实际 DOM 需要更新时，才会进行实际的 DOM 操作。

快速开始

要开始使用 React，你可以使用 Create React App 工具来快速搭建项目。

npx create-react-app my-app
cd my-app
npm start

组件

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')
);

学习资源

想要深入学习 React？以下是一些推荐的资源：

希望这个教程能帮助你入门 React！🎉

React Logo