方式一(快速入手)
1.創(chuàng)建文件夾hello_react
創(chuàng)建項目文件夾后將我們之前下載的react build的文件夾考入到hello_react目錄中
2.項目導(dǎo)入
打開atom,點擊file--->open--->選擇創(chuàng)建的項目文件夾,再將browser.min.js復(fù)制到項目的build文件夾中:
圖片.png
3.編寫Hello React
創(chuàng)建hello.html編寫react代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 導(dǎo)入react.js是react的核心庫 -->
<script src="./build/react.js" charset="utf-8"></script>
<!-- 導(dǎo)入react-dom.js -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- 導(dǎo)入browser.min.js 將JSX語法裝換為js語法-->
<script src="./build/browser.min.js" charset="utf-8"></script>
</head>
<body>
<!-- react渲染的模板會插入到這個節(jié)點中 -->
<div id="examp">
</div>
</body>
<!-- 在使用jsx的時候要使用babel,babel是一個編譯轉(zhuǎn)換器,將es6轉(zhuǎn)換為瀏覽器可運(yùn)行的東西 -->
<script type="text/babel">
/*
ReactDOM.render()
react最基本的方法,將模板轉(zhuǎn)換成html語言,渲染dom并插入到指定的dom中
三個參數(shù):
參數(shù)一:模板的渲染內(nèi)容html形式
參數(shù)二:這段模板需要插入的dom節(jié)點
參數(shù)三:渲染后的回調(diào),一般不用
*/
ReactDOM.render(
<h1>Hello, react!</h1>,
document.getElementById('examp')
);
</script>
</html>
4.運(yùn)行
由于之前安裝了插件,所以這里右鍵點擊open in browser就會看到我們的入門程序
圖片.png
方式二(npm方式)
創(chuàng)建一個空的文件夾hello
圖片.png
進(jìn)入的創(chuàng)建的文件夾目錄
shizhengyangdeMacBook-Pro:~ panyuanyuan$ cd java/react-native/react_more/hello/
shizhengyangdeMacBook-Pro:hello panyuanyuan$
初始化項目:輸入npm init,只需要在相應(yīng)的標(biāo)紅的地方輸入
圖片.png
初始化完成之后項目結(jié)構(gòu)---多了package.json這個是我們依賴掛歷的配置
圖片.png
打開react官網(wǎng),點擊docs http://reactjs.cn/react/docs/getting-started-zh-CN.html ,我們還需要安裝react和react-dom
圖片.png
進(jìn)入項目路徑,輸入:這里需要加sudo,可能會出現(xiàn)權(quán)限問題
sudo npm install --save react react-dom babelify babel-preset-react
安裝完成
圖片.png
官方還提示了:
圖片.png
安裝es6轉(zhuǎn)換成es5,輸入:
shizhengyangdeMacBook-Pro:hello panyuanyuan$ sudo npm install babel-preset-es2015 --save
安裝完成
圖片.png
注意:--save是將安裝的包配置到之前的package.json中
此時我們的package.json文件
圖片.png
安裝webpack
在項目目錄中重新創(chuàng)建目錄和index.js文件
圖片.png
index.js文件內(nèi)容:
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById("example")
);
在項目根目錄下創(chuàng)建webpack.config.js(名字不能變),其內(nèi)容:
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: __dirname + '/src',
entry: './js/index.js',
module: {
loaders: [{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}]
},
output: {
path: __dirname + "/src/",
filename: "bundle.js"
}
};
安裝webpack相關(guān)的包:
1.全局安裝webpack:
sudo npm install -g webpack
2.全局安裝webpack-dev-server
sudo npm install -g webpack-dev-server
3.項目安裝webpack,進(jìn)入項目安裝
sudo npm install webpack --save
4.項目安裝webpack-dev-server
sudo npm install webpack-dev-server --save
5.安裝babel-loader(一定要寫sudo)
sudo npm install babel-loader --save
都安裝完成后輸入webpack打包
shizhengyangdeMacBook-Pro:hello panyuanyuan$ webpack
看到如下界面證明成功:
圖片.png
由上面知道,產(chǎn)生一個bundle.js的文件,接下來編寫index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="example">
</div>
<script src="./src/bundle.js" charset="utf-8"></script>
</body>
</html>
項目目錄結(jié)構(gòu):
圖片.png
運(yùn)行測試:打開index.html
圖片.png
