Hướng dẫn react character sheet - bảng ký tự phản ứng

Trang chủ
Hướng dẫn học
Hướng dẫn học React.js
React.js project component

React.js project component

Ở bài học trước ta đã biết cách kết nối các dữ liệu trong component của một project React, tiếp tục với bài học này, ta sẽ tiến hành cập nhật [thay đổi] dữ liệu.
Nội dung chuẩn bị:
- Cài đặt để chạy được project React.js, xem lại phần Cài đặt React.js
- Template mẫu, các bạn download tại HWC template cơ bản
Ta sẽ thực hiện các bước sau:
- Đưa template mẫu vào project React.
- Phân tích các component trong template mẫu.
- Tách template mẫu ra thành từng component.
- Kết nối các component lại với nhau.

Đưa template mẫu vào project React

Sau khi cài đặt xong React ta sẽ có project react-project với cấu trúc thư mục như sau:

react-project

node_modules
- ...
public
- index.html
- ...
index.html
src
.gitignore
package.json
package-lock.json

README.md

Trong template mẫu, có 2 file chính, là

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

0 và

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

1, nhiệm vụ của ta là làm sao cho nội dung của template mẫu này hiển thị thông qua project React.

Để làm được việc đó, ta lần lượt thực hiện như sau:

Copy nội dung code bên trong

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

2 của template thay thế code bên trong

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

Copy nội dung phần

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

4 của template thay thế cho nội dung bên trong phần

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

5 của

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

/src/App.css

/* Reset lại một vài thuộc tính */
* {
    margin: 0;
    padding: 0;
}
ol, ul { list-style: none; }
img { border: none; vertical-align: top; }
button {
    background-color: #3a95ea;
    border: 1px solid #2d87da;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    padding: 8px 15px;
}

/* Nội dung layout */
#layout {
    margin: 20px auto;
    width: 1024px;
}
header, footer, aside, .box-list li {
    font-size: 30px;
    text-align: center;
}
header {
    background-color: #92dfc8;
    height: 80px;
    line-height: 80px;
}
main {
    display: flex;
    flex-wrap: wrap;
}
#content {
    margin-right: 20px;
    width: 754px;
}
#content h2 {
    font-size: 30px;
    background-color: #e9e9e9;
    padding: 5px 0  5px 10px;
    margin: 20px 0 30px;
}
#content .item-list h2 {
    margin-bottom: 10px;
}
#content .item-list div {
    margin-bottom: 30px;
}
aside {
    background-color: #f2d8ca;
    height: 400px;
    line-height: 400px;
    width: 250px;
}
.box-list {
    display: flex;
    margin-top: 10px;
}
.box-list li {
    background-color: #f2f1ca;
    height: 150px;
    line-height: 150px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 248.5px;
}
.box-list li:last-child {
    margin-right: 0;
}
footer {
    background-color: #eecbf3;
    height: 80px;
    line-height: 80px;
}

/src/App.js

Khi này ta có:

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

Khi đưa vào

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

7, nhớ chuyển cấu trúc HTML sáng JSX [những vị trí màu đỏ bên dưới].

Chỉ cần thay thế 2 file như trên thôi, là ta đã đưa nội dung của template mẫu vào project React thành công.

Để chạy project, ta dùng lệnh

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

8 sẽ thấy được kết quả sau:

Phân tích component

Phân tích ta thấy, mỗi ô màu đỏ bên dưới đây có thể xem là mỗi component:

Theo đó ta lần lượt có các component như sau:

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

function App[] {
  return [
    
      HEADER

      
        
          Big Title
          
            
              Title 01
              
                Proin ex nunc, bibendum ut magna quis.
              
            

            
              Title 02
              
                Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
              
            

            
              Title 03
              
                Donec ut libero pretium, efficitur nisl vel, sagittis elit.
              
            
          
        

        
          ASIDE
        

        
          Box 1
          Box 2
          Box 3
          Box 4
        
      

      FOOTER
    
  ];
};

export default App;

9: là component chứa nội dung của phần header.

import React from 'react';

const Header = [] => {
  return [
    HEADER
  ]
}

export default Header;

0: là component chứa nội dung của "Big Title".

import React from 'react';

const Header = [] => {
  return [
    HEADER
  ]
}

export default Header;

1: là component chứa nội dung của nhóm "Title 01" cho tới "Title 03".

import React from 'react';

const Header = [] => {
  return [
    HEADER
  ]
}

export default Header;

2: là component chứa nội dung của phần sidebar.

import React from 'react';

const Header = [] => {
  return [
    HEADER
  ]
}

export default Header;

3: là component chứa nội dung danh sách "BOX".

Tách template mẫu ra thành từng component.

Kết nối các component lại với nhau.
Đưa template mẫu vào project React

react-project

node_modules
- ...
public
- index.html
- ...
index.html
- src
- .gitignore
- package.json
- ...
src
.gitignore
package.json
package-lock.json

/src/components/Header.js

import React from 'react';

const Header = [] => {
  return [
    HEADER
  ]
}

export default Header;

/src/components/Headline.js

import React from 'react';

const Headline = [] => {
  return [
    Big Title
  ]
}

export default Headline;

/src/components/ItemList.js

import React from 'react';

const ItemList = [] => {
  return [
    
      
        Title 01
        
          Proin ex nunc, bibendum ut magna quis.
        
      

      
        Title 02
        
          Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum.
        
      

      
        Title 03
        
          Donec ut libero pretium, efficitur nisl vel, sagittis elit.
        
      
    
  ]
}

export default ItemList;

/src/components/Aside.js

import React from 'react';

const Aside = [] => {
  return [
    
      ASIDE
    
  ]
}

export default Aside;

/src/components/BoxList.js

import React from 'react';

const BoxList = [] => {
  return [
    
      Box 1
      Box 2
      Box 3
      Box 4
    
  ]
}

export default BoxList;

/src/components/Footer.js

import React from 'react';

const Footer = [] => {
  return [
    FOOTER
  ]
}

export default Footer;

README.md