Viết React Code sạch hơn như thế nào? (Phần 1)

Tác giả: Reed Barger

Là một React developer, bất cứ ai đều muốn có thể viết ra những code sạch hơn, đơn giản và dễ đọc nhất có thể. Bài viết dưới đây sẽ cung cấp cho các React devs những cách hiệu quả nhất để clean code.

1. Sử dụng JSX shorthands

Làm cách nào để bạn chuyển một giá trị true cho một giá trị đã cho? Trong ví dụ bên dưới đang sử dụng showTitle để hiển thị tiêu đề ứng dụng trong thành phần Navbar.

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar showTitle={true} />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>My Special App</h1>}
    </div>
  )
}

Chúng ta có cần đặt thành showTitle Boolean một cách rõ ràng true không? Không! Một cách viết nhanh cần nhớ là bất kỳ phần mềm hỗ trợ nào được cung cấp trên một thành phần đều có giá trị mặc định là true.

Vì vậy, nếu thêm phần hỗ trợ showTitle trên Navbar, phần tử tiêu đề sẽ được hiển thị:

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar showTitle />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>My Special App</h1>} // title shown!
    </div>
  )
}

Một cách viết tắt hữu ích khác cần ghi nhớ liên quan đến việc chuyển các chuỗi props. Khi truyền một giá trị prop là một chuỗi, bạn không cần phải đặt nó trong dấu ngoặc nhọn. Nếu đang đặt tiêu đề cho Navbar của mình, với title prop, chúng ta chỉ có thể đưa giá trị của nó vào dấu ngoặc kép:

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

2. Di chuyển những code không liên quan vào một file chung

Cách dễ nhất và quan trọng nhất để viết code React sạch hơn là làm tốt việc trừu tượng hóa code thành các thành phần React riêng biệt. Ứng dụng đang hiển thị một thành phần Navbar. Chúng ta đang lặp lại một loạt các bài đăng có .map() và hiển thị tiêu đề của chúng trên trang.

// src/App.js

export default function App() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <main>
      <Navbar title="My Special App" />
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            {post.title}
          </li>
        ))}
      </ul>
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

Làm thế nào để có thể viết những code này sạch hơn? Tại sao không tóm tắt những đoạn code đang lặp lại – các bài đăng – và hiển thị chúng trong một thành phần riêng biệt, được gọi là FeaturedPosts.

// src/App.js

export default function App() {
 return (
    <main>
      <Navbar title="My Special App" />
      <FeaturedPosts />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

3. Tạo các file riêng biệt cho từng thành phần

Tương tự như cách trừu tượng hóa code thành các phần riêng biệt để làm cho ứng dụng dễ đọc hơn, để làm cho các file ứng dụng dễ đọc hơn, chúng ta có thể đặt từng thành phần vào mỗi file riêng biệt. Điều này có nghĩa là mỗi file chỉ chịu trách nhiệm cho một thành phần và không có sự nhầm lẫn thành phần đến từ đâu nếu chúng ta muốn sử dụng lại nó trên ứng dụng của mình.

// src/App.js
import Navbar from './components/Navbar.js';
import FeaturedPosts from './components/FeaturedPosts.js';

export default function App() {
  return (
    <main>
      <Navbar title="My Special App" />
      <FeaturedPosts />
    </main>
  );
}

// src/components/Navbar.js

export default function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

// src/components/FeaturedPosts.js

export default function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Ngoài ra, bằng cách chia nhỏ thành từng file riêng biệt như thế này sẽ tránh việc khiến một file trở nên quá cồng kềnh.

4. Chuyển chức năng được chia sẻ vào React hooks

Xem xét các component FeaturedPosts, thay vì hiển thị dữ liệu bài đăng tĩnh, nếu bạn muốn tìm nạp dữ liệu bài đăng của mình từ một API. Bạn có thể xem kết quả bên dưới cho điều đó

// src/components/FeaturedPosts.js

import React from 'react';

export default function FeaturedPosts() {
  const [posts, setPosts] = React.useState([]);  	
    
  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Tuy nhiên, điều gì sẽ xảy ra nếu thực hiện yêu cầu này đối với dữ liệu trên nhiều thành phần?

Giả sử ngoài một FeaturedPosts component, bạn muốn tạo một thành phần chỉ có tên là Posts với dữ liệu cũng giống như vậy. Chúng tôi sẽ phải sao chép logic đã sử dụng để tìm nạp dữ liệu của mình và paste vào trong thành phần đó.

Để tránh phải làm điều đó, tại sao chúng ta không sử dụng một React hook mới mà chúng ta có thể gọi useFetchPosts

// src/hooks/useFetchPosts.js

import React from 'react';

export default function useFetchPosts() {
  const [posts, setPosts] = React.useState([]);  	
    
  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return posts;
}

Khi đã tạo hook này trong một file ‘hooks’ chuyên biệt, bạn có thể sử dụng lại nó trong bất kỳ thành phần nào

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Bài viết được phỏng dịch theo bài viết gốc tại freecodecamp.org

Có thể bạn quan tâm:

• Học ReactJS trong 15 phút
• Mental model trong React
• Tự viết hiển thị Helloworld đầu tiên bằng ReactJS

Xem thêm Việc làm Developer hấp dẫn trên TopDev