轉(zhuǎn)載請(qǐng)注明出處：王亟亟的大牛之路
啰嗦之前先安利，會(huì)漸漸豐富前端的知識(shí)點(diǎn) https://github.com/ddwhan0123/Useful-Open-Source-Android
昨天用webpack把我們的項(xiàng)目跑了起來，沒看的可以看下，比較有條理性：http://blog.csdn.net/ddwhan0123/article/details/55095661
今天我們就要寫react的內(nèi)容了，首先先要用npm來下載相關(guān)需要的依賴庫(kù)
分別是react和react-dom
npm install --save react react-dom
當(dāng)你下完react相關(guān)后就要解決es6和jsx的支持，這部分交由Babel解決
npm install --save-dev babel-cli babel-preset-react
npm install --save-dev babel-cli babel-preset-es2015
因?yàn)橛肳ebpack構(gòu)建項(xiàng)目，所以css 相關(guān)內(nèi)容也可以像加載普通js一樣處理，只需要加入幾個(gè)加載庫(kù)
npm install css-loader style-loader --save-dev
下完之后在配置文件里添加支持就好
var path = require('path');
var config = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
"presets": ["es2015", "react"]
}
}, {
test: /\.css$/,
loader: 'style!css'
}
]
}
};
module.exports = config;
七大姑八大姨都配置好就可以干活了，我們寫個(gè)簡(jiǎn)單的<H1>試試
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="root"></div>
<h1>
hi
</h1>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
</body>
</html>
接下來看下入口js
import React from 'react';
import ReactDOM from 'react-dom';
export default class Hello extends React.Component {
render() {
return (
<H1>hi all</H1>
);
}
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
跑下來就是在頁(yè)面上打了個(gè)hi all這里就不截圖了。
手寫css不難，但是很煩，因?yàn)闀?huì)瞎眼睛，找了找各種封裝的庫(kù)，找了個(gè)靠譜的，推薦給大家
https://github.com/styled-components/styled-components
npm install --save styled-components
下載也是走 npm，下完就好，作者提供了一個(gè)供大家試玩的網(wǎng)站，地址如下：
http://www.webpackbin.com/V1VNoINA-
對(duì)html的那些標(biāo)簽進(jìn)行了封裝，使用它就跟使用默認(rèn)的html一樣，整個(gè)css架構(gòu)都跟著組件走，而不需要你從中調(diào)度。
具體支持哪寫可以看https://github.com/styled-components/styled-components/blob/master/src/utils/domElements.js
大致長(zhǎng)這樣
使用起來也非常簡(jiǎn)單，我們把我們的demo加以修改
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
const Input = styled.input`
font-size: 1.25em;
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;
&:hover {
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
`;
const H1 = styled.h1`
background-color: #a1a
`;
export default class Hello extends React.Component {
render() {
return (
<div>
<Input placeholder="@mxstbr" type="text" />
<H1>hi all</H1>
</div>
);
}
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
改完后長(zhǎng)這樣
使用完全就像使用常規(guī)html標(biāo)簽一樣非常簡(jiǎn)便，加以簡(jiǎn)單的設(shè)置就可以達(dá)到任意你想要的效果
這一篇內(nèi)容比較簡(jiǎn)單，主要是開工前的準(zhǔn)備第二期，但是組織好了好工具才會(huì) 事半功倍吧？
