React 界面样式设计
然而在React 框架下，我们不好继续使用CSS来设计界面，这是由 React的设计思想所决定的。React的核新思想是，让每一个控件 成为高度可重用的独立个体，这就要求控件的界面设计逻辑和它的 功能逻辑必须整合到一起，
在原有逻辑下，控件的功能逻辑由js编写，控件的呈现界面由css负责，两者是分离的。那么React 是怎么把他们结合在一起，同时， 又能保证逻辑上的耦合度尽量降低的呢。其实React 并不拒绝使用CSS来设计界面，先从我们熟悉 的css开始，慢慢过渡到React 的界面设计方式上来。
首先在目录下新建一个空白文件叫style.html,然后我们先完成程序的基本框架代码
1，先使用css来设计界面元素
Styling in React
接下来我们先在界面上显示一些信息：
在代码中，我们先创建一个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 (
{this.props.children}
);
}
});接下来我们看看，如何 以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 (
{this.props.children}
);
}
});把原来的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 (
{this.props.children}
);
}
});
var destination = document.querySelector("#container");
ReactDOM.render(
T
Y
L
E
R
,
destination
);结论：
传统的开发方法是把业务逻辑，界面设计分别分布在html, js, 和css中，这种做法在开发简单网页应用时是可以的。但当我们 需要开发复杂的可重用组件时，原有方法就不适合了，因为原来 的做法把业务逻辑和界面设计分隔开，而组件化设计需要把所有 相关逻辑都得整合在一起。
当今趋势是，网页应用越来越复杂，功能也越来越强大，依赖 React的设计开发方法将是未来网页应用开发的主流。原有业务 逻辑与界面设计逻辑相互分开的做法，与当下网页应用越来越 复杂，功能也越来越强大的趋势，应当是不相符合的。