Use ES6+ Features

ใช้ฟีเจอร์ ES6 และเวอร์ชันที่ใหม่กว่าเพื่อทำให้โค้ดสะอาดและมีประสิทธิภาพมากขึ้น

Arrow Functions

ฟังก์ชันลูกศรช่วยให้โค้ดสะอาดและสั้นลง รวมถึงการไม่ใช้ this แบบดั้งเดิม

const add = (a, b) => a + b;

const MyComponent = () => <div>Hello World</div>;

Destructuring

การทำลายค่าจากอ็อบเจ็กต์หรืออาร์เรย์เป็นค่าที่แยกจากกันช่วยให้โค้ดอ่านง่ายขึ้น

const user = { name: 'Alice', age: 25 };
const { name, age } = user;

const UserProfile = ({ user }) => {
  const { name, age } = user;
  return <div>{name} is {age} years old.</div>;
};

Template Literals

ใช้ backticks (`) เพื่อสร้างสตริงที่มีหลายบรรทัดและใช้การแทรกค่าตัวแปร

const name = 'Alice';
const greeting = `Hello, ${name}!`;

const Greeting = () => <div>{greeting}</div>;

Spread and Rest Operators

ใช้ ... เพื่อทำสำเนาของอ็อบเจ็กต์หรืออาร์เรย์และรวบรวมค่าเข้าด้วยกัน

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

const user = { name: 'Alice', age: 25 };
const updatedUser = { ...user, age: 26 };

const UserProfile = (props) => {
  const { name, age } = props;
  return <div>{name} is {age} years old.</div>;
};

Asynchronous JavaScript

การจัดการการทำงานที่ไม่เป็นเชิงเส้น เช่น การดึงข้อมูลจาก API ใช้ async/await และ fetch

Fetch API

ใช้ fetch สำหรับดึงข้อมูลจาก API

import React, { useEffect, useState } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []);

  return <div>{data ? `Data: ${data}` : 'Loading...'}</div>;
};

export default DataFetcher;

Async/Await

ใช้ async/await เพื่อจัดการกับคำสั่งที่ไม่เป็นเชิงเส้นได้ง่ายขึ้น

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

Array Methods

ใช้เมธอดต่าง ๆ ของอาร์เรย์ เช่น map, filter, reduce เพื่อจัดการข้อมูลใน React

Map

ใช้ map เพื่อเรนเดอร์รายการจากอาร์เรย์

const items = ['Apple', 'Banana', 'Cherry'];

const ItemList = () => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

export default ItemList;

Filter

ใช้ filter เพื่อเลือกข้อมูลที่ตรงตามเงื่อนไข

const items = [
  { id: 1, name: 'Apple', available: true },
  { id: 2, name: 'Banana', available: false },
  { id: 3, name: 'Cherry', available: true }
];

const AvailableItems = () => (
  <ul>
    {items.filter(item => item.available).map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

export default AvailableItems;

Reduce

ใช้ reduce เพื่อคำนวณค่าต่าง ๆ จากอาร์เรย์

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((total, num) => total + num, 0);

const SumDisplay = () => <div>Total Sum: {sum}</div>;

export default SumDisplay;