Getting Started with React

2 min readOct 31, 2021

หลังจากเราเรียนรู้เกี่ยวกับ React อย่างคร่าว ๆ ไปแล้วใน blog ก่อน คราวนี้เรามาเริ่มเขียน React กันบ้างดีกว่า โดยในบทความนี้จะใช้ Meteor framework v2.3.5 ในการเขียนนะครับ

เริ่มจากติดตั้ง Meteor กันก่อนโดย run command:

npm install -g meteor

สามารถตรวจสอบว่าเป็น version อะไรได้โดย run command:

meteor --version

ต่อจากนั้นก็สร้าง app ได้เลยโดย run:

meteor create <app name>

หลังจากนั้นก็รอ Meteor สร้าง Folder structure สักครู่.. ซึ่งจะได้หน้าตาประมาณนี้

จากนั้นก็มาดูหน้าตา app ของเราโดย run:

/simple-app$ meteor run

Explanation

Syntax ส่วนใหญ่ที่เห็นจะเป็น JS version ES6 ที่มีการใช้ Arrow Functions ซึ่งเป็นการเขียน function แบบย่อนั่นเอง (short syntax)

Get th.peeranut’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

เริ่มแรกเรามาดูกันก่อนว่า หน้าเว็บที่เราเห็นมาจากไหน ซึ่งพบว่ามาจากไฟล์ imports/ui/App.jsx

import React from 'react';
import { Hello } from './Hello.jsx';
import { Info } from './Info.jsx';export const App = () => (
  <div>
    <h1>Welcome to Meteor!</h1>
    <Hello/>
    <Info/>
  </div>
);

จะเห็นได้ว่ามีการ render ประโยค Welcome to Meteor! แล้วตามด้วย Component ที่ชื่อ Hello กับ Info ซึ่งถูก import มาจากไฟล์ Hello.jsx กับ Info.jsx ตามลำดับ

แล้วเมื่อตามไปดู code ในไฟล์ Hello.jsx จะพบว่ามีการ render button และแสดงจำนวน counter ตามจำนวนครั้งที่กดปุ่มโดยเรียกใช้ฟังก์ชัน useState ที่เป็น hook ในการเก็บข้อมูลและแสดงผลแทนการใช้ class

Why are Hooks better than classes ? here

import React, { useState } from 'react';export const Hello = () => {
  const [counter, setCounter] = useState(0);
  const increment = () => {
    setCounter(counter + 1);
  };
  
  return (
    <div>
      <button onClick={increment}>Click Me</button>
        <p>You've pressed the button {counter} times.</p>
    </div>
  );
};

ส่วนในไฟล์ Info.jsx ก็มีการ render link ต่าง ๆ จาก LinksCollection ที่ถูก import มาจากไฟล์ /api/links ซึ่งสาเหตุที่ใช้ฟังก์ชัน useTracker เป็นเพราะต้องการจะให้ re-render ทุกครั้งที่ข้อมูลใน LinksCollection มีการเปลี่ยนแปลง

import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { LinksCollection } from '../api/links';export const Info = () => {
  const links = useTracker(() => {
    return LinksCollection.find().fetch();
  });  return (
    <div> 
      <h2>Learn Meteor!</h2>
      <ul>{links.map( 
        link => <li key={link._id}>
          <a href={link.url} target="_blank">{link.title}</a>
        </li>
      )}</ul>
    </div>
  );
};

แล้วเมื่อไปค้นหาไฟล์ที่ชื่อ /api/links ก็พบว่าเป็นการสร้างและดึงข้อมูลมาจาก Database MongoDB โดยตั้งชื่อ database ว่า links

import { Mongo } from 'meteor/mongo';
export const LinksCollection = new Mongo.Collection('links');

แต่เดี๋ยวก่อน! โดยปกติการเขียน HTML document มักเริ่มต้นด้วย <head> และ <body> นี่นา !? แล้วไฟล์นั้นมันอยู่ที่ไหนละ..? คำตอบก็คืออยู่ใน client/main.html นั่นเอง

<head>
  <title>simple-app</title>
</head><body>
  <div id="react-target"></div>
</body>

จากนั้นก็ทำการเรียกไฟล์ App.jsx ผ่าน client/main.jsx โดยอ้างอิงถึง document ที่มี id 'react-target' ซึ่งเป็นการเพิ่ม Component App เข้าไปใน <body> ต่อจาก <div> ก่อนหน้า

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { App } from '/imports/ui/App';Meteor.startup(() => {
  render(<App/>, document.getElementById('react-target'));
});