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

最新推荐文章于 2025-07-04 22:41:26 发布

蜡笔雏田学前端

最新推荐文章于 2025-07-04 22:41:26 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js webpack javascript

本文链接：https://blog.csdn.net/xuxuii/article/details/125089119

React 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何使用create-react-app快速创建React应用，包括脚手架的功能、项目创建步骤及启动方法。详细解析了项目结构，强调了工程化的概念，并展示了从入口文件到页面渲染的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🏆React应用(基于React脚手架)

⛳1. 使用create-react-app创建react应用

🥇1.1 react脚手架

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

什么是工程化？如果在项目中，用上了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(
  <React.StrictMode>
    {/* 检查App组件以及子组件里的一些代码是否有不合理的地方 */}
    <App />
  </React.StrictMode>
);

reportWebVitals();

index.html文件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <!-- %PUBLIC_URL%：代表public这个文件夹的路径 -->
  <!-- favicon.ico：网页图标 -->
  <!-- <link rel="icon" href="./favicon.ico" /> -->
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <!-- 开启理想视口，用于做移动端网页的适配 -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 用于配置浏览器页签+地址栏的颜色，（只支持安卓手机浏览器） -->
  <meta name="theme-color" content="#000000" />
  <!-- 描述网站信息 -->
  <meta name="description" content="Web site created using create-react-app" />
  <!-- 用于指定网页添加到手机主屏幕后的图标,只适用于苹果 -->
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <!-- 应用加壳时的配置文件 加壳是pc端写好的html页面外面加上一层壳就成了移动端的页面了 -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>React App</title>
</head>

<body>
  <!-- 若浏览器不支持JS,则展示标签中的内容 -->
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!-- 相当于之前写的<div id="test"></div> -->
  <!-- 只能往root里放一个组件,就是App.js -->
</body>

</html>

App.js文件：

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

function App() {
  //#region 
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
  //#endregion
}
// 定义好了App.js组件在入口文件index.js中渲染
export default App;