react 基础篇 #2 create-react-app

1. 介绍

在开发react应用时，应该没有人用传统的方法引入react的源文件(js)，而后在html编辑吧。

你们都是用webpack + es6来结合react开发前端应用。

这个时候，咱们能够手动使用npm来安装各类插件，来从头至尾本身搭建环境。

好比：

npm install react react-dom --save
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save
npm install babel webpack webpack-dev-server -g

复制代码

虽然本身搭建的过程也是一个很好的学习过程，可是有时候不免遇到各类问题，特别是初学者，并且每次开发一个新应用，都要本身从头搭建，未免太繁琐。

因而，有人根据本身的经验和最佳实践，开发了脚手架，避免开发过程当中的重复造轮子和作无用功，从而节省开发时间。

相似这样的脚手架，我扫了网络上比较多人用和关注的，一共发现了三个，它们分别是：

• react-boilerplate
• react-redux-starter-kit
• create-react-app

它们的关注量都很是大，截至写这篇文章为止，在github上的star量是这样的：

因而可知，使用这三个脚手架的人都至关多，最突出的是create-react-app。

它是后来居上，他的开发时间都晚于前两个，但关注量却比他们还大，并且他仍是facebook官方开发的。

确定是一个优秀的产品。

下面来介绍一下它的特色。

2. 特色

它有好多好多的优势，先从安装使用提及。

2.1 简单的安装使用

create-react-app安装起来实在是太简单，只须要一条命令，不像别的脚手架，还须要去clone整个脚手架的源码，再在那基础上改。

npm install -g create-react-app

复制代码

装完以后，生成一个新的项目，可使用下面的命令：

create-react-app my-app
cd my-app/ 

复制代码

建立了my-app目录，这个时候，使用下面的命令就能够开始开发应用了。

npm start

复制代码

默认状况下，会在开发环境下启动一个服务器，监听在3000端口，它会主动给你打开浏览器的，能够马上就看到这个app的效果。

是否是很简单？

2.2 源码结构简单清晰

在项目my-app目录中，你会发现源码很是清晰，没有多余的文件。

真的很清爽，全部的源码你将放到src目录下，什么配置文件，各类乱七八糟都不用管，你只须要专一开发就行了，create-react-app都给你处理好了。

整个源码简单，又小又清爽！管理起来也方便！

若是你使用过webpack-dev-server或webpack搭建过开发环境，你就会发现，create-react-app的开发环境也有相似webpack-dev-server的--inline --hot自动刷新的功能。

什么意思呢？

就是一旦源码文件，一更新，再保存以后，浏览器会自动刷新，让你能实时查看效果。

你总要探究一下是怎么回事，难道create-react-app也用上了webpack-dev-server?

翻看了一下源码，没有找到webpack.config.js文件，若是有使用webpack就应该有这个文件，好奇怪。

看了一下node_modules目录，也没找到webpack相关的东西。

先源头入手，我是用npm start命令来运行项目的。

就从package.json文件入手，它的内容是这样的：

看到了这行：

"start": "react-scripts start"

复制代码

react-scripts又是什么？

在node_modules目录中能找到它，它果真依赖了好多工具，其中就包括'webpack'。

里面果真也有webpack的配置文件，也有好多脚本文件。

原来它是facebook开发的一个管理create-react-app服务的工具。

原来也是它让整个源码变得很整洁的。

由于它隐藏了不必的文件，大多数人的配置都是差很少的。

除此以外，它还加入了eslint的功能。让你在开发过程当中，更关注于代码，很不错。

2.3 线上编译命令

这个是create-react-app的一个大亮点，它能让你的应用骗译出在线上生产环境运行的代码，编译出来的文件很小，且文件名还带hash值，方便咱们作cache，并且它还提供一个服务器，让咱们在本地也能看到线上生产环境相似的效果，真的超级方便。

只需一行命令：

npm run build

复制代码

运行下面两条命令，能够查看线上生产环境的运行效果。

npm install -g pushstate-server
pushstate-server build

复制代码

编译好的文件都会放到build目录中。

2.4 api开发

在开发react应用时，不免与服务器进行数据交互，就是要跟api打交道。

这个时候，有一个问题。

api存在的服务器多是跟react应用彻底分开的，并且，开发环境跟线上环境又不太同样。

好比，开发环境中，你的react应用是跑在3000端口的，但是api服务可能跑在3001端口，这个时候，你跟api服务器交互的时候，可能会使用fetch或各类请求库，好比jquery的ajax。

这个时候可能会遇到CORS问题，毕竟端口不一样，而线上环境却没有这个问题，由于你都控制线上环境的react应用和api应用，跑在同一个端口上。

按照以往思路，解决的方法多是用环境变量，好比：

const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/' 

复制代码

可是这样搞起来，仍是有些复杂，然而，create-react-app提供了一个超级简单的方法，只须要在package.json文件中，加一个配置项就能够了。

好比：

"proxy": "http://localhost:3001/", 

复制代码

至于你用的是http的何种请求库，都是同样的，不用改任何代码。这个选项，只对开发环境有效，线上环境仍是保持react应用和api应用同一个端口。

yarn run eject 运行后能够进行自定义配置。

webpack 3 零基础入门视频教程 #8 - 用 webpack 和 babel 配置 react 开发环境

1. 安装 react

要使用 react，就必须装下面两个包的。

$ npm install --save react react-dom 

复制代码

2. 创建 babel

可能你不懂 babel 是什么，你能够把它理解为编译器，它能把 react 代码转成通常浏览器可读可执行的代码，一般能够用它来转化 react 或 vue 这样的前端代码，或者把 es6 代码转成普通的 javascript 代码等等。

若是还不理解的话，能够看我这篇文章 babel 入门指南。

要让 babel 很好的转化 react 代码，首先要安装好 babel，再装 babel 转化 react 的包。

运行下面的命令。

$ npm install --save-dev babel-core babel-preset-react babel-preset-env 

复制代码

建立 .babelrc 文件。

{ "presets": ["env", "react"] }

复制代码

为何我知道要这么作呢？

由于我是分别结合 babel 和 react 的官网给的最新官方指南。

能够参考下面两个连接：

• React preset
• React Installation

3. 在 webpack 使用 babel-loader

最后咱们须要在 webpack 中使用一个 loader 来转化 react 的代码。

首先，安装。

$ npm install --save-dev babel-loader 

复制代码

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      },
      // 这两行是处理 react 相关的内容
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
};