其他分享
首页 > 其他分享> > 578 React系列四 - React脚手架

578 React系列四 - React脚手架

作者：互联网

一. 认识脚手架

1.1. 前端工程的复杂化

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

现代的前端项目已经越来越复杂了：

为了解决上面这些问题，我们需要再去学习一些工具：

脚手架的出现，就是帮助我们解决这一系列问题的；

1.2. 脚手架是什么呢？

传统的脚手架指的是建筑学的一种结构：在搭建楼房、建筑物时，临时搭建出来的一个框架；

图片脚手架

编程中提到的脚手架（Scaffold），其实是一种工具，帮我们可以快速生成项目的工程化结构；

总结：脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷；

对于现在比较流行的三大框架都有属于自己的脚手架：

它们的作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。

使用这些脚手架需要依赖什么呢？

这里我们主要是学习React，所以我们还是以React的脚手架工具：create-react-app作为讲解；

二. create-react-app

2.1. 安装相关的依赖

2.1.1. 安装node

React脚手架本身需要依赖node，所以我们需要安装node环境：

图片nodejs下载

下载后，双击安装即可：

img检测安装的版本

2.1.2. 包管理工具

什么是npm？

另外，还有一个大名鼎鼎的node包管理工具yarn：

安装yarn：

npm install -g yarn
yarn -v ：检测yarn安装的版本

图片检测yarn安装的版本

yarn和npm的命令对比

Npm Yarn
npm install yarn install
npm install [package] yarn add [package]
npm install --save [package] yarn add [package]
npm install --save-dev [package] yarn add [package] [--dev/-D]
npm rebuild yarn install --force
npm uninstall [package] yarn remove [package]
npm uninstall --save [package] yarn remove [package]
npm uninstall --save-dev [package] yarn remove [package]
npm uninstall --save-optional [package] yarn remove [package]
npm cache clean yarn cache clean
rm -rf node_modules && npm install yarn upgrade

cnpm的使用

在国内，某些情况使用npm和yarn可能无法正常安装一个库，这个时候我们可以选择使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.1.3. 安装脚手架

最后一个需要安装的是创建React项目的脚手架：

npm install -g create-react-app

create-react-app --version

图片检查React脚手架

2.2. 创建React项目

2.2.1. 创建React项目

现在，我们就可以通过脚手架来创建React项目了。

创建React项目的命令如下：

create-react-app 项目名称

另外还有更多创建项目的方式，可以参考GitHub的readme

图片image-20200615115822464

创建完成后，进入对应的目录，就可以将项目跑起来：

cd 01-test-reactyarn start

图片项目效果

2.2.2. 目录结构分析

我们可以通过VSCode打开项目：

图片项目目录结构

目录结构分析：

test-react
├─ README.md // readme说明文档
├─ package.json // 对整个应用程序的描述：包括应用名称、版本号、一些依赖包、以及项目的启动、打包等等（node管理项目必备文件）
├─ public
│    ├─ favicon.ico // 应用程序顶部的icon图标
│    ├─ index.html // 应用的index.html入口文件
│    ├─ logo192.png // 被在manifest.json中使用
│    ├─ logo512.png // 被在manifest.json中使用
│    ├─ manifest.json // 和Web app配置相关
│    └─ robots.txt // 指定搜索引擎可以或者无法爬取哪些文件
├─ src
│    ├─ App.css // App组件相关的样式
│    ├─ App.js // App组件的代码文件
│    ├─ App.test.js // App组件的测试代码文件
│    ├─ index.css // 全局的样式文件
│    ├─ index.js // 整个应用程序的入口文件
│    ├─ logo.svg // 刚才启动项目，所看到的React图标
│    ├─ serviceWorker.js // 默认帮助我们写好的注册PWA相关的代码
│    └─ setupTests.js // 测试初始化文件
└─ yarn.lock

整个目录结构都非常好理解，只是有一个PWA相关的概念：

PWA解决了哪些问题呢？

更多PWA相关的知识，可以自行去学习更多；

2.2.3. webpack配置

我们说过React的脚手架是基于Webpack来配置的：

图片webpack

在这里我们暂时不展开来讲webpack，因为里面的内容是非常多的（后续会有专门讲webpack的专题）；

但是，很奇怪：我们并没有在目录结构中看到任何webpack相关的内容？

如果我们希望看到webpack的配置信息，应该怎么来做呢？

yarn eject

img执行脚本

查看和学习webpack相关的配置信息：

图片webpack相关配置

2.3. 从零编写项目

2.3.1. 文件的删减

通过脚手架创建完项目，很多同学还是会感觉目录结构过于复杂，所以从零来编写代码。

我们先将不需要的文件统统删掉：

图片删除后的目录结构

修改index.html文件：

图片删除选中的两行内容

2.3.2. 开始编写代码

在src目录下，创建一个index.js文件，因为这是webpack打包的入口。

在index.js中开始编写React代码：

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

ReactDOM.render(<h2>Hello React</h2>, document.getElementById("root"));

图片展示效果

如果我们不希望直接在 ReactDOM.render 中编写过多的代码，就可以单独抽取一个组件App.js：

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return <h2>Hello App</h2>
  }
}

在index.js中引入App，并且使用它：

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

import App from './App';

ReactDOM.render(<App/>, document.getElementById("root"));

图片展示效果

标签：npm,react,578,App,yarn,React,脚手架
来源： https://www.cnblogs.com/jianjie/p/14299867.html