从 0~1 创建 React 项目（React+JS）

前言

• 创建 react 项目不用像创建Vue项目那么麻烦；
  • 我目前也是React刚起步，可能有些创建项目的方式还没接触到，等接触到了再补充上；
• 我们直接创建运行命令即可；

一、创建项目

脚手架 create-react-app 是一个 创建 React 开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用；

创建项目命令

npx create-react-app 项目名称

• 运行命令，等待成功，之后按照提示，cd进入项目目录，使用npm start运行项目；
• npx：
  • NodeJS工具包命令，查找并执行后续的包命令；
• create-react-app：
  • 核心包（固定写法），用于创建 React 项目；

二、项目介绍

2.1 清除无用文件

• 第一次创建的项目，在src下有很多文件，对目前的我们来说，有用的只有App.js、index.js，其他的文件都可以删除；

• 删除其他文件之后，项目就会报错，按照报错信息，清除无效引用；

• 清除无用文件及无效代码之后，就剩下面两个文件；

• App.js：

  function App() {
    return <div className="App">this is App</div>;
  }
  
  export default App;

• index.js：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);

2.2 文件介绍

2.2.1 index 文件

• 项目的入口文件，从这里开始运行；

// 导入React必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 导入项目的根组件
import App from './App';

// 把 App 根组件渲染到 id 为 root 的dom节点上
// 哪里有 id=root 的节点？  ===>   public/index.html
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

2.2.2 App 文件

• 项目的根组件；

function App() {
    return <div className="App">this is App</div>;
}

export default App;