Devahoy - React คืออะไร ? + เริ่มต้นเขียน React

ช่วง 2-3 วันนี้ได้มีโอกาสได้ลองเล่น React.js ดู หลังจากได้ยินมานานแล้ว แต่ไม่มีโอกาสได้ลองเล่น เนื่องจากก่อนหน้านี้ แว๊บๆไปเปิด Get Started ดูแล้วพบว่าโค๊ดมันรกจัง HTML ผสมกับ JavaScript มั่วไปหมดเลย :) วันนี้ก็เลยได้โอกาสทดลองเล่น และใช้งานดู ซึ่งคาดว่าอนาคตอาจจะหยิบตัวนี้มาใช้งาน Production จริงๆก็ได้ เลยศึกษาไว้ก่อน ไม่เสียหาย

เนื่องจากว่าบทความนี้เขียนมา 2-3 ปีแล้ว เนื้อหาค่อนข้างเก่า อ่านบทความใหม่ ได้ที่่นี่ครับ มาเริ่มต้นเขียน React ด้วย Create React App กันดีกว่า

ซึ่งบทความ React ที่มีคนเขียนบล็อกไว้และน่าสนใจหลายๆที่ครับ แนะนำลองไล่อ่านกันดู

React คืออะไร ?

ไม่รอช้า รีบเข้าไปหน้าเว็บไซต์ของ React จากนั้นดูว่า React มันคืออะไร ? และทำอะไรได้บ้าง ? (Document นั้นทำออกมาค่อนข้างดี และมีอัพเดทไปมากเมื่อเทียบกับครั้งแรกที่เคยเข้า)

React เป็น JavaScript Library ที่ถูกสร้างโดย Facebook (เวอร์ชั่น ณ เวลาที่เขียนคือ 0.14.3)
React เป็นแค่ UI โดยสร้างมาจากพื้นฐานแนวความคิดแบบ MVC(Model View Controller) ซึ่งหมายถึงว่า React มีหน้าที่จัดการกับ Model หรือ View แต่สว่นใหญ่จะเป็น View
รองรับการเขียนด้วย JSX (JavaScript syntax extension)

จากนั้นเมื่อดูในส่วนของ [Get Started] จะเห็นว่ามีโค๊ดตัวอย่าง ที่เขียนด้วย JSX และแบบไม่ใช้ JSX

ซึ่งวิธีการเริ่มต้นเขียน React นั้นทำได้หลายวิธีคือ

ติดตั้งผ่าน cdn หรือดาวน์โหลดไฟล์ js
ติดตั้งผ่าน npm (พวก browserify หรือ webpack)
ทดลองเขียนผ่าน JSFiddle

เริ่มต้นเขียน React.js

วิธีที่เริ่มเขียน React แบบเร็วที่สุด ก็คือการใช้ cdn เริ่มแรก สร้างไฟล์ index.html ขึ้นมาก่อน จากนั้นเพิ่ม react ลงไป ดังนี้

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Getting started with React</title>
  </head>
  <body>
    <!-- The core React library -->
    <script src="https://fb.me/react-0.14.3.js"></script>
    <!-- The ReactDOM Library -->
    <script src="https://fb.me/react-dom-0.14.3.js"></script>

    <div id="main"></div>
  </body>
</html>

ต่อมา เพิ่มโค๊ดด้านล่างนี้ ต่อจาก <div id="main"></div>

<script>
var HelloMessage = React.createClass({
  render: function() {
    // return <h1>Hello World! This is {this.props.name}</h1>;
    return React.createElement("h1", null, "Hello World!, This is ", this.props.name);
  }
});

ReactDOM.render(
  React.createElement(HelloMessage, {name: "Chuck Norris"}),
  document.getElementById('main')
);
</script>

ไฟล์ index.html ที่ได้จะเป็นแบบนี้

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Getting started with React</title>
  </head>
  <body>
    <!-- The core React library -->
    <script src="https://fb.me/react-0.14.3.js"></script>
    <!-- The ReactDOM Library -->
    <script src="https://fb.me/react-dom-0.14.3.js"></script>

    <div id="main"></div>

    <script>
      var HelloMessage = React.createClass({
        render: function () {
          // return <h1>Hello World! This is {this.props.name}</h1>;
          return React.createElement('h1', null, 'Hello World!, This is ', this.props.name);
        }
      });

      ReactDOM.render(
        React.createElement(HelloMessage, { name: 'Chuck Norris' }),
        document.getElementById('main')
      );
    </script>
  </body>
</html>

เมื่อเปิดหน้าเว็บ จะแสดงผลว่า Hello World! This is Chuck Norris

ฮธิบายเพิ่มเติม

React.createClass() จะป็นการสร้าง React Component ขึ้นมา โดยใช้ฟังค์ชัน render()
ReactDOM.render() เป็นการ render Component ที่เราสร้างจาก react ใน element ที่มี id ชื่อ main

หรือถ้าหากเราไม่ใช้ React Component เราสามารถสั่งให้ ReactDOM render tag/element ที่เราต้องการได้ เช่น

ReactDOM.render(React.createElement('h1', null, 'Hello World'), document.getElementById('main'));

ด้านบนเป็นการเขียนโค๊ดแบบไม่ใช้ JSX ต่อมาเปลี่ยนมาเขียนแบบ JSX กันบ้าง เริ่มแรก ก็ต้องเพิ่ม babel-core ลงไปก่อน ซึ่ง feature ของ babel รวม JSX Transform อยู่ด้วย

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>

เมื่อนำโค๊ดเก่าด้านบน มาเขียนใหม่ด้วยโค๊ดที่เขียนด้วย JSX จะเป็นแบบนี้

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Getting started with React</title>
  </head>
  <body>
    <!-- The core React library -->
    <script src="https://fb.me/react-0.14.3.js"></script>
    <!-- The ReactDOM Library -->
    <script src="https://fb.me/react-dom-0.14.3.js"></script>

    <!-- JSX Transform via babel-core -->
    <script src="
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>

    <div id="main"></div>

    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function () {
          return <h1>Hello World! This is {this.props.name}</h1>;
        }
      });

      ReactDOM.render(<HelloMessage name="Chuck Norris" />, document.getElementById('main'));
    </script>
  </body>
</html>

เขียน React ด้วย webpack

ต่อมาหลังจากได้ลอง React แบบด้านบนไปแล้ว ตอนนี้จะเป็นการเขียน React ผ่าน webpack กันนะครับ

สำหรับใครที่ยังไม่รู้จัก Webpack อ่านเพิ่มเติมได้ที่นี่ Webpack คืออะไร ? + สอนวิธีใช้ร่วมกับ React และควรรู้ Node.js และ npm ด้วยนะครับ อ่านเพิ่มเติมได้ที่ Node.js คืออะไร ? + เริ่มต้นใช้งาน Node.js

เริ่มแรก ทำการสร้างโปรเจ็คขึ้นมาก่อน ผมสร้างผ่าน npm init จากนั้นจะได้ไฟล์ package.json มา ต่อมาลง webpack และ react


npm install webpack -g
npm install webpack-dev-server react react-dom --save

จากนั้นสร้างไฟล์ index.hml ขึ้นมา โดยจะเห็นว่าลิงค์ไฟล์สคริปส์ไปที่ bundle.js ซึ่งตัวนี้จะเป็นไฟล์ที่เราได้จาก webpack

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Getting started with React</title>
  </head>
  <body>
    <div id="main"></div>
    <script src="bundle.js"></script>
  </body>
</html>

ต่อมาสร้างไฟล์ webpack.config.js ขึ้นมา ก็อปปี้โค๊ดนี้ลงไป

module.exports = {
  entry: './main.js',
  output: {
    path: './',
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    port: 5555
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

entry: คือไฟล์ต้นทาง คือ main.js
output: คือ path และชื่อไฟล์หลังรวมไฟล์แล้ว ชื่อ bundle.js
devServer : เป็นการกำหนด webpack-dev-server
loaders : จะใช้ es2015 และ react

จากนั้นทำการติดตั้ง dependencies ต่อไปนี้

npm install babel-core babel-loader babel-preset-react babel-preset-es2015 --save-dev

จากนั้นทำการสร้างไฟล์ main.js ดังนี้

var React = require('react');
var ReactDOM = require('react-dom');

var App = React.createClass({
  getInitialState: function () {
    return {
      text: 'Chuck Norris'
    };
  },

  updateText: function (event) {
    this.setState({
      text: event.target.value
    });
  },

  render: function () {
    return (
      <div>
        <h1>{this.state.text}</h1>
        <input type="text" onChange={this.updateText} />
      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById('main'));

getInititalState() : เอาไว้กำหนดค่าเริ่มต้นให้กับ state ถูก invoke ก่อนสร้าง Component
render() : required method
updateText() : เอาไว้สำหรับ set ค่าให้ state

จากตัวอย่างด้านบน ผมทำการแสดงค่าจาก input เมื่อผู้ใช้พิมพ์ค่าใดๆ ลงใน input text ก็จะแสดงข้อความออกมา เหมือนการทำ 2-Way Binding

ลองสั่งรันด้วยคำสั่ง

webpack-dev-server

จากนั้นเปิดบราวเซอร์ http://localhost:5555/ และลองเล่นดูครับ

ซึ่งจากโค๊ดด้านบน เรายังไม่ได้เขียน JavaScript ES6 เลย แต่จะเห็นว่าใส่ babel-preset-es2015 มาทำไม ?

เขียน React ด้วย ES6

ฉะนั้นเลยขอเปลี่ยนโค๊ดด้านบน เป็นเวอร์ชั่นของ ES6 ก็จะได้ดังนี้

// ES5
var React = require('react');
var ReactDOM = require('react-dom');

เป็น

// ES6
import React from 'react';
import ReactDOM from 'react-dom';

เปลี่ยน

// ES5
var App = React.createClass({
  render: function () {
    // return
  }
});

เป็น

// ES6
class App extends React.Component {
  render() {
    // return
  }
}

เปลี่ยน

// ES5
getInitialState: function() {
    return {
        text: 'Chuck Norris'
    }
}

เป็น

// ES6
constructor() {
    super();
    this.state = {
        text: 'Chuck Norris'
    }
}

เปลี่ยน

// ES5
onChange={this.updateText}

เป็น

// ES6
onChange={this.updateText.bind(this)}

สุดท้าย จะได้ไฟล์เป็นแบบนี้

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      text: 'Chuck Norris'
    };
  }

  updateText(event) {
    this.setState({
      text: event.target.value
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.text}</h1>
        <input type="text" onChange={this.updateText.bind(this)} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('main'));

จบแล้ว สำหรับการลองเล่น React เบื้องต้น ซึ่งหลังจากลองเล่น React แล้วพบว่าแนวทางการเขียนน่าจะเป็นไปในแนวการสร้าง Component ย่อยๆ แล้วก็เอามาประกอบร่างกัน นั่นเอง รวมถึงพวก Flux หรือ Isomorphic ก็ยังไม่รู้ ซึ่งขอตัวไปศึกษาเพิ่มเติมก่อนนะครับ สำหรับบทความนี้ก็ขอจบเพียบเท่านั้น และสุดท้าย Source Code ของบทความนี้

Source Code