使用create-react-app和webpack构建react-app
安装
在最初的阶段,可以使用在线编辑的网站来学习React基本的语法。
从 Hello World 开始,可以在Codepen,或者codesandbox上进行编写。
当然,也可以使用npm或者yarn来安装依赖,本地进行开发。
这里主要讲解通过create-react-app来创建一个React项目,后面会提到webpack的一些使用。
create-react-app
详细文档可以去github查看https://github.com/facebook/create-react-app。
Node和Npm
首先安装Node.js,这个直接在Node官网下载安装包即可。建议下载长期支持版,bug会较少。
安装完毕后,在终端或者cmd里输入
npm -v
如果要使用npx,确保npm的版本大于5.2。如果npm版本较低,使用
npm i -g npm
更新npm到最新版,就可以使用npx了。有关npx的详细信息,可以查看这篇文章。
如果使用yarn,也可以自行去yarn官网下载安装。
create-react-app
官方介绍了3种创建一个react-app的方法。
- npx
npx create-react-app my-app
- npm init xxx your-app
npm init react-app my-app
npm init相当于一次npx的命令封装,具体解释可以看一下这篇npm文档-init|npm。
需要注意的是,这个方法需要更高版本的npm,6+。
- yarn
yarn create react-app my-app
我个人比较建议使用yarn来管理npm依赖,速度更快,上手也很简单。此处yarn的版本要求0.25+。
cd my-app
等到依赖安装完毕,进入到新创建的my-app目录里。
├── 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的基本概念和语法。
谢谢阅读。