重学React，第三天

沉曦
55 阅读4分钟 
graph LR;
搭建React项目环境
确保Node环境-->安装脚手架-->创建项目--创建完成-->A(本质上安装了) & B(目录结构)
A-->react & react-dom & react-scripts
B-->public & src & gitignore & yarn.lock/package-lock.json & node_modules
src-->App.css & App.js & App.test.js & index.css & index.js & logo.svg & app.js & serviceWorker.js

脚手架的安装

Node安装好之后，你就可以使用npm命令来安装脚手架工具了，方法很简单，只要打开终端，然后输入下面的命令就可以了。

npm install -g create-react-app

create-react-app是React官方出的脚手架工具，其实有很多第三方的脚手架工具，也有很多优秀的。但是作为初学者为了减少踩坑，所以我们使用官方的脚手架。

创建React项目

脚手架安装好以后，就可以创建项目了，我们在D盘创建一个ReactDemo文件夹，然后进入这个文件夹，创建新的React项目。

npx create-react-app demo   	# 用脚手架创建React项目(JS)
npx create-react-app demo --template typescript # 用脚手架创建React项目(TS)

cd demo   					# 等创建完成后，进入项目目录
npm start   				# 预览项目，如果能正常打开，说明项目创建成功

创建项目过程中发生了什么？

这个过程实际会安装三个东西

  • react

    react的顶级库

  • react-dom

    react-dom是react剥离出的涉及DOM操作的部分。react-dom包的核心功能就是把这些虚拟DOM渲染到文档中变成实际DOM。因为react有很多的运行环境，比如app端的react-native,我们要在web上运行就使用react-dom

  • react-scripts

    包含运行和打包，react应用程序的所有脚本及配置

脚手架生成的项目目录介绍

  • public

    静态公共目录，里边有公用模板和图标等一些东西。

    • favicon.ico

      这个是网站或者说项目的图标，一般在浏览器标签页的左上角显示。

    • index.html

      首页的模板文件，我们可以试着改动一下，就能看到结果。

    • logo.png

    • mainifest.json

      移动端配置文件

    • robots.txt

      爬虫协议文件,文件是一个提供给搜索引擎蜘蛛读取并遵循严格的语法内容所组成的文本文件，也称为“机器人排除协议”，它不是任何组织制定的官方标准，但是所有主流的搜索引擎都遵循它的规则。它是告诉搜索引擎蜘蛛，该网站哪些内容是可以抓取，哪些内容是禁止抓取的的方法之一。 它是一个纯文本文件，存放在站点根目录下。它的设置虽然很简单，但是作用却非常强大，因此要谨慎设置，不然对你的网站影响很大。

  • src

    主要代码编写文件，这个文件夹里的文件对我们来说最重要，都需要我们掌握。

    • App.css

      公共样式。

    • App.js

      这个文件相当于一个方法模块，也是一个简单的模块化编程。

    • App.test.js

      测试用例，App.test.js是针对App.js的测试，App.js采用函数式组件开发。

    • index.css

      这个是index.js里的CSS文件。

    • index.js

      这个就是项目的入口文件。

    • logo.svg

    • app.js

      这个文件相当于一个方法模块，也是一个简单的模块化编程。

    • serviceWorker.js

      这个是用于写移动端开发的，PWA必须用到这个文件，有了这个文件，就相当于有了离线浏览的功能。

    • setupTests.js

      针对index.js的测试

  • gitignore

    这个是git的选择性上传的配置文件，比如一会要介绍的node_modules文件夹，就需要配置不上传。

  • node_modules

  • package.json

    这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置

  • yarn.lock/package-lock.json

    yarn 命令或者添加依赖包命令后，Yarn 都会在项目根目录下自动生成一个 yarn.lock 文件。在使用 Yarn 安装、升级、删除依赖项目时，会自动更新到 yarn.lock 文件中。npm则是package-lock.json

    一般我们不会去手动编辑这个文件，因为很容易破坏这个文件。它准确存储每一个依赖项的安装版本，类似日志

  • tsconfig.json

    若安装的TS版，则会多一个ts的配置文件

知识支持

脚手架是个啥?

  1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

  1. 包含了所有需要的配置（语法检查、jsx编译、devServer…）

  2. 下载好了所有相关的依赖

  3. 可以直接运行一个简单效果

  1. react提供了一个用于创建react项目的脚手架库: create-react-app

  2. 项目的整体技术架构为: react + webpack + es6 + eslint

  3. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

最后一句

学习心得！若有不正，还望斧正。希望掘友们不要吝啬对我的建议。

avatar
文章
阅读
粉丝