Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React.js 入⾨門教學
參參考資料:

https://www.kirupa.com/react/simple_todo_app_react.htm
在寫hello world之前...
重要觀念念
• 元件的世界(你包我、我包你、任意組合)
• Virtual DOM
• JSX 語法糖
• 寫Javascript ES 6的語法
VirtualDOM
JSX
• JSX 產⽣生⼀一個React 元件
複雜⼀一點的 JSX
• ⽤用{ } 代表裡⾯面是js
Babel與ES5, ES6
• 2009年年—2015年年
• ECMAScript 5—ECMAScript 6
• ⽬目前瀏覽器只能懂ES 5
• Babel:負責把ES 6轉成ES 5
Hello world 怎麼寫?
1. 易易理理解,不堪⽤用的寫法
2. 不易易理理解,但是為正常開發環境
建立正常開發環境
1. CDN ⽅方式
2. Browserify + Gulp + Babelify
3. Webpack
⼀一看就懂的 React 開發環境建置與 Webpack 入⾨門教學

http://blog.techbridge....
CDN ⽅方式
• ES5 only
使⽤用Create React App
• ⾃自動hot reload
• 內建上傳 Github Page 的功能
進入點
https://github.com/facebookincubator/create-react-app
要安裝node.js 才有npm能⽤用
建立 React.js 開發環境
• 建立空資料夾
• 打指令(解釋指令npm, -g)
• 還可以部署到 github.io 上
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="root"></di...
寫⼀一個 Todo List app
https://www.kirupa.com/react/simple_todo_app_react.htm
先刻畫⾯面
<div>
<input type="text" />
<button>加入</button>
<TodoItems />
</div>
加入CSS檔
body {
padding: 50px;
background-color: #66CCFF;
font-family: sans-serif;
}
.todoListMain .header input {
padding: ...
刻畫⾯面
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="todoListM...
輸入的⽂文字 1.抓 2.存
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
t...
state(狀狀態)
• 伴隨著元件的資料(可動態改變)
state
state 初始設定
state 取值
state 修改值
按下’加入’按鈕的事件
• <button
onClick={this.handleAdd}>加
入</button>
• 做bind
• 解釋
• 保存⽬目前的資料
• 解釋 key 觀念念
handleAdd() {
var itemArr...
顯⽰示結果
顯⽰示結果是⼀一個元件
記得要 import TodoItems from './TodoItems.js';
解釋props概念念

<XXX A=B C=D />
TodoItems 元件內容
• 解釋map 概念念
• key 概念念
map概念念
• 不改變⽬目前陣列列結構(長度、元素量量)的情況下,將其
中元素做⼀一些處理理或修改後複製⾄至新陣列列。
• ex:
map 概念念
加入美觀⾊色
.todoListMain .theList {
list-style: none;
padding-left: 0;
width: 255px;
}
.todoListMain .theList li {
color: #333...
把你的React.js上傳到
github.io上
1. build(最佳化)
2. 申請Github Page,並啟⽤用
3.上傳
把React.js的專案發佈到Github Page的⽅方法

http://dingding.logdown...
React js入門教學
Upcoming SlideShare
Loading in …5
×

React js入門教學

2,419 views

Published on

透過開發一個簡單的 to do list ,了解 React.js 的觀念

Published in: Education
  • Be the first to comment

React js入門教學

  1. 1. React.js 入⾨門教學 參參考資料:
 https://www.kirupa.com/react/simple_todo_app_react.htm
  2. 2. 在寫hello world之前...
  3. 3. 重要觀念念 • 元件的世界(你包我、我包你、任意組合) • Virtual DOM • JSX 語法糖 • 寫Javascript ES 6的語法
  4. 4. VirtualDOM
  5. 5. JSX • JSX 產⽣生⼀一個React 元件
  6. 6. 複雜⼀一點的 JSX • ⽤用{ } 代表裡⾯面是js
  7. 7. Babel與ES5, ES6 • 2009年年—2015年年 • ECMAScript 5—ECMAScript 6 • ⽬目前瀏覽器只能懂ES 5 • Babel:負責把ES 6轉成ES 5
  8. 8. Hello world 怎麼寫? 1. 易易理理解,不堪⽤用的寫法 2. 不易易理理解,但是為正常開發環境
  9. 9. 建立正常開發環境 1. CDN ⽅方式 2. Browserify + Gulp + Babelify 3. Webpack ⼀一看就懂的 React 開發環境建置與 Webpack 入⾨門教學
 http://blog.techbridge.cc/2016/07/30/react-dev-enviroment-webpack-browserify/
  10. 10. CDN ⽅方式 • ES5 only
  11. 11. 使⽤用Create React App • ⾃自動hot reload • 內建上傳 Github Page 的功能
  12. 12. 進入點 https://github.com/facebookincubator/create-react-app
  13. 13. 要安裝node.js 才有npm能⽤用
  14. 14. 建立 React.js 開發環境 • 建立空資料夾 • 打指令(解釋指令npm, -g) • 還可以部署到 github.io 上
  15. 15. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>React App</title> </head> <body> <div id="root"></div> </body> </html> import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello world</h1>, document.getElementById('root') );
  16. 16. 寫⼀一個 Todo List app https://www.kirupa.com/react/simple_todo_app_react.htm
  17. 17. 先刻畫⾯面 <div> <input type="text" /> <button>加入</button> <TodoItems /> </div>
  18. 18. 加入CSS檔 body { padding: 50px; background-color: #66CCFF; font-family: sans-serif; } .todoListMain .header input { padding: 10px; font-size: 16px; border: 2px solid #FFF; } .todoListMain .header button { padding: 10px; font-size: 16px; margin: 10px; background-color: #0066FF; color: #FFF; border: 2px solid #0066FF; } .todoListMain .header button:hover { background-color: #003399; border: 2px solid #003399; cursor: pointer; }
  19. 19. 刻畫⾯面 import React, { Component } from 'react'; class App extends Component { render() { return ( <div className="todoListMain"> <div className="header"> <input type="text" /> <button>加入</button> </div> </div> ); } } export default App;
  20. 20. 輸入的⽂文字 1.抓 2.存 import React, { Component } from 'react'; class App extends Component { constructor(props){ super(props); this.state = { text : "", item: [] } this.handleChange = this.handleChange.bind(this); } handleChange(event){ console.log(event.target.value); this.setState({text: event.target.value}); } render() { return ( <div className="todoListMain"> <div className="header"> <input type="text" value={this.state.text} onChange={this.handleChange} /> <button>加入</button> </div> </div> ); } 解釋 
 onChange、bind state
  21. 21. state(狀狀態) • 伴隨著元件的資料(可動態改變)
  22. 22. state state 初始設定 state 取值 state 修改值
  23. 23. 按下’加入’按鈕的事件 • <button onClick={this.handleAdd}>加 入</button> • 做bind • 解釋 • 保存⽬目前的資料 • 解釋 key 觀念念 handleAdd() { var itemArray = this.state.items; itemArray.push( { text: this.state.text, key: Date.now() } ); this.setState({ items: itemArray }); this.setState({text : ""}); console.log(this.state.items); }
  24. 24. 顯⽰示結果
  25. 25. 顯⽰示結果是⼀一個元件 記得要 import TodoItems from './TodoItems.js'; 解釋props概念念
 <XXX A=B C=D />
  26. 26. TodoItems 元件內容 • 解釋map 概念念 • key 概念念
  27. 27. map概念念 • 不改變⽬目前陣列列結構(長度、元素量量)的情況下,將其 中元素做⼀一些處理理或修改後複製⾄至新陣列列。 • ex:
  28. 28. map 概念念
  29. 29. 加入美觀⾊色 .todoListMain .theList { list-style: none; padding-left: 0; width: 255px; } .todoListMain .theList li { color: #333; background-color: rgba(255,255,255,.5); padding: 15px; margin-bottom: 15px; border-radius: 5px; }
  30. 30. 把你的React.js上傳到 github.io上 1. build(最佳化) 2. 申請Github Page,並啟⽤用 3.上傳 把React.js的專案發佈到Github Page的⽅方法
 http://dingding.logdown.com/posts/1110773-method-of- reactjs-publishes-the-project-to-github-page

×