【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)

🏆React应用(基于React脚手架) ⛳1. 使用create-react-app创建react应用 🥇1.1 react脚手架

1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
   • 包含了所有需要的配置（语法检查、jsx编译、devServer…）
   • 下载好了所有相关的依赖
   • 可以直接运行一个简单效果
2. react提供了一个用于创建react项目的脚手架库: create-react-app
3. 项目的整体技术架构为: react + webpack + es6 + eslint
4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

什么是工程化？如果在项目中，用上了webpack这种全自动化的构建工具，意思是你写了一段代码，它能进行语法检查，代码压缩，语法转换，兼容性处理等等一系列自动的东西，称之为工程化的项目。

🥈1.2 创建项目并启动

第一步，在cmd全局安装：npm i -g create-react-app

第二步，切换到想创项目的目录，使用命令：create-react-app ‘项目名称’

第三步，进入项目文件夹：cd 项目名称

第四步，启动项目：npm start

当出现此页面表示项目以及创建成功了！！！🎉

🥉1.3 react脚手架项目结构

node_modules-------存放项目依赖的包（第三方库）

public ---- 静态资源文件夹

• favicon.icon ------ 网站页签图标

• index.html--------主页面

• logo192.png ------- logo图

• logo512.png ------- logo图

• manifest.json ----- 应用加壳的配置文件

• robots.txt -------- 爬虫协议文件

src ---- 源码文件夹

• App.css -------- App组件的样式

• App.js-----------App组件

• App.test.js ---- 用于给App做测试

• index.css ------ 样式

• index.js----------入口文件

• logo.svg ------- logo图

• reportWebVitals.js-------页面性能分析文件(需要web-vitals库的支持)

• setupTests.js-----组件单元测试的文件(需要jest-dom库的支持)

页面效果显示的流程📝：

index.js（入口文件，引入React需要的一些核心库和组件，渲染App组件，根据写的root自动到index.html文件下）　＝> index.html（在此文件下找到root节点，App组件就渲染到页面上了）

index.js文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 渲染App.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    {/* 检查App组件以及子组件里的一些代码是否有不合理的地方 */}
    
  
);

reportWebVitals();

index.html文件：

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  React App



  
  You need to enable JavaScript to run this app.
  
  
  

App.js文件：

import logo from './logo.svg';
import './App.css';

function App() {
  //#region 
  return (
    
      
        
        
          Edit src/App.js and save to reload.
        
        
          Learn React
        
      
    
  );
  //#endregion
}
// 定义好了App.js组件在入口文件index.js中渲染
export default App;

项目启动：新建终端，在终端中输入命令行：npm start，跳转到浏览器页面，就显示初始化页面了。