React学习前先搭好环境,官网的例子看着比较分散。结合webpack就可以体验完整的es6开发流程了。
源码:https://github.com/Ryan-Miao/hello-react-js/releases/tag/0.1
涉及以下几个技术。但从hello world的角度说,目前先不用知道是干嘛的,先用来学习react,后面再去研究各个组件的功能。
去官网下载NodeJS,安装。 去官网下载yarn,然后安装。
最终搭建的文件结构如下:
. |____.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
mkdir hello-react-js cd hello-react-js yarn init
添加webpack
yarn add webpack webpack-dev-server path
这时,项目根目录下会多出一个yarn.lock
,不用理会。
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引入的名称。刚才提到了babel-loader
,除了配置之外还需要加载依赖:
yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
然后,在根目录创建.babelrc
:
{ "presets":[ "es2015", "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>); } }
html-webpack-plugin
前面配置了html-webpack-plugin
,这里还需要加载依赖文件:
yarn add html-webpack-plugin
在前面的配置文件制定了html模板文件,输出文件名,以及js打包文件插入的位置。
打开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" } }
开始的时候照葫芦画瓢,先把环境搭建起来。然后开始学习,开始做事。在需要的时候去研究对应的问题。不然,知识何其多也。下面就可以照着react官网的教程,把react组件过一遍。然后再去看redux。
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句