如何在一天内学会React开发入门，打造首个React应用

前端

2023-11-01 16:27:17

React 入门笔记 1：从零开始搭建你的第一个 React 应用

React 是一个强大且流行的前端框架，它可以帮助你构建交互式、动态的 Web 应用程序。如果你想学习 React，那么本文将带你从零开始，一步一步地搭建你的第一个 React 应用。

安装 React

CDN 方式

你可以通过 CDN 的方式来引入 React。前往以下网址：

CDN 地址

在这里，你可以找到相对应的 CDN 资源。

npm 方式

推荐使用 npm 的方式来安装 React。在你的终端中输入以下命令：

npm i -g create-react-app

创建项目

现在，我们来创建一个 React 项目。在你的终端中输入以下命令：

create-react-app my-first-react-app

稍等片刻，项目创建完成后，进入该项目目录：

cd my-first-react-app

启动项目

现在，你可以启动你的 React 项目了。在你的终端中输入以下命令：

npm start

项目启动后，你可以在浏览器中访问 http://localhost:3000 来查看你的 React 应用。

编写代码

现在，我们来编写一些代码。在 src 目录下，你可以看到一个名为 App.js 的文件。这个文件是你的 React 应用的入口文件。

在 App.js 文件中，你可以看到以下代码：

import React, { useState } from 'react';

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

  return (
    <div className="App">
      <h1>Hello, World!</h1>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
    </div>
  );
}

export default App;