0. 前言
因為公司最近要做一個新的項目，最近都在學習react技術(shù)，想在學習一些新的技術(shù)的同時，想把自己的理解給大家分享一下，一是給大家的學習希望能帶來一點點幫助，而是，我在寫的同時也能加深印象，我呢！對于react也是從小白開始學的，今天分享一下怎么用react+webpack+es6實現(xiàn)簡單的Hello World！
1. 如何用npm搭建react的項目？
注意：要想使用npm，必須安裝nodejs
第一步、安裝全局包
$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g
第二步、創(chuàng)建根目錄
創(chuàng)建一個根目錄，目錄名為：reactApp，再使用 npm init 初始化，生成 package.json 文件：
$ mkdir reactApp
$ cd reactApp/
$ npm init
在控制臺一步步跟著做就行了?。?！
name: (pp) run-react-test
version: (1.0.0)
description: cllgeek
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/edz/Desktop/pp/package.json:
{
"name": "run-react-test",
"version": "1.0.0",
"description": "cllgeek",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes
第三步、添加安裝包及插件
因為我們要使用 React, 所以我們需要先安裝它，–save 命令用于將包添加至 package.json 文件
$ npm install react --save
$ npm install react-dom --save
安裝好剛才的倆個，我們還要安裝bable的插件，因為它可以把es6代碼轉(zhuǎn)化為es5，并且把我們寫的jsx語法轉(zhuǎn)化為javascript的語法，對，就是這么強大！
$ npm install babel-core --save
$ npm install babel-loader --save
$ npm install babel-preset-react --save
$ npm install babel-preset-es2015 --save
最后咱們看一下package.json文件里面下載過的插件
{
"name": "run-react-test",
"version": "1.0.0",
"description": "cllgeek",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.5.3",
"react-dom": "^15.5.3",
}
}
第四步、創(chuàng)建文件
接下來我們創(chuàng)建一些必要文件：
$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js
第五步、設置編譯器，服務器，載入器
打開 webpack.config.js 文件添加以下代碼:
var config = {
entry: './main.jsx',
output: {
publicPath: '',
filename: 'index.js'
},
module: {
loaders: [ {
test: /.jsx$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;
entry: 指定打包的入口文件 main.jsx。
output：配置打包結(jié)果，publicPath: ''定義了輸出的文件夾，filename則定義了打包結(jié)果文件的名稱。
module：定義了對模塊的處理邏輯，這里可以用loaders定義了一系列的加載器，以及一些正則。當需要加載的文件匹配test的正則時，就會調(diào)用后面的loader對文件進行處理，這正是webpack強大的原因。
現(xiàn)在打開 package.json 文件，找到 “scripts”中的 “test” “echo \”Error: no test specified\” && exit 1″使用以下代碼替換
"start": "webpack-dev-server --hot"
替換后的 package.json 文件 內(nèi)容如下：
{
"name": "run-react-test",
"version": "1.0.0",
"description": "cllgeek",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.5.3",
"react-dom": "^15.5.3"
}
}
當然可以不用替換，也可以在后面加上那句話也行，代碼如下：
{
"name": "run-react-test",
"version": "1.0.0",
"description": "cllgeek",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.5.3",
"react-dom": "^15.5.3"
}
}
第六步、index.html
設置 div id = “app” 為我們應用的根元素，并引入 index.js 腳本文件，這里注意了，這里引入的index.js是我們壓縮打包之后的文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Hello World</title>
</head>
<body>
<div id = "app"></div>
<script type="text/javascript" src = "index.js"></script>
</body>
</html>
第七步、main.jsx
這是第一個 react 組件,這個組件將輸出 Hello World!!!。
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component{
render(){
return (
<div>
Hello,World!
</div>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('app')
)
注意：
如果想要組件可以在任何的應用中使用，需要在創(chuàng)建后使用 export 將其導出，在使用組件的文件使用 import將其導入。
第八步、運行服務
完成以上配置后，我們即可運行該服務：
$ webpack
第九步、最終的渲染結(jié)果
那么先看一下，webpack打包之后的文件的結(jié)構(gòu)如下：
運行
$ webpack這個服務之后，就會打包生成一個index.js文件那么簡單的看一下，index.js的文件如下：
最后的最后看一下重點，Hello World還沒有看到渲染之后的效果，看一下渲染之后的渲染效果
2. 結(jié)束語
我知道，我這寫的這些東西對于一些大牛來說，這都是so easy,最后我希望我寫的文章能夠?qū)δ阌兴鶐椭?，歡迎轉(zhuǎn)發(fā)，點贊，分享?。?！
