โจทย์ : มีเว็บเดิมอยู่ แต่อยากใช้ react บางส่วน ทำได้ไหม (ที่จริงเป็นโจทย์ที่ผมเจอเองนะครับ)
ถ้าลองเข้าเว็บ https://facebook.github.io/react/ จะเจอข้อความ
แปลได้ว่า React คือ javascript library สำหรับสร้าง user interfaces นั่นเอง ดีไม่ดียังไง อ่าน นี่ดีกว่าครับ
ก่อนเขียน react เราต้องกลับหัวความคิดก่อนนิดหน่อยครับ ปกติจะเขียน javascript แทรกลงใน file HTML หรือ PHP
แต่ในยุคที่ javascript ครองโลก ท่านผู้นำ (javascript) ต้องมาก่อน ดังนั้น เราต้องระลึกเสมอว่า กำลัง เขียน javascript แล้วเอา HTML ยัดใส่ไว้เป็นส่วนหนึ่งของ javascript เท่านั้น
พร้อมแล้ว เอาแบบง่ายสุดนะครับ มาเริ่มกันเลยครับ
1. เพิ่ม script ลงไปในส่วน head ของ html หรือ php ไฟล์
|
1 2 3 4 |
<script src="https://unpkg.com/react@15/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script> |
แต่ละตัวทำอะไรบ้าง
react คือ core react library
react-dom คือ library ที่ช่วยในการ render virtual dom (Document Object Model)
babel คือ library เอาไว้แปลง ES6 -> ES5 ซึ่งมัน support ตัว JSX (JavaScript syntax extension) ด้วย ทำให้สามารถเขียน HTML (ไม่ใช่ html จริงๆ แต่เป็น virtual dom แต่ code เหมือน html 55+) ใน react ได้ง่ายขึ้น
2. เพิ่ม div มา 1 ตัวสำหรับใช้กับ react
ในที่นี้จะใช้ข้อมูล posts Fake Online REST API จากเว็บ https://jsonplaceholder.typicode.com/
|
1 |
<div id="posts"></div> |
3. เขียนส่วน babel script
สังเกตตรง type ค่าจะเป็น text/babel ครับ
หน้าที่ของ babel คือ แปลง code ส่วนนี้ จาก ES6 -> ES5 (ทำไมต้องแปลงก็เพราะ Browser ยังไม่ support ES6 ครับ)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/babel"> class Posts extends React.Component { render() { return <h1>React Fetch Demo</h1> } } ReactDOM.render( <Posts />, document.getElementById("posts") ); </script> |
สร้าง Posts Component สังเกตว่าใช้ extends ได้ แสดงว่า code ส่วนนี้ เป็น ES6 ครับ
จากนั้น ก็สั่ง render ด้วย ReactDOM โดยเอา Posts Component มา binding กับ div posts ที่สร้างไว้
ลอง run จะได้ผลลัพธ์แบบนี้ครับ
4. เพิ่ม state posts , fetch และการอ่านข้อมูล state posts
1.เพิ่ม state posts ใน constructor
2.เพิ่ม การ fetch ข้อมูล RESTfull API จาก https://jsonplaceholder.typicode.com/posts ใน componentDidMount
3.เพิ่มการอ่านข้อมูลจาก state posts
**componentDidMount คืออะไร อ่านเพิ่ม -> react-lifecycle แต่ละอันมีหน้าที่อย่างไร
ก็จะได้ผลลัพธ์แบบนี้ครับ
5. เพิ่ม style
เพิ่ม style=”color:blue” เข้า ไป ผลคือ run แล้วไม่มีอะไร
ไปดู error พบว่า react-dom error
ที่เป็นแบบนี้เพราะ เราไม่ได้กำลังเขียน HTML แบบเดิมๆ อยู่ครับ สิ่งที่เราเขียนใน react component ล้วนเป็น Virtual DOM
เพราะฉะนั้นเวลาเขียน sytle ก็ต้องเขียนแบบ reactๆ ดังนี้ครับ
|
1 2 3 4 5 6 7 8 |
const divStyle = { backgroundColor: '#F0F0F0', pading: '10px', }; const titleStyle = { color: 'blue', }; |
สร้างเสร็จก็เอาไปใช้แบบนี้ครับ
เราก็จะสามารถใส่ style ให้กับ React
code เต็มๆ ครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React Fetch Demo</title> <script src="https://unpkg.com/react@15/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script> <script type="text/babel"> const divStyle = { backgroundColor: '#F0F0F0', pading: '10px', }; const titleStyle = { color: 'blue', }; class Posts extends React.Component { constructor(props, context) { super(props, context); this.state = { posts: [], }; } componentDidMount() { fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then((posts) => this.setState({ posts })) } render() { if(this.state.posts.length === 0 ){ return <div>React Fetch Loading</div> } return ( <div> <h3>React Fetch Posts</h3> <div> { this.state.posts.map((post) => ( <div style={divStyle}> <p style={titleStyle}>{post.id} : {post.title}</p> <p>{post.body}</p> </div> )) } </div> </div> ) } } ReactDOM.render( <Posts />, document.getElementById("posts") ); </script> </head> <body> <div id="posts"></div> </body> </html> |
จบแล้วครับ หวังว่าจะมีประโยชน์นะครับ
ถ้าผมเข้าใจผิดส่วนไหนก็แจ้งมาได้เลยครับ fb