世界上最伟大的投资就是投资自己的教育
相信这个话题很多人都感兴趣,这里就用几个简单的命令就可以搭建出 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
的官网给的最新官方指南。
可以参考下面两个链接:
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/ }
]
}
};
4. 写 react 组件
接着我们来准备一些 react 的代码,要来测试一下。
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/app.js
import css from './app.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import Root from './Root';
ReactDOM.render(
<Root></Root>,
document.getElementById('root')
);
src/Root.js
import React from 'react';
export default class Root extends React.Component {
render() {
return (
<div style={{textAlign: 'center'}}>
<h1>Hello World</h1>
</div>);
}
}
效果如下:
参考链接:
- Setting up Webpack, Babel and React from scratch, revisited
- Setup a React Environment Using webpack and Babel
- Setting up React with Webpack 3.0, Yarn and Babel
先说这么多吧。
03:521FreeWebpack 3 零基础入门视频教程 #1 - 介绍
03:382FreeWebpack 3 零基础入门视频教程 #2 - 安装
07:373FreeWebpack 3 零基础入门视频教程 #3 - 实现 hello world
03:414FreeWebpack 3 零基础入门视频教程 #4 - Webpack 的配置文件 Webpack.config.js
11:095FreeWebpack 3 零基础入门视频教程 #5 - 使用第一个 Webpack 插件 html-Webpack-plugin
12:516FreeWebpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass
06:247FreeWebpack 3 零基础入门视频教程 #7 - 初识 Webpack-dev-server
05:09FreeWebpack 3 零基础入门视频教程 #8 - 用 Webpack 和 babel 配置 React 开发环境
05:079FreeWebpack 3 零基础入门视频教程 #9 - 用 clean-Webpack-plugin 来清除文件
06:3810FreeWebpack 3 零基础入门视频教程 #10 - 配置多个 HTML 文件
04:0911FreeWebpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板
07:5312FreeWebpack 3 零基础入门视频教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
06:3313FreeWebpack 3 零基础入门视频教程 #13 - 生产环境 vs 开发环境
10:2114FreeWebpack 3 零基础入门视频教程 #14 - 如何打包图片
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号