react系列（零）安装

时间 2019-12-14

标签 react 系列安装栏目 React 繁體版

原文原文链接

安装

在最初的阶段，可使用在线编辑的网站来学习React基本的语法。
从 Hello World 开始，能够在Codepen，或者codesandbox上进行编写。
固然，也可使用npm或者yarn来安装依赖，本地进行开发。
这里先讲解经过create-react-app来建立一个React项目，后面会详细讲解如何用webpack建立一个react项目。javascript

create-react-app

详细文档能够去github查看https://github.com/facebook/create-react-app。css

Node和Npm

首先安装Node.js，这个直接在Node官网下载安装包便可。建议下载长期支持版，bug会较少。
安装完毕后，在终端或者cmd里输入html

npm -v

若是要使用npx，确保npm的版本大于5.2。若是npm版本较低，使用前端

npm i -g npm

更新npm到最新版，就可使用npx了。有关npx的详细信息，能够查看这篇文章。
若是使用yarn，也能够自行去yarn官网下载安装。java

create-react-app

官方介绍了3种建立一个react-app的方法。
1.npxnode

npx create-react-app my-app

2.npm init xxx your-appreact

npm init react-app my-app

npm init至关于一次npx的命令封装，具体解释能够看一下这篇npm文档-init|npm。
须要注意的是，这个方法须要更高版本的npm，6+。
3.yarnwebpack

yarn create react-app my-app

我我的比较建议使用yarn来管理npm依赖，速度更快，上手也很简单。此处yarn的版本要求0.25+。git

cd my-app

等到依赖安装完毕，进入到新建立的my-app目录里。github

├── node_modules
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

create-react-app只安装了最少能运行一个react-app的依赖，例子也很简单，如今咱们运行一下。

yarn start

运行成功后，就能够在http://localhost:3000看到这个例子了。

webpack

如今前端开发经常使用的构建工具是webpack。接下来介绍用webpack构建一个简单的react-app。

新建目录

首先新建一个目录。

mkdir webpack-react-app
cd webpack-react-app
npm init -y

这时，目录里会有一个package.json。接下来，咱们新建一个HTML文件，存放到dist目录，做为一个载体。

mkdir dist
cd dist
touch index.html

它的代码以下

<!DOCTYPE html>
<html>
  <head>
    <title>webpack react app</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/main.js"></script>
  </body>
</html>

这里的id，默认为app，在具体编写时，能够修改。main.js也是webpack本身生成的，能够修改。

安装webpack

接下来安装webpack的一些依赖。

yarn add -D webpack webpack-dev-server webpack-cli

安装完毕之后，在package.json配置一下启动命令。

...
"scripts": {
  "start": "webpack-dev-server --config ./webpack.config.js --mode development",
  ...
},
...

--mode 用来配置模式，能够区别是构建仍是开发模式，若是是构建发布，就把一些开发时的提示等插件去掉。
--config 指向webpack的配置文件，默认为同目录下的 webpack.config.js。

配置webpack

接下来咱们来建立 webpack.config.js。

touch webpack.config.js

它的基本代码以下：

module.exports = {
  entry: './src/index.js', //webpack的入口文件
  output: { //输出目录配置
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'main.js'
  },
  devServer: { //开发时服务器的配置
    contentBase: './dist'
  }
};

根据习惯， src/index.js 是咱们默认的入口。打包结束之后，生成一个 main.js 到dist目录下。配置了DevSever以后，咱们能够在浏览器里访问到dist下的文件。
接下来须要编写 src/index.js。

console.log('webpack test');

终端运行

yarn start

打开http://localhost:8080查看控制台输出。
正常输出了webpack test。
接下来要引入react。

安装babel

react用到了jsx语法，须要使用babel来转义一遍，才能被浏览器正常读取。
安装babel和依赖

yarn add -D babel-core babel-loader babel-preset-env babel-preset-react

新建babel配置文件

touch .babelrc

配置以下：

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

具体的 babel-preset-env 配置能够查看babel文档-babel-preset-env配置。
安装完毕之后，新的 webpack.config.js 配置为

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  ...
};

接着就能够安装react依赖了。

yarn add -D react react-dom

把 index.js 重写一下。

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

const title = 'Hello World!';

ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);

运行一下

yarn start

ok，一个简单的react-app就建立成功了。下一篇，将会讲解react的基本概念和语法。谢谢阅读。