community-forum/learning-materials/tutorials/frontend/react-tutorial

React 教程

React 是一个用于构建用户界面的 JavaScript 库。以下是一些入门级教程，帮助你更好地了解和学习 React。

安装 Node.js 和 npm

首先，你需要安装 Node.js 和 npm，它们是 React 开发的依赖。

• Node.js 安装指南

创建第一个 React 应用

接下来，我们将创建一个简单的 React 应用程序。

import React from 'react';

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

export default App;

组件

React 中的组件是构成应用的基本单元。组件可以是一个简单的文本块，也可以是一个复杂的表单或页面。

函数组件

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

// 使用组件
<Welcome name="Alice" />

类组件

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

// 使用组件
<Welcome name="Bob" />

JSX

JSX 是一种类似于 HTML 的 JavaScript 语法扩展，它被用于描述 React 应用的用户界面。

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

// 在 React 应用中渲染
ReactDOM.render(element, document.getElementById('root'));

React Router

如果你正在开发单页面应用程序（SPA），那么 React Router 是非常有用的。

• React Router 教程

React Logo