关于javascript:React系列三React脚手架

快来退出咱们吧！

“ 小和山的菜鸟们 ”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (https://xhs-rookies.com/) 进行学习，及时获取最新文章。

“Code tailor”，如果您对咱们文章感兴趣、或是想提一些倡议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的分割，您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励！

前言

这节咱们将介绍如何通过 React 脚手架创立一个 React 工程并进行编写内容，不必像 Hello React 那样在 html 中编写 React 代码。

本文会向你介绍以下内容：

• 前端工程的复杂化
• 脚手架是什么
• 如何搭建一个 React 脚手架
• 脚手架的目录构造
• 如何在脚手架上编写本人的代码

前端工程的复杂化

随着前端我的项目开发的越来越简单，咱们须要开始思考许许多多问题，比方：

• 我的项目的目录构造如何划分
• 如何管理文件间的相互依赖关系
• 如何治理第三方库的依赖
• 如何让我的项目在公布时进行压缩，减小传输大小以及混同变量名

现在的前端我的项目曾经变得非常复杂了，咱们不能单纯的应用 script 标签来引入大量的第三方库，不能应用 less 或者 sass 等预处理器来对 css 进行更好的编写，不能很好的治理第三方库的版本和依赖

为了解决这些问题，咱们可能须要学习一些包管理工具、打包工具比方：babel、webpack、npm 等。配置转换规则、打包依赖以及热更新等性能。

可是这样对于一些初学者而言并不敌对，你还没有开始上手学习各种常识就被迫学习许多辅助型的工具，而且它们的配置都不那么简略。

脚手架的呈现就是为了帮忙咱们解决上述所有问题的一个很不便的工具。

脚手架是什么

在现实生活中，脚手架是为了保障各施工过程顺利进行而搭设的工作平台。建造实现之前能够在脚手架上不便的工作，建造后能够间接拆除不会对建造有任何关联。而咱们提到的 React 脚手架和这有殊途同归之处。

编程中提到的脚手架，其实是一种工具，帮咱们能够疾速生成我的项目的工程化构造。每个我的项目的成果不同然而其我的项目构造大致相同，所以没必要每次进行反复的工作，脚手架提供了一个学习 React 的舒服环境，也是用 React 创立新的单页利用的最佳形式。

它会配置你的开发环境，以便使你可能应用最新的 JavaScript 个性，提供良好的开发体验，并为生产环境优化你的应用程序。

如何搭建一个 React 脚手架

首先你须要确保你装置了 Node >= 8.10 和 npm >= 5.6，具体环境搭建请详见前端环境搭建

而后在须要创立我的项目的文件夹关上命令行，执行

npx create-react-app my-app
cd my-app
npm start

留神： 第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

此处的 my-app就是我的项目的名称，能够本人替换，然而不能呈现中文和大写字母。创立实现之后会创立一个名为 my-app 的文件夹，进入这个文件夹之后，执行 npm start 就能够将我的项目跑起来了。

脚手架的目录构造

my-app
├─ 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 // 测试初始化文件
├─ node_modules // 所有依赖装置文件夹
└─ yarn.lock // 依赖本地下载版本管理文件

包管理工具

咱们之前提到过，脚手架的其中一个作用就是帮忙咱们治理第三方依赖，那么咱们该如何在咱们的我的项目中对第三方依赖进行治理呢？咱们应用包管理工具来进行对立治理。

前端有两个包管理工具能够应用，一个是 npm，一个是 yarn。咱们先介绍 npm。

npm

npm 的全称是 Node Package Manager，是 node 的包管理工具，它在你装置 node 环境时就曾经主动装置了。

npm 的作用是帮忙咱们治理一下依赖的工具包，它会将你须要的依赖以及须要的版本号记录在 package.json 里，所以每次传输时就不须要重复传输 node_modules，只须要在应用的时候应用 npm install 对依赖进行装置就能够应用了。

yarn

Yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具。

因为晚期 npm 存在许多缺点，比方装置依赖速度慢，版本凌乱，所以下面这些公司联合推出了 yarn 来解决这些问题。

现在 npm 在推出 5.0 版本后曾经解决了许多问题，两者并没有特地显著的区别。不过 React 脚手架默认应用 yarn 进行治理，所以咱们倡议你应用 yarn 进行依赖治理。

罕用指令

如何在脚手架上编写本人的代码

首先咱们要晓得脚手架的渲染流程，最先被渲染的是 public/index.html 文件并执行 src/index.js 文件。而后 src/index.js 会从 src/app.js 文件中导入 App 组件并挂载到 public/index.html 上。所以咱们要批改页面都须要在 src/app.js 文件中进行批改。

我将 src/app.js 文件批改如下：

import React, {Component} from 'react'

class App extends Component {constructor() {super()
    this.state = {message: 'hello,XHS',}
  }

  render() {
    return (
      <div className="App">
        <h2> {this.state.message}</h2>
      </div>
    )
  }
}

export default App

而后执行yarn start 成果如下：

很好，这样你就能够在 React 脚手架中编写属于本人的 React 代码了，而且当你批改代码并保留之后，脚手架会主动帮你进行热更新，你就不要手动刷新网页了。

下节预报

下节中咱们将讲述一个在前端中占据半壁江山的组件化思维，为什么须要组件化、什么是组件化等等，以及在 React 中的组件化。敬请期待！