React 介面樣式設計
然而在React 框架下，我們不好繼續使用CSS來設計介面，這是由 React的設計思想所決定的。React的核新思想是，讓每一個控制元件 成為高度可重用的獨立個體，這就要求控制元件的介面設計邏輯和它的 功能邏輯必須整合到一起，
在原有邏輯下，控制元件的功能邏輯由js編寫，控制元件的呈現介面由css負責，兩者是分離的。那麼React 是怎麼把他們結合在一起，同時， 又能保證邏輯上的耦合度儘量降低的呢。其實React 並不拒絕使用CSS來設計介面，先從我們熟悉 的css開始，慢慢過渡到React 的介面設計方式上來。
首先在目錄下新建一個空白檔案叫style.html,然後我們先完成程式的基本框架程式碼
1，先使用css來設計介面元素
<!DOCTYPE html> <html> <head> <title>Styling in React</title> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="browser.min.js"></script> <style type="text/css"> #container { padding: 50px; background-color: #FFF; } </style> <body> <div id="container"></div> </body> </head> </html>
接下來我們先在介面上顯示一些資訊：
<script type="text/babel"> var Letter = React.createClass({ render:function() { return ( <div> {this.props.children} </div> ); } }); var destination = document.querySelector("#container"); ReactDOM.render( <div> <Letter>T</Letter> <Letter>Y</Letter> <Letter>L</Letter> <Letter>E</Letter> <Letter>R</Letter> </div>, destination) </script>
在程式碼中，我們先建立一個Letter元件，在元件中，我們直接使用了它的一個屬性叫children, 在下面的程式碼中，我們使用Letter 元件時，在它的標籤中夾著一個字母，分別是T,Y,L,E,R.夾在元件標籤中的元素，就對應於該元件的孩子，也就是this.props.children.
使⽤css來對我們在介面上顯示的幾個字母進行妝點。
div div div {
padding: 10px;
margin: 10px;
background-color: #ffde00;
display: inline-block;
color: #333;
display: inline-block;
font-family: monospace;
font-size: 32px;
text-align: center;
}可以看到，這種做法，當我們的介面組合間套層次很深時，就很容易出錯了，而且程式碼邏輯很難維護。 一個好的做法是，通過類名來確定選擇子，程式碼如下
.letter {
padding: 10px;
margin: 10px;
background-color: #ffde00;
display: inline-block;
color: #333;
display: inline-block;
font-family: monospace;
font-size: 32px;
text-align: center;
}
var Letter = React.createClass({
render:function() {
return (
<div className="letter">
{this.props.children}
</div>
);
}
});接下來我們看看，如何 以react的方式來修飾介面
按照React的元件化原則，控制元件的 介面邏輯和業務邏輯，需要放在在一起。這樣，原來用css設計元素介面的辦法就不適用了。React 的做法是，把介面的設計邏輯 做成一個物件，放在元件內部，程式碼如下：
var Letter = React.createClass({
render:function() {
var letterStyle = {
padding:10,
margin:10,
backgroundColor:"#ffde00",
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: 32,
textAlign: "center"
};
return (
<div style={letterStyle}>
{this.props.children}
</div>
);
}
});把原來的css程式碼邏輯轉變成了一個json格式的js物件。 在元件的jsx程式碼中，使用style關鍵字，把介面設計邏輯所 形成的物件，引入進來。在元件中設定介面邏輯時，需要注意以下幾點： 1是，在指定數值大小時，可以忽略掉px字尾。例如在指定 padding, margin, fontSize 這些屬性的值時，數值後面無需 新增字尾。也就是原來在css中，需要以px結尾的數值，在React 元件中，px都可以去掉。但其他數值，如果不是以px結尾的，那麼相關字尾仍然需要保留。
接下來，我們讓元件樣式設計更靈活一些，我們看看如何實現元件 背景顏色的引數化。
當前我們字母背景色是寫死成黃色的，如果該背景色能隨時變化， 那感覺就相當酷了。使用元件的屬性機制，我們的程式碼修改如下：
var Letter = React.createClass({
render:function() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor:this.props.bgcolor
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: 32,
textAlign: "center"
};
return (
<div style={letterStyle}>
{this.props.children}
</div>
);
}
});
var destination = document.querySelector("#container");
ReactDOM.render(
<div>
<Letter bgcolor="#58B3FF">T</Letter>
<Letter bgcolor="#FF605F">Y</Letter>
<Letter bgcolor="#FFD52E">L</Letter>
<Letter bgcolor="#49DD8E">E</Letter>
<Letter bgcolor="#AE99FF">R</Letter>
</div>,
destination
);結論：
傳統的開發方法是把業務邏輯，介面設計分別分佈在html, js, 和css中，這種做法在開發簡單網頁應用時是可以的。但當我們 需要開發複雜的可重用元件時，原有方法就不適合了，因為原來 的做法把業務邏輯和介面設計分隔開，而元件化設計需要把所有 相關邏輯都得整合在一起。
當今趨勢是，網頁應用越來越複雜，功能也越來越強大，依賴 React的設計開發方法將是未來網頁應用開發的主流。原有業務 邏輯與介面設計邏輯相互分開的做法，與當下網頁應用越來越 複雜，功能也越來越強大的趨勢，應當是不相符合的。