React 快速入门

欢迎来到 React 的世界！以下是一些快速入门的步骤，帮助你开始使用 React。

环境准备

首先，你需要安装 Node.js 和 npm（Node.js 包管理器）。你可以从 Node.js 官网 下载并安装。

创建新项目

使用 create-react-app 命令可以快速创建一个新的 React 项目。

npx create-react-app my-app

进入项目目录：

cd my-app

运行项目

在项目目录下，使用以下命令启动开发服务器：

npm start

浏览器会自动打开新标签页，显示你的 React 应用。

组件

React 的核心概念是组件。组件可以复用，易于维护。

import React from 'react';

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

export default App;

状态与属性

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

export default Counter;

图片展示

React 也支持图片展示，你可以使用 <img> 标签。

import React from 'react';

function ImageExample() {
  return (
    <div>
      <img src="https://cloud-image.ullrai.com/q/Golden_Retriever/" alt="Golden Retriever"/>
    </div>
  );
}

export default ImageExample;

扩展阅读

更多关于 React 的信息，请访问 React 官方文档。

希望这些信息能帮助你快速入门 React！🎉