环境配置
1.安装node.js
官网地址:https://nodejs.org/en
2.安装webpack(Vite也行)
npm install -g webpack
3.配置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
4.安装脚手架create-react-app
create-react-app是Facebook便于构建react项目的一个脚手架类似于vue cli。
npm i -g create-react-app
或cnpm i -g create-react-app
5.创建项目
create-react-app react_demo //名为:react_demo
cd react_demo
6.启动项目
npm start
目录结构分析
1.public
favicon.ico 为导航图标
index.html 为项目首页的html模板
manifest.json:在这里对你的网页做一些配置,当用户访问网页,生成一个网页的桌面快捷方式时,
会以这个文件中的内容作为图标和文字的显示内容.
robots.txt:是一个协议,我们可以把它理解为一个网站的"管家",它会告诉搜索引擎哪些页面可以
访问,哪些页面不能访问。也可以规定哪些搜索引擎可以访问我们的网站而哪些搜索引擎不能爬取我们网站的信息等等,
是网站管理者指定的"君子协议".
2.src
App.css:是app.js的样式文件.
App.js:是被index引入的一个组件,也用一个js文件表示.
App.test.js 自动化测试文件.
index.css:index.js中的的样式文件
index.js:是整个项目的入口js文件.
logo.svg:是一个svg的图片文件,用于界面展示使用.
serviceWorker.js:PWA(progressive web application)理念是通过写网页的方式写移动端的app
在http协议的服务器上,当用户第一次访问的时候需要联网才能看见,但一旦用户访问完断网,
并引用了下面的文件,即使断网,第二次访问的时候,依然可以看到之前访问的页面.
serviceWorker协助将之前的网页存储到浏览器之内.
setupTests.js:针对`index.js`的测试
3.gitignore(git忽略)
git上传文件时可以忽略部分文件,比如Node_modules.
4.package-lock.json(lock锁的意思)
依赖锁定的具体版本号和来源
5.package.json
里面记录了当前项目的信息。eg: 项目名称、版本、作者、地址、当前项目依赖哪些第三方模块等.
使用npm安装第三方模块,是模块的相关信息会自动添加到package.json文件中.
6.README.md(我的理解是你想干啥就干啥哈哈哈哈)
文件是一个项目的入门手册,项目的说明文档,markdown格式,里面介绍了整个项目的使用、功能等等。
欢迎各位大佬纠错指正,给介意~~~