React如何安裝？ react的安裝步驟介紹（附完整實例）

本篇文章主要的介紹了關於react的安裝步驟，還有關於react的特點和概念的解釋，下面就讓我們一起來看這篇文章吧

#一 React

1. 概念

#React 是一個用來建立使用者介面的 javascript 函式庫。
 React主要用於建構UI，是 MVC 中的 V（視圖）。
 React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
 React 擁有較高的效能，程式碼邏輯非常簡單。

2. 特點

• 高效能 −React透過DOM的模擬，最大限度地減少與DOM的互動。

• 靈活 −React可以與已知的函式庫或框架很好地配合。

• JSX − JSX 是 JavaScript 語法的擴充。 React 開發不一定使用 JSX ，但建議使用它。

• 元件 − 透過 React 建構元件，使得程式碼更容易被重複使用，能夠很好的應用在大專案的開發中。

• 單向回應的資料流 − React 實作了單向回應的資料流，從而減少了重複程式碼，這也是為什麼它比傳統資料綁定更簡單。 (Redux)

3. [安裝] (https://doc.react-china.org/docs/installation.html)

yarn init
yarn add react react-dom react-scripts

package.json

{  "name": "test",  "version": "1.0.0",  "description": "zzz",  "main": "index.js",  "license": "MIT",  "dependencies": {    "react": "^16.2.0",    "react-dom": "^16.2.0",    "react-scripts": "^1.0.17"
  },  "scripts": {    "start": "react-scripts start"
  }
}

4. 元件

1. ES6 class

class Welcome extends React.Component {
    render() {        return (            <h1> Hello, {this.props.name} </h1>
        )
    }
} 
class App extends React.Component {
    render() {
        return (            <p>
                <Welcome name = "zhz1" />
                <Welcome name = "zhz2" />
                <Welcome name = "zhz3" />
            </p>
        )
    }
}

2. 函數式(無狀態元件)

function Welcome(props) {
    return <h1> Hello, {props.name} </h1>}
function App() {
    return (        <p>
            <Welcome name = "zhz1" />
            <Welcome name = "zhz2" />
            <Welcome name = "zhz3" />
        </p>
    )
}

3. ES5-寫入法React.createClass(僅做參考)

React.createClass會自綁定函數方法（不像React.Component只綁定需要關心的函數）導致不必要的效能開銷，增加程式碼過時的可能性。

const Welcome = (props) => {    return <h1> Hello, {this.props.name} </h1>}
const App = React.createClass ({
    render() {
        return (            <p>
                <Welcome name1 = "ss" />
                <Welcome name1 = "zhz2" />
                <Welcome name1 = "zhz3" />
            </p>
        )
    }
});

匯出(提供介面)
export default App

#5. Props 屬性

6. State 狀態

# React 把元件看成是一個狀態機（State Machines）。透過與使用者的交互，實現不同狀態，然後渲染 UI，讓使用者介面和資料保持一致。

React 裡，只要更新元件的state，然後依照新的state 重新渲染使用者介面（不要操作DOM）（想看更多就到PHP中文網React參考手冊專欄中學習）

class Welcome extends React.Component {
    render() {        return (            <h1 onClick={this.props.onClick} > Hello, {this.props.name} </h1>
        )
    }
} 
class App extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: false
        }
    }
    changeText() {
        this.setState((preState, props) => ({
            selected: !preState.selected
        }))
    }
    render() {
        return (            <p> 
                <Welcome name= {this.state.selected ? "zhz3-selected" : "zhz3" } onClick={() => this.changeText()} />                <h1 onClick={() => this.changeText()}> {this.state.selected ? "zhz3-selected" : "zhz3" } </h1>
            </p>
        )
    }
}
export default App;

6. 注意

• class 屬性變成className

• ##tabindex 屬性變成

  tabIndex

• for 屬性變成

  htmlFor

##textarea 的值透過需要透過
• value

  屬性來指定

style 屬性的值接收一個對象，css 的屬性變成
• 駝峰

  寫法，如：backgroundColor。

本篇文章到這就結束了（想看更多就到PHP中文網

React使用手冊

欄位中學習），有問題的可以在下方留言提問。

以上是React如何安裝？ react的安裝步驟介紹（附完整實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！