Day5. React脚手架, 搭建环境看这篇就够了

一. React脚手架

1. 前端工程的复杂化

• 如果我们开发的仅仅只是几个小的demo, 那么永远不需要考虑一些复杂的问题

  
  
  

  复杂化.png
• 模块化开发, 被组成在成百上千个文件中, 相互依赖, 三方库的依赖管理
• 为了解决上面这些问题, 我们需要再去学习一些工具
• • 比如babel(ES6 -> ES5)、webpack、gulp. 配置它们转换规则、打包依赖、热更新等等一些的内容;
• • 脚手架的出现, 就是帮助我们解决这一系列问题的;

2. 脚手架是什么呢?

• 传统的脚手架指的是建筑学的一种结构: 在搭建楼房、建筑物时, 临时搭建出来的一个框架;

  
  
  

  真实的脚手架.png

• 编程中提到的脚手架(Scaffold), 其实是一种工具, 帮我们可以快速生成项目的工程化结构;

  
  
  

  编程中的脚手架.png

3. 前端脚手架

• 对于现在比较流行的三大框架都有属于自己的脚手架;
• • Vue的脚手架: vue-cli
• • Angular的脚手架: angular-cli
• • React的脚手架: create-react-app
• 他们的作用都是帮助我们生成一个通用的目录结构, 并且已经将我们所需的工程环境配置好.
• 使用这些脚手架需要依赖什么呢?
• • 目前这些脚手架都是使用node编写的, 并且都是基于webpack的;
• • 所以我们必须在自己的电脑上安装node环境;
• 这里我们主要学习React, 所以我们还是以React的脚手架工具: create-react-app作为讲解;

4. 安装node

• React脚手架本身需要依赖node, 所以我们需要安装node环境;
  LTS(长期支持维护的版本)官网

• • 无论是windows还是Mac OS, 都可以通过直接下载;

    
    
    

    node官网

验证命令.png

• Node -npm 包管理工具 npm: node packages managet
• 已经帮助安装好npm工具

5. 包管理工具

• 什么是npm?

• • 全称Node Package Manager, 即"node包管理器";
• • 作用肯定是帮助我们管理一下依赖的工具包(比如react、react-deom、axios、babel、webpack等等);
• • 作者开发的目的就是为了解决"模块管理很糟糕"的问题

• 另外, 还有一个大名鼎鼎的node包管理工具yarn:

  
  
  

  Yarn.png

• yarn --version

6. Yarn和npm命令对比

命令对比.png

7. 安装脚手架

• 再介绍一个工具 cnpm, 国内用, 特殊的环境, 镜像设置成taobao
• npm install -g cnpm --registry=https://registry.npm.taobao.org
• 最后一个需要安装的是创建React项目的脚手架:
  npm install -g create-react-app
create-react-app --version

1. 安装nodejs
2. npm yarn cnpm
3. create-react-app

8. 创建React项目

• 现在, 我们就可以通过脚手架来创建React项目了.
• 创建React项目的命令如下:
• • 注意: 项目名称不能包含大写字母
• • 另外还有更多创建项目的方式, 可以参考GitHub的readme
    create-react-app 项目名称
• 创建完成后, 进入对应的目录, 就可以将项目跑起来:

cd 01-test-react
yarn start
自动打开浏览器进入网页
localhost:3000

初始样子.png

9. 目录结构分析

目录结构.png

• node_modules里面有很多东西
• yarn add axios 把库的依赖下载到本地node_modules, 不会手动管理它
  
  

  目录.png
• .gitignore 源代码管理工具, git, 当前代码共享push到代码仓库, 有些东西不需要共享, 如node_modules, 配置信息不需要共享, 在gitignore里面做一个配置

• package.json, 非常重要的文件, 关于整个项目管理的配置文件, yarn start 本质上是执行 scripts中的脚本

  
  
  package.json.png
• README.md 项目的描述, markdown的格式
• yarn.lock 记录着真实的版本依赖, 解决一些版本混乱的问题, ^表示当前依赖的版本可以进行小版本的迭代, 小版本更新可以更新, 这样做会产生一个弊端, 早期没有lock文件, npm5开始有的, 一般很少手动修改

另外两个文件夹

• public文件夹
• favicon.icon, React图标
• index.html 每一个项目的入口
• log192.png log512.png 图片
• mianifest.json文件
• robots.txt 设置爬虫规则, 哪些可以哪些不可以爬
• scr文件夹
• 之后写源代码的文件, 以后写的react代码都是在里面的
• App.css, App.js 函数式组件, 热更新
• App.test.js 测试用例, index.css 全局样式, index.js React入口, log.svg 旋转的图片 svg画出来的, setupTests.js 初始化操作
• mianifest.json

10. 了解PWA

• 整个目录结构都非常好理解, 只是有一个PWA相关的概念:
• • PWA全称Progressive Web App, 即渐进式WEB应用;
• • 一个PWA应用首先是一个网页, 可以通过Web技术编写出一个网页应用;
• • 随后添加上App Manifest和Service Worker来实现PWA的安装和离线等功能;
• • 这种Web存在的形式, 我们也称之为是Web App;
• PWA解决了哪些问题呢?
• • 可以添加至主屏幕, 点击主屏幕图标可以实现启动动画以及隐藏地址栏;
• • 实现离线缓存功能, 即使用户手机没有网络, 依然可以使用一些离线功能;
• • 实现了消息推送;
• • 等等一系列类似于Native App的功能;
• index.js中调用Service Worker里面的东西

• 不需要的话, 可以删掉

  
  
  image.png
• 路径里最好不要有中文

11. webpack是什么?

• 我们说过React的脚手架是基于Webpack来配置的:
• • webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler);

• • 当webpack处理应用程序时, 他会递归地构建一个依赖关系图(dependency graph), 其中包含应用程序需要的每个模块, 然后将所有这些模块打包成一个或多个bundle;

    
    
    

    webpack.png

12. 脚手架中的webpack

• 目录结构里面没有看到webpack的配置
• • 原因是React脚手架将webpack相关的配置隐藏起来了(其实从Vue CLI3开始, 也是进行了隐藏);
• • yarn eject这个操作是不可逆的, 默认不希望暴露或者修改
    
    webpack显示.png
• 脚手架创建的项目, 让文件夹变得非常的大, 课件文件缩小, 为什么变大? node_modules里面有特别多的文件146M, 以后给的课件, 没有node_modules文件夹, yarn start直接跑是跑不起来的, 要先执行yarn install, 把需要安装的依赖进行安装, 生成一个node_modules文件夹

二. 开始用脚手架写一个项目

• src中的文件夹中所有的文件全部删除

• public中的不用的文件删除

  
  
  删除操作.png

• 这是yarn start, 报错, 脚本管理webpack, webpack找入口, src下面的index.js, 必须包含这个文件.

  
  
  

  报错.png
• 界面上一片空白, React代码, 在界面上渲染内容.
• common js的语法, module.exports = require
• 想用必须做一个导入

import React from "react";
import ReactDOM from "react-dom";

//是否加default
import {sum} from './utils';

import {sum, mul} from './utils';

ReactDOM.render(
Hello React
, document.getElementById("root"));

• 每一个小功能放到一个单独的模块里面

  
  
  结构.png

推荐书籍: 你不知道的JavaScript - 人民邮电出版社

• 开源的书

链接：https://pan.baidu.com/s/1pfviFDVDg7EpF35HQWEc6Q 密码：vaft

你不知道的JavaScript.png

coderwhy的React核心技术与开发实战课程链接

少年~来做同学呀~.png