React.js Project Component - Học Web Chuẩn

Trang chủ » Cách Chia Component Trong Reactjs » React.js Project Component - Học Web Chuẩn

Có thể bạn quan tâm

Đư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

    • App.js App.js
    • App.css App.css
    • ...
  • .gitignore .gitignore
  • package.json package.json
  • package-lock.json package-lock.json
  • README.md README.md
  • Trong template mẫu, có 2 file chính, là index.html và /css/style.css, 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 style.css của template thay thế code bên trong /src/App.css.
    • Copy nội dung phần <div id="layout"> của template thay thế cho nội dung bên trong phần return của /src/App.js.
  • Khi này ta có:

/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 h1 { 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 đưa vào App.js, nhớ chuyển cấu trúc HTML sáng JSX (những vị trí màu đỏ bên dưới).
import React from 'react'; import './App.css'; function App() { return ( <div id="layout"> <header>HEADER</header> <main> <section id="content"> <h1>Big Title</h1> <ul className="item-list"> <li> <h2>Title 01</h2> <div> Proin ex nunc, bibendum ut magna quis. </div> </li> <li> <h2>Title 02</h2> <div> Blandit mollis orci. Ut pretium diam ut tristique interdum amet condimentum. </div> </li> <li> <h2>Title 03</h2> <div> Donec ut libero pretium, efficitur nisl vel, sagittis elit. </div> </li> </ul> </section> <aside> ASIDE </aside> <ul className="box-list"> <li>Box 1</li> <li>Box 2</li> <li>Box 3</li> <li>Box 4</li> </ul> </main> <footer>FOOTER</footer> </div> ); }; export default App;
  • 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 cmd start sẽ thấy được kết quả sau:

React.js project component

Từ khóa » Cách Chia Component Trong Reactjs