A JavaScript library for building user interfaces
用於構建用戶界面的 JavaScript 庫。
React 是 facebook 官方所維護的開放原始碼 JavaScript 函式庫，可以降低互動式網頁應用程式開發難度，自動處理各種複雜 UI 組件與資料間的連動關係，改善應用程式執行效能。
使用React這套 JavaScript 函式庫，可以很有效率的開發前端互動式網頁應用，且是許多開源來自世界的社群開發者都在使用，並發展了許多好的 plugins 模組等，所以很多東西都不用自行再造輪子，只要懂得怎麼使用，你可以很快的製造好一台跑車。當然 React 也解決了許多前端開發的痛，讓網頁設計真的可以達到前後端分離，不管你的後端使用的是什麼語言，前端只有 Javascript、CSS、HTML，任何的資料請求都經由 AJAX ，你完全拋離了過去靠著使用者請求 Server，Server 在 render 出網頁的方式，這說明了網頁可以做出互動性高的應用。
本篇將教你如何以最簡單方式，開始你的一第一個 React 網頁，讓初學者能夠快速了解 React 這套 JavaScript 函式庫。
開始使用React
使用React有許多方式，但這邊選擇一般網頁設計較容易了解的方式開始，也就是在你的網頁上加上<script>標籤，加入React致你的網頁。其他還有官方簡單使用的npm Create a New React App方式。
在網頁<body>內加入，為之後react輸出產生的虛擬DOM的地方id="root"。
<div id="root"></div>在網頁</body>前加入React所需要的必要react與react-dom的庫，並加載babel讓我們可以使用jsx語法，與可以解析Javascript ES6以上語法。
<script crossorigin="" src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin="" src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>在寫一段ReactDOM.render出Hello, world!輸出至<div id="root"></div>。(<script> 加入type="text/babel"標籤裡面的語法，才會使用babel去解析`)
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!,
document.getElementById(root)
);
</script>整段完整網頁程式碼長這樣。
<meta charset="UTF-8"></meta>
<meta content="width=device-width," initial-scale="1.0" name="viewport"></meta>
<meta content="ie=edge" http-equiv="X-UA-Compatible"></meta>
<title>React</title>
<div id="root"></div>
<script crossorigin="" src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin="" src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!,
document.getElementById(root)
);
</script>
Demo React Hello World
See the Pen React Demo Hello world by Leon Cheng (@jq153387) on CodePen. ## React使用class元件
元件在React中扮演著重要的角色，他可被重複利用，元件中可有子元件，父元件資料可經由元件屬性參數傳遞至子元件。這邊只簡單的提一下元件的的能做的事情，基本的應用實際操作後會比較能夠了解。
新增一個class命名為App繼承React.Component並render函數返回一個<h1>Hello, world!</h1>，再將ReactDOM.render輸入端改成為<App/>元件。畫面不會有任何變化，但我們已經成功使用元件的方式寫入了<h1>Hello, world!</h1>。
<script type="text/babel">
class App extends React.Component{
render(){
return <h1>Hello, world!;
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script>Demo React Component Hello world
See the Pen React Demo Component Hello world by Leon Cheng (@jq153387) on CodePen. ## React在元件中添加元件
我們可在<App/>原件中加入其他元件，如下<Body/>子元件。再將<App/>內容改變如下，可以看到畫面會呈現出<Body/>元件內<div>Body</div>字樣。
class Body extends React.Component {
render() {
return <div>body</div>;
}
}
class App extends React.Component {
render() {
return (
<div>
</div>
<input type="text"></input>
);
}
}
ReactDOM.render(<app></app>, document.getElementById(root));React Demo Component in Component
See the Pen React Demo Component in Component by Leon Cheng (@jq153387) on CodePen. ## React元件增加狀態
在React中元件都有可儲存自己本身的資料狀態，並也可繼承父層級的狀態props。在App元件內增加狀態state = { content : "body"}，狀態為content內容資料一樣為body。
class App extends React.Component {
state = { content : body}
render() {
return (
<div>
</div>
<input type="text"></input>
);
}
}React元件資料狀態傳遞至子元件
現在將state = { content : "body"}傳送到Body子元件內，Body子元件需要設置constructor(props)使用super(props)做繼承。在使用this.props叫出繼承的狀態資料。如下：
class Body extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div>{this.props.content}</div>;
}
}
class App extends React.Component {
state = { content : body}
render() {
return (
<div>
</div>
<input type="text"></input>
);
}
}
ReactDOM.render(<app></app>, document.getElementById(root));App元件裡也可以使用constructor函數做狀態設定如下。
constructor(props) {
super(props);
this.state = { content : body};
}React Demo Component add State
See the Pen React Demo Component add State by Leon Cheng (@jq153387) on CodePen. ## React改變你的元件狀態
在App元件內增加一個名稱為changeContent()函式，function內帶入參數changeContent(value)，裡面使用了react的改變裝態的函式this.setState()，放入要改變的狀態值content:value。
App元件內<input>標籤新增onChange事件，並使用箭頭函數並返回event.target.value事件，input輸入的資料內容，放入onChange(e)=>this.changeContent(e.target.value)。
class Body extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div>{this.props.content}</div>;
}
}
class App extends React.Component {
state = { content : body}
changeContent(value){
this.setState({
content:value
})
}
render() {
return (
<div>
</div>
<input onchange="{(e)=" type="text"></input>this.changeContent(e.target.value)} />
);
}
}
ReactDOM.render(<app></app>, document.getElementById(root));這時當你輸入<input>時就會驅動onChange，將e.target.value傳入changeContent()，去使用this.setState()，改變this.state.content狀態值。
React Demo Change Component State
See the Pen React Demo Change Component State by Leon Cheng (@jq153387) on CodePen. 希望這樣的簡單流程介紹React，對各位初學有幫助。