Basic ReactJs (P1)

React.js là một thư viện Javascript. Nó được phát triển bởi những kĩ sư ở Facebook Sau đây là những lí do vì sao mọi người lại chọn lập trình với React:

1. React nhanh. Những ứng dụng được tạo bằng React có thể xử lí những việc update rất phức tạp mà vẫn đem lại cho người dùng cảm giác nhanh
2. React có tính modular. Thay vì viết nhiều code, những file code dài lê thê, bạn có thể viết thành nhiều phần nhỏ hơn và tái sử dụng lại chúng. Những modular của React có thể trở thành những giải pháp tuyệt với cho vấn đề bảo trì code
3. React có khả năng mở rộng. Với những phần mềm lớn, React sẽ thể hiện được hết những tính năng ưu việt của nó
4. React có tính mềm dẻo (flexible)
5. React rất phổ biến,Mặc dù lý do này ít có liên quan đến chất lượng của React, sự thật là nắm được React sẽ giúp bạn có nhiều cơ hội kiếm được việc ngon

JSX là một cú pháp mở rộng cho JavaScript. Nó được viết để sử dụng với React. Code JSX rất giống với HTML JSX không phải là JavaScript. Trình duyệt không thể đọc được nó Nếu file JavaScript chứa code JSX thì nó sẽ được biên dịch sang JS để trình duyệt có thể hiểu

JSX Elements

Một đơn vị căn bản của JSC được gọi là một JSX element Đây là một ví dụ của một JSX element : <h1>Hello world</h1> Bạn có thể thấy JSX element trông giống hệt HTML. Chỉ có điểm khác đó là nó được viết trong file .js chứ không phải .html JSX có thể được lưu vào trong 1 biến, truyền nó vào function hoặc lưu trong một object hoặc mảng Cú pháp : const navBar = <nav>I am a nav bar</nav>;

Attributes in JSX & Nested

JSX element có thể có những thuộc tính như HTML Cú pháp: const title = <h1 id="title">Introduction to React.js: Part I</h1>;

Bạn có thể lồng những JSX element vào với nhau như HTML Cú pháp:

 const theExample = (
   <a href="https://www.example.com">
     <h1>
       Click me!
     </h1>
   </a>
 );

1 JSX element phải có chính xác một element bao ngoài nó

Ví dụ sau đây là sai

const paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);

React DOM là một thư viện JavaScript chứa những phương thức cụ thể của React

import React from 'react';
import ReactDOM from 'react-dom';

// This is just an example, switch to app.js for the exercise.
ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

Bạn có thể thấy một phương thức của ReactDOM: ReactDOM.render() ReactDOM.render() là cách phổ biến nhất để render ra JSX. Tham số đầu tiên là một JSX expression. Nó sẽ tạo ra một cây tương ứng với node DOM, sau đó thêm cây này vào DOM Tham số thứ 2 sẽ là nơi mà bạn muốn tham số đầu tiên được xuất hiện

Một điều đặc biệt về ReactDOM.render() đó là nó chỉ cập nhật những thành phần DOM có sự thay đổi Nghĩa là nếu bạn gọi hàm render 2 lần mà không có sự thay đổi gì cả, thì hàm render thứ 2 sẽ không làm gì cả

const hello = <h1>Hello world</h1>;
// This will add "Hello world" to the screen:
ReactDOM.render(hello, document.getElementById('app'));

// This won't do anything at all:
ReactDOM.render(hello, document.getElementById('app'));

Để kết thúc phần 1 này, mình có 1 câu hỏi cho các bạn Hãy sắp xếp những bước sau theo đúng thứ tự

a. The screen looks different than it used to.
b. A JSX element renders.
c. The virtual DOM "diffs," comparing its current self with its previous self.
d. The entire virtual DOM updates.
e. Part of the real DOM updates.

Đáp án sẽ có trong phần 2