Hướng dẫn html to text react - html thành phản ứng văn bản

• 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é.

• Click chạy file này, trình duyệt sẽ cho ta kết quả sau:

• Ta thấy nội dung

  Hello, React!

  đượ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
• .gitignore
• package.json
• package-lock.json

• 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

• 0

• 1

• 2

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

/puclic/index.html

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

/src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    

      

        



Nội dung trên có nghĩa là file 


  
    
    
  
  
    

  
2 lấy nội dung từ function 
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    

      

        
Nội dung hiển thị trình duyệt lúc này:
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 
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    

      

        
        
Hello, React!.
      
    
  );
}

export default App;
8 trong khi bên trong file 
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    

      

        
        
Hello, React!.
      
    
  );
}

export default App;
8 không chứa bất kỳ liên kết Javascript nào? Câu trả lời nằm file 
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(, document.getElementById('root'));

serviceWorker.unregister();
1, nội dung file này được import trực tiếp bên trong 


  
    
    
  
  
    

  
2 đóng vai trò như một Route điều hướng, liên kết các file.
 

                                    
Đọc tiếp