Hướng dẫn react character sheet - bảng ký tự phản ứng
Ngày đăng:
20/11/2022
Trả lời:
0
Lượt xem:
178
Show
React.js project component
Đưa template mẫu vào project React
react-project
/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
import React from 'react';
import './App.css';
function App() {
return (
Để chạy project, ta dùng lệnh import React from 'react';
import './App.css';
function App() {
return (
Big Title
Tách template mẫu ra thành từng component.
react-project
/src/components/Header.js import React from 'react'; const Header = () => { return ( /src/components/Headline.js import React from 'react'; const Headline = () => { return ( /src/components/ItemList.js import React from 'react'; const ItemList = () => { return ( /src/components/Aside.js import React from 'react'; const Aside = () => { return ( ) } export default Aside; /src/components/BoxList.js import React from 'react'; const BoxList = () => { return ( /src/components/Footer.js import React from 'react'; const Footer = () => { return ( ) } export default Footer; README.md
/src/App.js import React, { Component } from 'react'; import './App.css'; import Header from './components/Header'; import Headline from './components/Headline'; import ItemList from './components/ItemList'; import Aside from './components/Aside'; import BoxList from './components/BoxList'; import Footer from './components/Footer'; class App extends Component { render() { return (
|