使用Webpack的話，項(xiàng)目的整體結(jié)果是這樣的：

-webapp
  |--public         // webpack 編譯打包后的js文件所在目錄
       |--css       // css文件所在的目錄
  |--src            // 使用React編寫的代碼所在目錄
  |--index.html     // HTML頁(yè)面

如果你使用網(wǎng)頁(yè)內(nèi)部加載React的話，那么就直接在public目錄下創(chuàng)建一個(gè)bundle.js文件，并在index.html引用即可。

我們就以一個(gè)用戶登錄的界面喂例子。登錄，用戶需呀輸入用戶名、密碼，然后點(diǎn)擊登錄按鈕。

我們來看看要實(shí)現(xiàn)這個(gè)功能React代碼應(yīng)該什么樣的。

import React from "react";
import {render} from "react-dom";

import LabeledInputText from "./LabeledInputText";
import SubmitButton from "./SubmitButton";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {un: "", pwd: ""};
        this.handleLogin = this.handleLogin.bind(this);
        this.handleUserNameChanged = this.handleUserNameChanged.bind(this);
        this.handlePasswordChanged = this.handlePasswordChanged.bind(this);
    }

    handleUserNameChanged(un) {
        this.setState({un: un});
    }

    handlePasswordChanged(pwd) {
        this.setState({pwd: pwd});
    }

    handleLogin() {
        // $.ajax({
        //     url: this.props.url,
        //     dataType: "json",
        //     method: "POST",
        //     data: this.state,
        //     cache: false,
        //     success: function(data) {
        //         this.setState({data: data});
        //     }.bind(this),
        //     error: function(xhr, status, err) {
        //         console.error(this.props.url, status, err.toString());
        //     }.bind(this)
        // });

        alert(`${this.state.un}, ${this.state.pwd}`);
    }

    render() {
        var divStyle = {
            color: "blue",
            wdith: "150px",
            paddingTop: "10px",
            display: "inline-block"
        };
        return (
            

                
 Yo, React 
                
                

                
            
        );
    }
}

render(, document.getElementById("content"));

// LabeledInputText
import React from "react";

export default class LabeledInputText extends React.Component {
    constructor(props) {
        super(props);
        this.handleTextChange = this.handleTextChange.bind(this);
    }

    handleTextChange(e) {
        if (this.props.labelText.toLowerCase() == "username") {
            this.props.onUserNameChanged(e.target.value);
        } else {
            this.props.onPasswordChanged(e.target.value);
        }
    }

    render() {
        return (
            

                {`${this.props.labelText} :`}
                
            
        );
    }
}

// SubmitButton
import React from "react";

export default class SubmitButton extends React.Component {
    constructor(props) {
        super(props);
        // this.state = {value: ""};

        // bind event handler
        this.handleLogin = this.handleLogin.bind(this);
    }

    handleLogin(e) {
        // this.setState({value: e.target.value});
        // alert("hello react");
        this.props.onLogin()
    }

    render() {
        return (
            
        );
    }
}

App類是這個(gè)登錄界面的整體。里面的HTML元素可以分為兩類，一個(gè)是label和label后面的輸入框，另一類是提交按鈕。

LabeledInputText是label和輸入框的組合。SubmitButton是提交按鈕。

生成出來的HTML頁(yè)面是這樣的：

    
    
  
  
    

        
 Yo, React 
        

            

                Username :
                
            
            

                Password :
                
            
            
        
    
  

在添加樣式之后，效果是這樣的：

在React組件上使用CSS樣式比你想的還要簡(jiǎn)單。因?yàn)樽罱KReact還是把組件都轉(zhuǎn)化成了HTML元素，而你會(huì)的各種CSS技巧一樣都可以作用在這些元素上。但是還是有一些小小的地方需要注意：

在使用CSS之前，你需要知道React生成的HTML元素是什么樣子的?？雌饋砗苋菀桌斫?，因?yàn)镴SX語法和HTML元素非常接近。

import React from "react";
import {render} from "react-dom";

import LabeledInputText from "./LabeledInputText";
import SubmitButton from "./SubmitButton";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {un: "", pwd: ""};
    }

    render() {
        var divStyle = {
            color: "blue",
            wdith: "150px",
            paddingTop: "10px",
            display: "inline-block"
        };
        return (
            // 

            

                {/*
 Yo, React 
*/}
                
                

                
            
        );
    }
}

render(, document.getElementById("content"));

在render方法里的就是整體的React組件的結(jié)構(gòu)。所有的東西都在一個(gè)div里面。LabeledInputText就是一個(gè)文字Label和一個(gè)input的文本輸入框的組合。SubmitButton是一個(gè)可以點(diǎn)擊的按鈕，這里其實(shí)是一個(gè)含有click事件的div。

全部組件生成HTML之后：

    

        

            Username :
        
        

            Password :
        
        

            Click
        
    

里面一些div包含的各種元素，就如前文所說的一樣。另外還有的就是很多的css的class。

首先添加css樣式文件：

input:focus{
    outline: none !important;
    border:1px solid red;
    /*box-shadow: 0 0 10px #719ECE;*/
}
.box-group {
    width:230px;
    border: 1px solid blue;
    padding:5px;
    margin: 10px;
}
.form-control {
    padding:5px;
}

.form-under {
    margin-top:10px;
}
.form-button {
    display:block;
    background-color:red;
    text-align: center;
}

上面就是main.css文件包含的全部的樣式。這些樣式主要是給登錄的整個(gè)界面元素的邊框設(shè)置為藍(lán)色，然后在用戶名、密碼和登錄按鈕之間增加間距，最后給按鈕指定背景色為紅色。

接下來需要在React的組件中使用這些樣式。但是直接使用class是不行的。畢竟JSX和HTML元素是有區(qū)別的。就以登錄按鈕為例：

    {this.props.title}

在React中指定class名稱使用className。React的className最后就會(huì)轉(zhuǎn)化成HTML的class。

這個(gè)登錄按鈕的樣式有一點(diǎn)復(fù)雜：className="form-control form-under form-button"使用了三個(gè)不同的css的selector。這些selector的樣式都會(huì)應(yīng)用到這個(gè)登錄按鈕上。

React推崇的是內(nèi)聯(lián)的方式定義樣式。這樣做的目的就在于讓你的組件更加的容易復(fù)用。和組件相關(guān)的全部?jī)?nèi)容聚合到一起，包括你的組件看起來是什么樣的，是如何工作的。

下面就把之前添加的全部的樣式className都去掉，回到最開始的狀態(tài)。

/* index.js */

    {/*
 Yo, React 
*/}
    
    

    


/*LabeledInputText*/

    {`${this.props.labelText} :`}
    


/*SubmitButton*/

    {this.props.title}

登錄使用的三個(gè)組件的render方法返回的內(nèi)容的className已經(jīng)全部都去掉了。

要往React組件內(nèi)添加一個(gè)自定義的樣式對(duì)象，這個(gè)對(duì)象包含的就是css樣式的名稱和樣式的值。只不過樣式的名稱不是css的background-color而是JSX的backgroundColor。例如：

let divStyle = {
    width:"230px",
    border: "1px solid blue",
    padding:"5px",
    margin: "10px"
};

return (
    

        {/*
 Yo, React 
*/}
        
        

        
    
);

小貼士

在React里注釋不能用HTML的方式，那是木有用的。也不能直接用js的
注釋，那也是不行的。而是用大括號(hào)括起來，之后用/**/來注釋。
看起來是這樣的`{/* 這是一個(gè)注釋 */}`。

divStyle就是我們定義的樣式對(duì)象。要使用這個(gè)樣式，只要在React組件中給style賦值。如：style={divStyle}。

要讓組件的子組件的某些樣式可以自定義很簡(jiǎn)單。只需要使用React組件的props。比如，我現(xiàn)在想要定制不同的用戶名、密碼輸入框的邊框顏色。

    

        {/*
 Yo, React 
*/}
        
        

        
    

之后在LabeledInputText文件中：

styleObj = Object.assign({}, this.pwdStyle, {border: "1px solid " + this.props.bordercolor});

每次需要用到邊框值的時(shí)候都從props里面?。?b>this.props.bordercolor。

HTML的文本輸入框有兩種狀態(tài)，focused和blured。用戶要輸入內(nèi)容的時(shí)候，文本框就在focus的狀態(tài)下。用戶的焦點(diǎn)移開，比如開始輸入密碼的時(shí)候，用戶名的文本框就在blur狀態(tài)下了。

在focus的狀態(tài)下的時(shí)候，顯示指定顏色的邊框，否則不顯示邊框。這個(gè)時(shí)候就要用到React的另一個(gè)重要概念：State。

首先，給input注冊(cè)focus和blur的事件處理方法。

// hanleFocus & handleBlur
handleFocus() {
    this.setState({focused: true});
}

handleBlur() {
    this.setState({focused: false});
}

狀態(tài)都存在state里了。然后在input里指定style：style={this.getInputStyles()}。getInputStyles方法就會(huì)根據(jù)不同的狀態(tài)返回不同的樣式。

    getInputStyles() {
        let styleObj;
        if (this.state.focused == true) {
            styleObj = {outlineStyle: "none"};
        }
        return styleObj;
    }

這個(gè)方法在focus的時(shí)候去除了input默認(rèn)的效果，blur的時(shí)候保持原樣。

隨著React學(xué)習(xí)的深入，你會(huì)發(fā)現(xiàn)React添加樣式的方式和之前的方式大有不同。如果你透過上面的例子收入思考的話你會(huì)發(fā)現(xiàn)，之所以React使用了和以往不同的添加樣式方法是有原因的。HTML、CSS和Javascript這樣的傳統(tǒng)方法在處理網(wǎng)頁(yè)的時(shí)候是非常有用的，但是在處理React組件組成的復(fù)雜的界面的web app的時(shí)候卻顯得力不從心。