kiến thức React cho người mới bắt đầu: Cách tạo một ứng dụng từ a-z

JordanPham

Senior Member
1. Lời nói đầu

Hello World.
Nhận thấy trong box Lập trình có nhiều anh chị mới bắt đầu ở entry level nên tôi muốn đóng góp một ít công sức để viết ra và chia sẻ.
Hôm nay trong loạt series hướng dẫn, tôi sẽ đề cập về những nền tảng React cho người mới bắt đầu React for beginners - Fundamentals.
Hy vọng sẽ giúp ích cho những anh chị mới, tìm kiếm sự thành công với mức lương $ 1.000 đầu tiên của mình. Nếu có ích, hãy like và để lại comment.

2. Tại sao là React?

Với những anh chị mới chưa biết bắt đầu từ đâu hẳn sẽ có câu hỏi này.
Đầu tiên chúng ta sẽ là người tạo ra những trang web và ứng dụng applications.
Ví dụ websites: google.com, zing.vn, youtube.com.
Ví dụ applications: ứng dụng Vietcombank, game Angry Birds, hay ứng dụng sách nói Fonos.

Bên trong những ứng dụng này, chúng ta sẽ quan tâm đến hai phần.
  • Nội dung, giao diện, đường link, hình ảnh, video, icons, etc. Nói chung là những gì show ra trước mặt của chúng ta. Người ta gọi đó là User Interface UI, cũng có thể được gọi là FrontEnd, front nghĩa là phía trước.
  • Có một tảng băng chìm lớn hơn, diễn ra đằng sau khi chúng ta lướt web. Đó có thể là dữ liệu - data chúng ta nhập vào, thông tin đăng nhập mà chúng ta lưu - authentification, phân quyền chúng ta có thể làm gì - authorization. Nói tóm là những gì chạy đằng sau, những gì server làm, còn được gọi là BackEnd.

React giải quyết vấn đề đầu tiên, là User Interface.

Các bạn cũng có thể có câu hỏi, tại sao không dùng Wordpress hoặc những công cụ làm website nhanh chóng, chỉ cần kéo và thả drag-and-drop, tiện lợi, không cần học, đơn giản. Well, React có những thế mạnh như sau:
  • Đầu tiên, hệ thống files theo dạng modulars, có là có thể lắp ghép lại với nhau, người ta gọi là components. Có thể hiểu một component là một chức năng và mình có thể sử dụng lại khi cần thiết, không phải viết lại reusable.
  • Ví dụ: website news.zing.vn có 1.000 bài viết. Nếu sử dụng Wordpress, ta phải code 1.000 files khác nhau và phải code lại từng trang một. Nếu muốn thay đổi, cập nhật, hoặc bảo trì, ta phải làm lần lượt 1.000 files khác nhau. Việc này vô cùng tốn kém thời gian và tiền bạc.
  • Ngược lại, React tạo ra một website tĩnh static website. Các bạn có thể hình dung website là một cái khung frame của một ngôi nhà, có các trụ components là cố định không đổi. Muốn tạo 1.000 bài viết khác nhau, chỉ đơn giản là thay đổi phần dữ liệu data bên trong, còn cái khung thì giữ nguyên. Việc này tiết kiệm rất nhiều công sức khi muốn chỉnh sửa và bảo trì.

Để hiểu rõ hơn sự khác biệt giữa React và những công cụ tools làm website đơn giản, kéo và thả, drag-and-drop, anh chị hãy đọc thêm bài viết sau: https://www.mindbowser.com/react-vs-wordpress/

3. Set up môi trường làm việc (dành cho MacOS)

  • Đầu tiên, anh chị sẽ cần một nơi để viết code gọi là code editor. Người ta đã nghĩ ra nhiều công cụ khác nhau để giúp việc viết code trở nên thoải mái, dễ dàng, và thuận tiện. Một trong số đó là Visual Studio Code được rất nhiều người yêu thích. VS Code là một semi-IDE, Intergrated Development Enviroment, nôm na là một nơi anh chị có thể viết code, chạy thử, chỉnh sữa lỗi fix bugs trên đó. Để tải về và cài đặt, hãy truy cập vào https://code.visualstudio.com/download

  • Tiếp theo, mở Terminal được tích hợp sẵn built-in trong VS Code, sử dụng tổ hợp phím tắt Ctrl+Shift+`. Terminal kiểu gần giống như hệ điều hành MS-Dos ngày xưa anh chị học, là nơi để thực thi một số lệnh, ví dụ như cd change directory để thay đổi vị trí thư mục, ls để liệt kê file, mkdir make directory để tạo thư mục.

  • Tại Terminal, chúng ta sẽ sử dụng npm node package manager để bắt đầu dự án: npx create-react-app {tên ứng dụng} sau đó hit enter. React sẽ tự động tải về và cài đặt một số thư mục để giúp các anh chị code, có thể kể đến là node_modules, public, src, .gitignore, package-lock.json, package.json.

  • Sẽ có một số thư mục và files quan trọng, anh chị cần nhớ khi làm việc. Đó là ./public/index.html, ./src/App.js, ./src/App.css, và ./package.json. App.js là root component, là ông tổ của mọi components. Anh chị có thể hình dung đơn giản nó là gốc cây, là nơi khởi thủy của mọi chức năng khác, từ nội dung website, comment, like & upvote cho đến thanh navigation bar. Còn file App.css sẽ đảm nhận vai trò làm đẹp, để trang trí cho page, căn lề chỉnh dòng, font & size và nhiều thứ khác. Nói chung, làm đẹp thì vào App.css, làm chức năng thì vào App.js.

Ok, bây giờ chúng ta bắt tay vào xây dựng website từ những viên gạch đầu tiên nào.

4. Xây dựng tính năng

Mục tiêu của chúng ta là xây dựng một trang web. Một website thông thường sẽ có trang chủ Home Page, thông tin về chủ website và dịch vụ họ cung cấp About Us, và danh sách những bài viết Articles List. Ok here we go.

  • Tạo Home Page và About Us
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20361582
  • Tạo Navigation Bar và cập nhật vào root component App.js
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20361724
  • Tạo Article Page để hiển thị thông tin website và Not Found Page khi URLs are invalid
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20361748
  • Tạo article-content để lưu thông tin tất cả bài viết của anh chị
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20399068
  • Tạo Articles List Page để hiển thị danh sách tất cả những bài viết của website
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20465761
  • Giới thiệu React Hooks
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20629303
 
Last edited:

midnight_sun

Senior Member
cảm nhận cá nhân của e thôi, viết như này k phù hợp cho entry level lắm, vì nó kiểu khá là mì ăn liền, thay vào đó e nghĩ thớt nên giải thích cụ thể rõ hơn các vấn đề beginner quan tâm hơn, ví dụ như tại sao phải dùng react mà không phải vanilla, nodejs là gì, npm là gì, các kiến thức js cần thiết để học react,các khái niệm cần biết như SPA, MPA, http request ...
 

steelheartvn

Junior Member
  • Ví dụ: website news.zing.vn có 1.000 bài viết. Nếu sử dụng Wordpress, ta phải code 1.000 files khác nhau và phải code lại từng trang một. Nếu muốn thay đổi, cập nhật, hoặc bảo trì, ta phải làm lần lượt 1.000 files khác nhau. Việc này vô cùng tốn kém thời gian và tiền bạc.
Ủa wordpress là 1 CMS mà, đâu phải static site đâu?
 

TTN_vOz

Senior Member
Ví dụ: website news.zing.vn có 1.000 bài viết. Nếu sử dụng Wordpress, ta phải code 1.000 files khác nhau và phải code lại từng trang một. Nếu muốn thay đổi, cập nhật, hoặc bảo trì, ta phải làm lần lượt 1.000 files khác nhau. Việc này vô cùng tốn kém thời gian và tiền bạc.
Sai nha
Bài viết sạn to quá
:surrender:

via theNEXTvoz for iPhone
 

JordanPham

Senior Member
4. Xây dựng tính năng

- Mục tiêu của chúng ta là xây dựng một trang web. Một website thông thường sẽ có trang chủ Home Page, thông tin về chủ website và dịch vụ họ cung cấp About Us, và danh sách những bài viết Articles List. Ok here we go.

- Trong thư mục ./src, chúng ta tạo một thư mục directory tên là ./src/pages. Trong thư mục này, chúng ta sẽ tạo 6 components, là HomePage.js, AboutPage.js, ArticlesListPage.js, ArticlePage.js, article-content.js, và NotFoundPage.js

- Ok, chúng ta sẽ xây dựng một trang chủ HomePage đơn giản. Anh chị vào file HomePage.js, sử dụng arrow function tạo một chức năng để hiển thị thông tin khi file mẹ App.js gọi về.

JavaScript:
const HomePage = () => {
    return (
        <>
            <h1>Welcome to Pollos website!</h1>
            <h3>Những bài viết nổi bật</h3>
            <p>Dưới đây là những bài viết tốt nhất, được phân loại theo tháng và năm.</p>
            <p> Vui lòng chọn từ khóa và enjoy. Xin cảm ơn!</p>
        </>
    )
}

export default HomePage;

- Xong phần HomePage, anh chị vào App.js để tích hợp import component <HomePage />

- Tiếp tục ta sẽ xây dựng AboutPage. Những page này chỉ hiển thị thông tin, đơn giản, thường sử dụng heading <h1> <h3> và paragraph <p>. Chúng ta sẽ nhập thông tin về dịch vụ của chúng ta tại đây.

JavaScript:
const AboutPage = () => {
    return (
        <>
            <h1>About us</h1>
            <p>Chuyên tổng hợp những bài viết hay về kinh doanh và cuộc sống.</p>
            <p> Cảm ơn ban biên tập Forbes Việt Nam đã xuất bản ra những nội dung chất lượng, những bài viết chuyên sâu, những góc nhìn toàn diện. Forbes thực sự đã chiếm một vị trí đặc biệt trong cộng đồng khởi nghiệp Việt Nam.</p>
            <p>Xin chân thành cảm ơn!</p>
            <p>Hoạt động vì cộng đồng và phi lợi nhuận. Luôn luôn là như thế!</p>
        </>
    )
}

export default AboutPage;
 

JordanPham

Senior Member
Root component <App /> tại địa chỉ thư mục ./src/

Sau khi có hai components là HomePage.js và AboutPage.js rồi, chúng ta muốn export chúng vào root component App.js. Đồng thời, anh chị cũng sẽ muốn hai components này có hai URLs xác định, có thanh Navigation Bar trên đầu của website.

JavaScript:
import './App.css';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ArticlesListPage from './pages/ArticlesListPage';
import ArticlePage from './pages/ArticlePage';
import {BrowserRouter,Routes,Route} from 'react-router-dom';
import NavBar from './NavBar';
import NotFoundPage from './pages/NotFoundPage'


function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <NavBar />
        <div id='page-body'>
          <Routes>
            <Route path='/' element={<HomePage />} />
            <Route path='/about' element={<AboutPage />} />
            <Route path='/articles' element={<ArticlesListPage />} />
            <Route path='/articles/:articleId' element={<ArticlePage />} />
            <Route path='*' element={<NotFoundPage />} />
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

Component <NavBar /> tại ./src/

Như anh chị có thể thấy trong root component <App.js />, chúng ta có import một component <NavBar />. Chức năng của nó là tạo ra thanh navigation bar, đồng thời cung cấp link để chúng ta có thể dễ truy cập. Hãy tưởng tượng sẽ bất tiện như thế nào nếu khách hàng phải nhập chính xác địa chỉ URL của bài viết. Thay vào đó, chúng ta sẽ sử dụng built-in component của React là Link và Router.

JavaScript:
import {Link} from 'react-router-dom';

const NavBar = () => {
    return (
        <nav>
            <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/about'>About us</Link></li>
                <li><Link to='/articles'>Articles</Link></li>
            </ul>
        </nav>
    )
}

export default NavBar;
 

JordanPham

Senior Member
Component <ArticlePage /> tại địa chỉ thư mục ./src/pages

Chúng ta đã xong những phần râu ria rồi, giờ anh chị sẽ muốn tạo ra một component để chứa bài viết. Nó giống như một cái ly đựng nước, bài viết 1 khác nội dung bài viết 2, khác nội dung bài viết 3. Tuy nhiên, chúng sẽ sử dụng chung một cái khung, một component. Tôi đặt tên cho nó là <ArticlePage />

JavaScript:
import {useParams} from 'react-router-dom';
import articles from './article-content';
import NotFoundPage from './NotFoundPage';

const ArticlePage = () => {
    const {articleId} = useParams();
    const article = articles.find(article => article.name === articleId);

    if (!article) {
        return <NotFoundPage />
    }

    return (
        <>
            <h1>{article.title}</h1>
            <h3>{article.subtitle}</h3>
            {article.content.map(paragraph => (
                <p key={paragraph}>{paragraph}</p>
            ))}
        </>
    )
}

export default ArticlePage;

Có một built-in component mà chúng ta dùng trong <ArticlePage /> là useParams(). Nó sẽ trả về một đối tượng object gồm cặp khóa key và giá trị value của các tham số động từ URLs, cái mà được so sánh bởi <Route path>. Nói nôm na là, mỗi bài viết có một địa chỉ URL duy nhất, và địa chỉ này là một property trong object articles trong file articles-content.js. Nếu URL trên thanh địa chỉ trùng với URL trong file articles-content.js, nó sẽ hiển thị nội dung. Nếu địa chỉ nhập không trùng với bất kỳ URL nào, nó sẽ hiển thị component <NotFoundPage />

JavaScript:
const NotFoundPage = () => {
    return (
        <>
            <h1>Code status 404 - Page not found</h1>
            <p>Từ khóa của bạn chưa khớp với danh sách bài viết.</p>
            <p>Vui lòng suy nghĩ và lựa chọn từ khóa thích hợp hơn.</p>
        </>
    )
}

export default NotFoundPage;
 

matnham

Junior Member
kèm ảnh sau mỗi đoạn code đi bác cho dễ hình dung như trang o7planning ý https://o7planning.org/11681/spring-boot-and-jsp
1663552400969.png
 
Top