腾讯云·社区
Hello ReactJS
前言
React学习前先搭好环境，官网的例子看着比较分散。结合webpack就可以体验完整的es6开发流程了。
源码：https://github.com/Ryan-Miao/hello-react-js/releases/tag/0.1
1. 环境搭建
涉及以下几个技术。但从hello world的角度说，目前先不用知道是干嘛的，先用来学习react，后面再去研究各个组件的功能。
- Webpack - A module bundler
- Babel - A Javascript compiler
- ES6 - A relatively new Javasript standard
- Yarn - A package manager
- React - As expected
1.1 安装一些东西
去官网下载NodeJS，安装。 去官网下载yarn，然后安装。
1.2 开始搭建
最终搭建的文件结构如下：
. |____.babelrc |____node_modules |____app | |____components | | |____App.jsx | |____index.html | |____index.js |____dist | |____index.html | |____index_bundle.js |____package.json |____readme.md |____structure.txt |____webpack.config.js |____yarn.lock
1.2.1 初始化
mkdir hello-react-js cd hello-react-js yarn init
添加webpack
yarn add webpack webpack-dev-server path
这时，项目根目录下会多出一个yarn.lock，不用理会。
1.2.2 在根目录下创建webpack.config.js
var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }
]
},
plugins: [HtmlWebpackPluginConfig]
};entry： 指向入口js文件output: 指向打包后的文件目录filename: js打包后的文件名path: 打包后的文件目录loaders: 转换工具。这里简单加载es6的转换工具babel-loader，将以.js或者.jsx结尾的文件转换为es5.plugins: 一些插件。这里用到HtmlWebpackPlugin，将打包后的js文件插入到指定的html模板里。好处是我们不用手动将js插入html中，这在修改js文件名的时候很有用，否则我们还要手动修改js引入的名称。
1.2.3 添加babel
刚才提到了babel-loader，除了配置之外还需要加载依赖：
yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
然后，在根目录创建.babelrc:
{
"presets":[
"es2015", "react"
]
}1.2.4 添加react
yarn add react react-dom
创建app/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>创建app/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(<App />, document.getElementById('root'));创建app/components/App.jsx
import React from 'react';
export default class App extends React.Component {
render() {
return (
<div style={{textAlign: 'center'}}>
<h1>Hello World! Hi ReactJS</h1>
</div>);
}
}1.2.5 添加html-webpack-plugin
前面配置了html-webpack-plugin，这里还需要加载依赖文件:
yarn add html-webpack-plugin
在前面的配置文件制定了html模板文件，输出文件名，以及js打包文件插入的位置。
1.3 基本搞定，运行一下
打开package.json。在script下添加
...
"scripts": {
"start": "webpack-dev-server"
},
...运行
yarn start
这时候页面显示如下。大功告成。
可以在package.json里配置不同的webpack运行环境。这里只是搭建学习react官方文档之前先要准备好的环境。最终，package.json:
{
"name": "hello-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Ryan Miao",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"html-webpack-plugin": "^2.29.0",
"less-loader": "^4.0.5",
"react": "^15.6.1",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
},
"dependencies": {
"path": "^0.12.7",
"react-dom": "^15.6.1"
}
}1.3 小结
开始的时候照葫芦画瓢，先把环境搭建起来。然后开始学习，开始做事。在需要的时候去研究对应的问题。不然，知识何其多也。下面就可以照着react官网的教程，把react组件过一遍。然后再去看redux。
参考
本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句