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有許多方式,但這邊選擇一般網頁設計較容易了解的方式開始,也就是在你的網頁上加上<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 src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></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!</h1>,
document.getElementById("root")
);
</script>
整段完整網頁程式碼長這樣。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>React</title>
</head>
<body>
<div id="root"></div>
<script
src="https://unpkg.com/react@16/umd/react.production.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById("root")
);
</script>
</body>
</html>
元件在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!</h1>;
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script>
我們可在<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>
<Body />
<input type="text" />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
在React中元件都有可儲存自己本身的資料狀態,並也可繼承父層級的狀態props。在App元件內增加狀態state = { content : "body"}
,狀態為content
內容資料一樣為body
。
class App extends React.Component {
state = { content : "body"}
render() {
return (
<div>
<Body/>
<input type="text" />
</div>
);
}
}
現在將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>
<Body content={this.state.content} />
<input type="text" />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
App元件裡也可以使用constructor函數做狀態設定如下。
constructor(props) {
super(props);
this.state = { content : "body"};
}
在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>
<Body content={this.state.content} />
<input type="text" onChange={(e)=>this.changeContent(e.target.value)} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
這時當你輸入<input>
時就會驅動onChange,將e.target.value
傳入changeContent(),去使用this.setState()
,改變this.state.content狀態值。
希望這樣的簡單流程介紹React,對各位初學有幫助。
© UCAMC. All rights reserved.
Powered by CITIAR.