React.js Render HTML | Hướng Dẫn Học React | Học Web Chuẩn

Trang chủ » Nhúng React Vào Html » React.js Render HTML | Hướng Dẫn Học React | Học Web Chuẩn

Có thể bạn quan tâm

React.js render HTML
  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học React.js
  • React.js render HTML

React.js render HTML

  • Trước tiên bạn cần hiểu render là gì? nói nôm na thì render là việc hiển thị nội dung lên trình duyệt. Nội dung có thể được viết từ HTML, Javascript hay PHP,... Kết quả cuối cùng là hiển thị nội dung đó trên trình duyệt cho người dùng sử dụng. Đó gọi là render.
  • Với React.js thì nội dung layout bạn viết không phải nằm ở trang HTML, mà được viết bên trong file Javascript, file HTML chỉ là cầu nối giúp nội dung Javascript "liên kết" với trình duyệt.
  • Trước tiên ta xét file index.html sau đây để hiểu rõ hơn React hoạt động ra sao nhé.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, React!</h1>, document.getElementById('root') ); </script> </body> </html>
  • Click chạy file này, trình duyệt sẽ cho ta kết quả sau:
Hello React!

Làm thử!

  • Ta thấy nội dung <h1>Hello, React!</h1> được tạo từ code Javascript, và được truyền vào file HTML thông qua id="root", nội dung này sẽ được hiển thị ra trình duyệt. Đây là một hình thức render.
  • Ví dụ đơn giản là vậy, nhưng thực tế quá trình làm việc của React phức tạp hơn một chút, phần lớn thao tác xử lý đều nằm ở file Javascript, các bạn xem tiếp ví dụ bên dưới nhe.

Nội dung thư mục react-project

  • Sau khi hoàn thành cài đặt React, ta sẽ được cấu trúc sau:

react-project

  • node_modules

    • ...

  • public

    • index.html index.html
    • ...

  • src

    • App.js App.js
    • index.js index.js
    • ...
  • .gitignore .gitignore
  • package.json package.json
  • package-lock.json package-lock.json
  • README.md README.md
  • node_modules chứa nội dung cài đặt, tất cả cài đặt sẽ được lưu tại đây, chúng ta không thao tác trong thư mục này nhé.
  • public chứa tất cả file output, là các file sẽ tương tác trực tiếp với trình duyệt như: HTML, image, ...
  • src chứa tất cả các file input, đây là các file mà chúng ta sẽ code nội dung, thao tác phần lớn ở những file này, gồm các file Javascript, CSS,...
  • Các file khác chưa cần quan tâm nhé.

Cách React render nội dung HTML ra trình duyệt

Để hiểu rõ hơn về render trong React, ta xem xét nội dung 3 file:

  • /puclic/index.html
  • /src/App.js
  • /src/index.js

Để cho dễ hiểu, ta lần lượt viết lại nội dung các file như sau:

/puclic/index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
  • Ta thấy file này không chứa bất kỳ nội dung nào hiển thị ngoài trình duyệt.

/src/App.js

import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Hello, React!.</p> </header> </div> ); } export default App;
  • Ta thấy đoạn code màu xanh bên trên chính là nội dung được hiển thị ngoài trình duyệt.
  • File này liên kết với /puclic/index.html thông qua /src/index.js:

/src/index.js

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; //Load function App từ App.js import * as serviceWorker from './serviceWorker'; ReactDOM.render(<App />, document.getElementById('root')); serviceWorker.unregister();
  • Import thư viện React và ReactDOM: import React from 'react'; import ReactDOM from 'react-dom';
  • import './index.css'; import nội dung file index.css
  • import App from './App'; import nội dung file App.js
  • ReactDOM.render(<App />, document.getElementById('root')); render nội dung function App tới id="root"

Nội dung trên có nghĩa là file /src/index.js lấy nội dung từ function App của file /src/App.js render ra nội dung trả về id="root" của file /public/index.html, sau đó hiển thị nội dung này ra trình duyệt.

React.js HTML Render

  • Nội dung hiển thị trình duyệt lúc này:

React.js HTML Render

  • Tới đây các bạn sẽ thắc mắc tại sao có thể liên kết được với file /public/index.html trong khi bên trong file /public/index.html không chứa bất kỳ liên kết Javascript nào? Câu trả lời nằm file /src/serviceWorker.js, nội dung file này được import trực tiếp bên trong /src/index.js đóng vai trò như một Route điều hướng, liên kết các file.
  • Tới đây nếu bạn vẫn chưa rõ thì tạm thời gác cách hoạt động trên ra một bên, sau này quay lại cũng chưa muộn, cái quan trọng là nội dung React sẽ được viết từ file /src/App.js, do đó khi chạy file /public/index.html thì nội dung sẽ được render.

Cài đặt React.js

Cấu trúc JSX

Học web chuẩn

HƯỚNG DẪN HỌC

Hướng dẫn học ES6

  • ES6 là gì?
  • ES6 - variables
  • ES6 - default parameters
  • ES6 - spread syntax
  • ES6 - rest parameters
  • ES6 - destructuring
  • ES6 - arrow function
  • ES6 - classes
  • ES6 - export & import

Cài đặt và các khái niệm

  • React.js là gì?
  • Cài đặt React.js
  • Render HTML
  • Cấu trúc JSX
  • Component
  • React.js Props
  • Props - xử lý data
  • Props- liên kết data trong Component
  • Props với function arrow
  • Props với Classes
  • React.js State
  • Component - setState
  • Component - Lifecycle

Xử lý

  • React.js xử lý sự kiện
  • React.js xử lý form
  • React.js xử lý form kết hợp
  • React.js - render có điều kiện
  • React.js - từ array tới list
  • React.js - list và key
  • React.js - nhúng map() vào JSX
  • React.js - state với map()
  • React.js - setState với map()
  • React.js project với Component
  • React.js project với Props
  • React.js project với State

Thao tác dữ liệu

  • React.js - Express - API
  • React.js - Server & Client
  • React.js - MySQL
  • React.js - xử lý insert
  • React.js - xử lý update
  • React.js - xử lý delete

UI Components thông dụng

  • Atlaskit
  • Prime React
  • MATERIAL-UI
  • Evergreen
  • UI Components khác

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

  • Tham khảo
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Tham khảo CSS
  • Tham khảo CSS3
  • Tham khảo jQuery

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • BẠN SẼ TÀI TRỢ?DONATE
  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Nhúng React Vào Html