React.js 教程

React.js 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。它使得构建动态和交互式的网页应用变得更加容易。

快速开始

安装 Node.js 和 npm

首先，确保你的计算机上安装了 Node.js 和 npm。你可以从 Node.js 官网 下载并安装。

创建 React 应用

使用 create-react-app 工具，可以快速创建一个新的 React 应用。

npx create-react-app my-app

进入项目目录：

cd my-app

启动开发服务器：

npm start

现在，你应该可以在浏览器中看到你的 React 应用了。

组件

React 应用由组件组成。组件可以是一个简单的函数，也可以是一个复杂的类。

函数组件

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

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

类组件

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

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

JSX

JSX 是 JavaScript 的语法扩展，用于描述 UI 应用的结构。

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

JSX 代码最终会被编译成 JavaScript 对象。

状态和属性

React 组件可以通过状态和属性来控制其行为和数据。

状态

状态是组件内部的数据，可以通过 setState 方法来更新。

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

属性

属性是组件外部传递给组件的数据。

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

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

本站链接

更多关于 React.js 的教程，请访问我们的 React.js 教程 页面。