1. Getting Started with React
  2. Create Component in React
  3. State vs Props in React
  4. Render Data in React
  5. URL Router in React
  6. Create CRUD in React
  7. Create Todo Application using React
  8. Restful API using React
  9. Create a Simple React with Redux
  10. Build a Shopping Cart with React + Redux
  11. Building a Simple React with ASP Core 2.1
  12. Create Register & Login using ASP Core 2.1 + React (part 1)
  13. Create Register & Login using ASP Core 2.1 + React (part 2)
  14. Restful API using ASP.NET Core Web API + React
  15. Using React in Laravel 8
  16. Create Login and Register using Laravel 8 with React

Create Component in React

min read
Tags: React

Trong bài viết trước, ta chỉ cài đặt ứng dụng React về để xem nó hoạt động ra sau thôi. Trong bài này ta sẽ tạo một Component trong React. Sau đó gọi nó lên. Mấy bài viết của mình chia sẻ, mình bỏ qua mấy vấn đề như: React là gì? Vòng đời của React?. Vì những vấn đề đó, các bạn sẽ được xem nhiều trên mạng của các website chia sẻ lập trình, họ đã chia sẻ rất nhiều, bạn có thể tìm hiểu thêm,những kiến thức đó, rất bổ ích và quan trọng.

Bài viết này tiếp tục với source ban đầu mình tạo, bạn có thể xem lại tại đây : Getting Started with React

Hãy mở project ở bài trước lên, ta tạo một thư mục components trong thư mục src
+ src/components : dùng chưa các file Component cấu hình của ta
Ta tạo một thư mục home trong src/components: Trong thư mục home->tạo file Home.js
Để viết cấu trúc file react nhanh bạn có thể dùng thư viện: ES7 React/Redux/GraphQL/React-Native snippets, trong Visual Studio Code, bạn chỉ rõ "rce" và Enter bạn sẽ được cấu trúc React tạo sẵn cho ta 
+ src/components/home/Home.js

import React, { Component } from 'react'
class Home extends Component {
    render() {
        return (
            <div>
                <h1>Hello World - React</h1>
            </div>
        )
    }
}
export default Home

Ok, giờ ta mở file App.js trong thư mục src, chỉnh sửa lại, ta cần import file Home.js đến App.js 

import React from 'react';
import './App.css';
import Home from './components/home/Home'
function App() {
  return (
    <div className="App">
        <Home />
    </div>
  );
}

export default App;

Sao đó bạn khởi động ứng dụng lại : npm start 

Create Component in Reactjs

Bây giờ ta sẽ thiết kế lại một tý, Layout của ta gồm:[Header,Home,Footer], File (Header.js,Footer.js) ta tạo giống file Home.js

+ src/components
     - home/Home.js
     - header/Header.js

import React, { Component } from 'react'
  class Header extends Component {
      render() {
          return (
              <div className="header">
                  <p>Header top</p>
              </div>
          )
      }
  }
  export default Header

- footer/Footer.js

import React, { Component } from 'react'
  class Footer extends Component {
      render() {
          return (
              <div className="footer">
                  <p>Footer React</p>
              </div>
          )
      }
  }
export default Footer

Mở file App.js trong thư mục src , ta cần import (Header,Footer) vào file như sau:

import React from 'react';
import './App.css';
import Home from './components/home/Home'
import Header from './components/header/Header';
import Footer from './components/footer/Footer'
function App() {
  return (
    <div className="App">
        <Header/>
        <Home />
        <Footer />
    </div>
  );
}

export default App;

Chỉnh sửa css cho các components, ta có thể tạo file css riêng cho từng Component, hoặc ta dụng CSS chung cũng được
+ src/App.css 

*{
  margin:0;padding:0;
}
/*header*/
/*footer*/
.header,.footer{
  background: #000;
  color:#fff;
  text-align:center;
  padding:10px;
  box-sizing: border-box;
}

Ok, ta hãy npm start lại, xem có gì thay đổi không. 

Create Component in React

Trong bài này mình chỉ chia sẻ về cách thêm Component và gọi nó. Bài tiếp theo mình chia sẻ cách dùng State & Props trong React

Tags: React
x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)