React学习03-react脚手架

最新推荐文章于 2025-09-13 15:18:35 发布

原创

最新推荐文章于 2025-09-13 15:18:35 发布 · 930 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #前端

文章目录

工程化项目

工程化项目

脚手架简介

脚手架用来帮助快速创建基于xxx库的模板项目，包含了所有需要的配置，下载好了所有相关依赖，可以直接运行一个简单的效果。使用脚手架的项目特点有：模块化、组件化、工程化。
react脚手架：create-react-app
项目的整体技术架构为react+webpack+es6+eslint

创建项目并启动

一、全局安装：cmd命令进入电脑终端，输入 npm i -g create-react-app
二、使用cd命令切换到创建项目的目录 cd Desktop，使用命令创建项目 create-react-app 项目名，会创建一个项目文件夹
三、进入项目文件夹 cd 项目名
四、启动项目 npm start ，浏览器跳转显示项目页面，默认端口号3000，关闭项目 ctrl+c

public文件夹

静态资源文件夹，存放主页面index.html，图片，静态资源配置文件manifest.json，爬虫协议文件robots.txt等。
在react项目中，只有一个index.html文件，页面元素靠组件实现。
react初始化项目public文件夹中的内含文件：
manifest.json：加壳文件，给html页面加应用的壳子，比如需要安卓应用，加安卓的壳子，生成.apk文件，变成安卓应用。细节可以单独搜课程了解。
index.html（必须）：必须包含root容器。：当浏览器不支持js展示时，显示标签内的内容。
robots.txt：包含一些爬虫协议。

src文件夹

源码文件夹，存放js, css文件。App.js为App组件，App.css为App组件的样式文件，App.test.js用于给App做测试，index.js为入口文件，
react初始化项目src文件夹中的内含文件：
App.js（必须）：App组件，主组件，往index.html的root容器里放App组件，其他组件放在App组件里。
index.js（必须）：入口文件，进行渲染App组件到index.html的root容器里。
React.StrictMode标签，用来检测App组件及其子组件的语法使用等是否正确。
reportWebVitals.js：引入性能库。
setupTests.js：用于组件测试，引入第三方库。

创建一个Hello组件

使用react脚手架在终端创建一个默认项目，删掉默认的public文件夹与src文件夹，新建空的public文件夹与src文件夹（体验搭建项目目录）。
新建必须文件，public文件夹：index.html，src文件夹：App.js和index.js。

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>

最低0.47元/天解锁文章