React 入门：基于 Create-React-App 从零创建项目

当我们踏入 React 开发的大门，第一步便是创建项目。选择一款趁手且高效的工具能为我们节约大量的时间与精力。Create-React-App 便是这样一款专为 React 项目创建而生的脚手架工具包。它可以快速生成一个开箱即用的 React 项目，无需你手动配置繁琐的环境。

安装 Create-React-App

npm i -g create-react-app

只需这一行命令，你便可以在全球范围内安装 Create-React-App。有了它，我们就能创建全新的 React 项目了。

创建 React 项目

create-react-app my-react-project

在终端中输入以上命令，Create-React-App 将会在当前目录中创建一个名为 "my-react-project" 的文件夹。该文件夹包含了 React 项目的所有必要文件和配置。

启动项目

cd my-react-project
npm start

进入 "my-react-project" 文件夹，运行 "npm start" 命令即可启动项目。这会启动一个开发服务器，并在浏览器中打开项目。

项目结构

Create-React-App 为你创建的项目结构井然有序，便于管理。主要目录包括：

• node_modules： 包含项目所需的全部依赖包。
• public： 存放项目的静态文件，如 HTML、CSS 和图像。
• src： 存放项目的源代码，包括 React 组件、样式表和测试文件。

开始编写代码

项目创建完毕后，你就可以在 "src" 文件夹中编写 React 组件了。一个简单的组件代码如下：

import React from 'react';

const MyComponent = () => {
  return (
    <h1>Hello, React!</h1>
  );
};

export default MyComponent;

将以上代码保存在 "src/components/MyComponent.js" 文件中。接着，在 "src/index.js" 文件中导入并渲染这个组件：

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

import MyComponent from './components/MyComponent';

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

保存代码并刷新浏览器，你便会看到 "Hello, React!" 显示在页面上了。

结语

掌握了 Create-React-App 的使用方法，你便能轻松创建和管理 React 项目了。现在，你可以继续深入学习 React，编写更复杂的功能并构建出色的 React 应用。