為什麽學
- 易學，JSX能將HTML與JavaScript混合在一起寫。衹要會HTML與JavaScript，不用學另一種語言。
- 支持複用，能用在移動應用 (React Native)。
- 容易測試。
名詞解釋
- react是一個Javascript函數庫用于建立使用者界面。
- JSX是JavaScript XML。用於描述UI長的樣子。
- Babel是一個JavaScript編譯器，將JSX轉爲JavaScript。
步驟
- 下載安裝Node.js。
- 建立react專案 npx create-react-app react-tutorial。
- 如沒npx指令，下下列指令安裝 npm i npx 3.切換到專案路徑 cd react-tutorial
- 修改react-tutorial\public\index.html檔案
- 啓動伺服器 npm start
index.html程式碼
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <title>Test React</title> | |
| <!-- Load React API --> | |
| <script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script> | |
| <!-- Load React DOM--> | |
| <script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> | |
| <!-- Load Babel Compiler --> | |
| <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| // JSX Babel code goes here | |
| class Welcome extends React.Component { | |
| render() { return(<h1>Hello {this.props.name} {new Date().toLocaleTimeString()}</h1>); } | |
| } | |
| const name = 'John Doe'; | |
| function tick() { | |
| //const element = (<h1>Hello {name}! {new Date().toLocaleTimeString()}</h1>); | |
| //ReactDOM.render(element, document.getElementById('root')); | |
| ReactDOM.render(<Welcome name="John Doe"/>, document.getElementById('root')); | |
| } | |
| setInterval(tick, 1000); | |
| </script> | |
| </body> | |
| </html> |
參考
* What is React?
如果你覺得這篇文章很有用，可以請我喝杯咖啡，讓我提供更多優質文章給您。感謝所有支持的朋友。
Vere Perrot 資訊人.科技人.行銷人，現為軟體分析師。定位自己為網路觀察家，永遠保持好奇心與熱情，學習跨領域新事物，希望最終能成為一個全方位的人。 Mail: vereperrot@gmail.com
沒有留言:
張貼留言