React 快速入门

React 是一个用于构建用户界面的 JavaScript 库，它可以帮助开发者构建高效、可维护的用户界面。下面是一份关于 React 快速入门的指南。

React 快速入门主要包括以下几个步骤：

安装 Node.js 和 npm

首先，你需要安装 Node.js 和 npm，这是 React 开发的基础环境。你可以从 Node.js 官网 下载并安装。

创建 React 项目

安装完 Node.js 和 npm 后，你可以使用 create-react-app 脚手架来创建一个 React 项目。打开终端，输入以下命令：

npx create-react-app my-app

这将创建一个名为 my-app 的 React 项目。

运行 React 项目

进入项目目录，然后运行以下命令来启动开发服务器：

npm start

这将在本地开发环境中启动 React 应用程序。

JSX 基础

React 使用 JSX 来描述用户界面。JSX 是一种类似于 HTML 的标记语言，但它实际上是 JavaScript。

import React from 'react';

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

export default App;

组件

React 应用程序由组件组成。组件是可复用的代码块，它们可以接受属性并返回 JSX。

import React from 'react';

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

export default Welcome;

状态和属性

React 组件可以通过状态和属性来管理数据。状态是组件内部的数据，而属性是组件接收的外部数据。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

学习更多

如果你想要深入了解 React，可以阅读官方文档 React 官方文档。

<center><img src="https://cloud-image.ullrai.com/q/react_logo/" alt="React Logo"/></center>