Chuyển đến nội dung chính

Thủa sơ khai của React - Pure React

Pure React

Chúng ta hãy cùng bắt đầu học Reactjs với cách viết Pure React. Nói không với các bước compile, không với Webpack, Parcel, JSX mà chỉ có Javascript thuần tuý thôi. Vì mình biết nếu bây giờ nhảy thẳng vào các khái niệm đó, các bạn sẽ choáng ngợp bởi có quá nhiều khái niệm, và cũng không hiểu rằng tại sao họ lại dùng những thư viện đó và dùng nó khi nào nữa :)

Nào hãy cùng tạo một project tên là adopt-me mình lấy tên như này bởi mình muốn sử dụng API của trang Petfinder.com cho các bài hướng dẫn sau về xử lý kết quả trả về từ API. Và cũng vì lý do nhân văn là các bạn nên nhận nuôi một con thú cưng nhé hihi.

Mình khuyến khích các bạn lập trình sử dụng hệ điều hành Linux hoặc MacOs nó rất tiện cho bạn sử dụng dòng lệnh và thao tác nhanh chóng như dân lập trình Pro.

Chúng ta bắt đầu tạo một thư mục adopt-me, dưới thư mục chúng ta tạo một thư mục src lưu code và tạo một file index.html trong thư mục đó. Cách đơn giản là bạn mở terminal lên và gõ câu lệnh.

mkdir -p adopt-me/src && cd adopt-me/src && touch index.html

Nhìn cũng giống dân Pro rồi đó (^_^). Sau khi tạo xong bạn copy đoạn code dưới đặt vào file index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <title>Adopt Me</title>
</head>

<body>
  <div id="root">not rendered</div>
  <script src="https://unpkg.com/react@16.8.4/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.8.4/umd/react-dom.development.js"></script>
  <script>
    // Your code is going to go here
  </script>
</body>

</html>

Sau đó lưu lại và mở bằng bất cứ trình duyệt nào bạn thích. Ở đây mình khuyến khách bạn sử dụng Google Chorme.

Sau khi bạn mở trình duyệt lên bạn sẽ ngỡ ngàng rằng chẳng có cái gì ngoài từ not rendered haha :)
Chúng ta cùng tìm hiểu đoạn Html trên nhé.
  • Đây là một trang HTML5 đơn giản. Nếu bạn chưa tìm hiểu về HTML5 bạn có thể đọc qua tại W3School
  • Trong thẻ body có thẻ <div id="root"> đây là nơi mà React App sẽ được render sau này. Không nhất thiết bạn cần đặt tên chính xác là root mà bạn có thể đặt tên gì tuỳ ý.
  • Chúng ta có hai thẻ script:
    • Thẻ đầu tiên là thư viện core của React. Nó chứa interface API giúp bạn giao tiếp với thư viện này nhưng nó không chứa interface để cho phép bạn hiển thị thông tin ra trình duyệt.
    • Thẻ thứ 2 được gọi là tầng rendering của React. Ở đây chúng ta đang lập trình Web nên sẽ sử dụng React DOM. Ngoài ra còn có React Native hoặc React VR, React Blessed ... cho các mục đích khác nhau. Thứ tự import là không quan trọng
  • Thẻ script cuối cùng là nơi bạn đặt code của bạn tại đó
  • Ở đây chúng ta sử dụng một file style.css. Bạn có thể tải nó về và đặt vào cùng thư mục với index.html
Nào hãy thử đặt thêm đoạn code này vào thẻ script thứ 3 nhé.

const App = () => {
  return React.createElement(
    "div",
    {},
    React.createElement("h1", {}, "Adopt Me!")
  );
};

ReactDOM.render(React.createElement(App), document.getElementById("root"));


Cùng phân tích nhé:
  • Đầu tiên chúng ta tạo một tạo ra một Component tên là App và từ các Component này chúng ta lại tạo ra nhiều component con. Và cứ thế, cứ thế tạo dựng lên trang Web.
  • Có hai kiểu component đó là function component và class component. Chúng ta đang dùng kiểu function component để tạọ ra App. Ơn chúa nhìn nó ngắn gọn hơn class component rất nhiều. Nếu bạn chưa biết điều này bạn có thể tìm hiểu qua bài biết này
  • Một function compoment phải return ra một markup. Có thể là text, ở đây là trả về một element do React.createElement sinh ra.
  • React.createElement tạo ra một instance của một component. Nếu chúng ta sử dụng string trong tham số thì nó sẽ tạo ra DOM tag giống với string đó. Trong đoạn code trên chúng ta đang dùng div và h1
  • Tham số thứ 2 của hàm chúng ra đang sử dụng {}. Đây là tham số thuộc tính của thẻ tag. Ví dụ id, style, ...
  • Tham số thứ 3 là các thẻ con nằm bên trong nó.
  • Cuối cùng là hàm ReactDOM.render có chức năng gắn nội dung render ra được vào DOM tại thẻ div với id là root
Wow! Mọi thứ dường như đã sáng tỏ. Reactjs cũng đơn giản :). Lưu file lại và mở lại trình duyệt để thấy điều bất ngờ.

Ngồi nghĩ một lúc thấy vẫn chưa ổn lắm. Trang web có rất nhiều thẻ, ở đây mình tạo ra có hai thẻ mà code đã thấy khó nhìn rồi. Rối rắm với những lần tạo phần tử con --> Bạn nghĩ ngay tới việc chia nhỏ code ra để dễ quản lý.

Chúng ta tạo ra một file App.js trong thư mục src. Copy và paste đoạn code sau vào đó.

const Pet = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Luna"),
    React.createElement("h2", {}, "Dog"),
    React.createElement("h2", {}, "Havanese")
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Adopt Me!"),
    React.createElement(Pet),
    React.createElement(Pet),
    React.createElement(Pet)
  ]);
};

ReactDOM.render(React.createElement(App), document.getElementById("root"));

  • Để tạo ra nhiều phần tử con chúng ra sử dụng một mảng truyền vào trong hàm React.createElement
  • Chúng ta cũng tạo ra một Pet Component chịu tránh nhiệm hiển thị thông tin của một đối tượng Pet. Cách tổ chức chia nhỏ chức năng giúp bạn quản lý code tốt hơn.
  • Khi đã tạo Pet Component chúng ta có thể sử dụng nó nhiều lần :)
  • Tham số thứ hai của React.createElement là không bắt buộc bạn có thể bỏ qua
  • Nếu bạn dùng Google Chorme khi inspect trang web bạn sẽ thấy cảnh báo element required key. Tạm thời tại thời điểm này bạn bỏ qua điều đó.
Ok! Lưu file lại và import App.js và file index.html. Mở trình duyệt lần nữa bạn sẽ thấy sự thay đổi. Đã thấy nội dung hiển thị rồi. Nhưng đây chẳng có điều gì thú vị cả. Tôi muốn nội dung phải thay đổi động cơ. Hiện tại các thẻ Pet có nội dung y hệt nhau. :(

Chúng ta cần làm điều gì đó, để Pet component trở lên hưũ ích hơn.

const Pet = props => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, props.name),
    React.createElement("h2", {}, props.animal),
    React.createElement("h2", {}, props.breed)
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Adopt Me!"),
    React.createElement(Pet, {
      name: "Luna",
      animal: "Dog",
      breed: "Havanese"
    }),
    React.createElement(Pet, {
      name: "Pepper",
      animal: "Bird",
      breed: "Cockatiel"
    }),
    React.createElement(Pet, { name: "Doink", animal: "Cat", breed: "Mix" })
  ]);
};

ReactDOM.render(React.createElement(App), document.getElementById("root"));


Ở đây chúng ta sử dụng thêm thuộc tính props. Đây là cách truyền thông tin từ phần tử cha xuống phần tử con. Giờ đây Pet Compoment đã có sự tuỳ biến rõ rệt. Đây cũng là tính năng nổi bật của React. Chúng ta có thể tạo ra các Component và sử dụng chúng lại nhiều lần.


Trên đây mình đã giải thích chi tiết cách mà Reactjs hoạt động như nào. Code mình đặt tại repo nhánh lesson-1-pure-react này các bạn có thể tải về. Hẹn gặp lại các bạn trong bài viết sau về cách setup npm, ESLint & Prettier code chuyên nghiệp bớt nghiệp dư đi :)


Mạnh dạn nói ‘Tôi đã sai’ là cách ta chấp nhận đối mặt với tình huống khó khăn. Việc đó có phần mạo hiểm nhưng những gì ta nhận được sẽ vượt ngoài sự mong đợi - Rich DeVos

Nhãn:

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Load balancing howto: LVS + ldirector + heartbeat 2

Problem A high capacity load balancing solution is needed to address current and future needs to provide highly available and scalable services. Solution Linux Virtual Server (LVS) provides the means of building scalable and high performing virtual cluster server. Heartbeat 2 can be used to feather increase the availability of the virtual services. Limitations Iptables redirection to avoid ARP problems with direct routing load balancing is not covered. Heartbeat 2 SSH STONITH is used without quorumd or pingd. Very limited "tiereaker" capability. Concepts LVS hides real servers behind a virtual IP and load balances the incoming request across all cluster nodes based on a scheduling algorithm. It implements transport-layer load balancing inside the Linux kernel, also called Layer-4 switching. There are 3 types of LVS load balancing: Network Address Translation (NAT) Incoming requests arrive at the virtual IP and are forwarded to the real servers by changing the...
Đăng nhận xét
Đọc thêm

Làm thế nào để có thể nhúng source code vào bài viết trên Blogger?

Nói nhảm Là một developer mình luôn luôn muốn chia sẻ những gì mình học được tới mọi người. Và một trong những cách đó là ngồi viết nhảm nhí trên blog :). Hôm nay chợt nảy ra ý định muốn tạo các bài hướng dẫn các sử dụng ReatJs từ cơ bản tới không còn cơ bản nữa. Nhưng chợt nhận ra mình không có khả năng viết lách lắm :) Nói hơi nhảm xíu nhé mọi người. Nhưng nếu ai ủng hộ mình viết một series hướng dẫn lập trình web sử dụng ReactJs thì comment bên dưới nhé. Còn bây giờ quay lại chủ đề chính của mình trong bài viết này là làm sao có thể nhúng đoạn code đẹp trai này vào bất cứ blog nào hỗ trợ soạn HTML. Javascript 1 console.log( "Bạn rất đẹp trai" ); Python 1 print ( "Bạn còn đẹp trai hơn" ) và có rất nhiều ngôn ngữ khác nữa. Wow nghề viết lách lại không đơn giản :) Nói thật Mình có hỏi bạn bè đồng nghiệp và rồi hỏi anh Google thân thuộc thì hiện tại tìm được hai giải pháp có thể giúp anh em code tung trời và trình bày đẹp trai trên bài viết của mình. Cách t...
1 nhận xét
Đọc thêm