React.js 教程

React.js 是一个用于构建用户界面的 JavaScript 库。它被广泛用于开发单页应用程序（SPA）和动态网站。

快速入门

安装 Node.js 和 npm 首先，确保您的计算机上安装了 Node.js 和 npm。您可以从 Node.js 官网下载并安装。
创建一个新的 React 应用 使用 create-react-app 命令来快速创建一个新的 React 应用。
```
npx create-react-app my-app
```
这将创建一个名为 my-app 的新目录，其中包含一个基本的 React 应用。
运行应用 进入 my-app 目录，并运行以下命令来启动开发服务器。
```
npm start
```
这将在浏览器中自动打开应用，并允许您实时预览更改。

组件

React 中的基本构建块是组件。组件可以是函数或类，用于创建可重用的 UI 部分。

函数组件

import React from 'react';

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

export default Greeting;

类组件

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

export default Greeting;

JSX

JSX 是 JavaScript 的一个语法扩展，它允许您在 JavaScript 代码中编写 HTML 标签。

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

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

图片

React.js 是一个用于构建用户界面的 JavaScript 库。它被广泛用于开发单页应用程序（SPA）和动态网站。

import React from 'react';

function App() {
  return (
    <div>
      <img src="https://cloud-image.ullrai.com/q/react/" alt="React Logo"/>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

React 官方文档是学习 React 的绝佳资源。

import React from 'react';
import ReactDOM from 'react-dom';

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

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

希望这些基础教程能帮助您开始学习 React.js！