React: Complex Component- Day 4

Trong bài viết này, chúng ta sẽ xây dựng giao diện từ project html-javascript-css cho đến project sử dụng react app.

Giao diện trang web

Giao diện bao gồm: HTML5 + Bootstrap 5

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Tạo ứng dụng React bằng cách tự tạo file HTML, CSS và JavaScript

Quay trở lại Day-1, chúng ta có app ReactJs bằng cách thêm react.js và react-dom.js

<!DOCTYPE html>
<html>

<head>
  <title>Hello React</title>
  <meta charset="utf-8">
</head>

<body>
  <div id="app">
    <!-- my app renders here -->
  </div>
  <script src="react/react.js"></script>
  <script src="react/react-dom.js"></script>
  <script>
    // my app's code
  </script>
</body>

</html>

Sau khi thêm bootstrap và react library

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ReactJs - Hello World</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm">
          <div id="app">      <!-- my app renders here -->
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"></script>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossoriginsrc="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
      <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      ReactDOM.render(
      <h1 id="my-heading">
        <span>Hello <em>Wonderful</em></span> world!
      </h1>,
      document.getElementById('app')
    );
    </script>
  </body>
</html>

Chúng ta chọn JSX vì JSX giúp code React dễ đọc và hiểu hơn. Bạn có thể nhìn thấy cấu trúc của giao diện người dùng một cách rõ ràng, không bị phân tán bởi các dấu ngoặc hay dấu phẩy.

Một vấn đề phát sinh là trong đoạn HTML, chúng ta có 2 thẻ HTML. Để chứa 2 thẻ HTML, có các cách sau:

Sử dụng 1 thẻ HTML bên ngoài (vd như thẻ div), hoặc 1 custom component.

function MyComponent() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}

Sử dụng Array

function MyComponent() {
  return [
    <h1 key="heading">Xin chào</h1>,
    <p key="paragraph">Thế giới</p>
  ];
}

Sử dụng 1 fragment

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Hello</h1>
      <p>world</p>
    </React.Fragment>
  );
}

// hoặc

function MyComponent() {
  return (
    <>
      <h1>Hello</h1>
      <p>world</p>
    </>
  );
}

<div class="container-fluid p-5 bg-primary text-white text-center">
	...
</div>

<div class="container mt-5">
  ...
</div>

Vì vậy chúng ta tách ra làm 3 component, 1 component chứa Header, 1 component chứa Body text, và 1 component chứa Header và Body text

Header

const Header = function () {
  return <div class="container-fluid p-5 bg-primary text-white text-center">
	<h1>My First Bootstrap Page</h1>
	<p>Resize this responsive page to see the effect!</p>
  </div>;
};

Article

const Article = function () {
  return <div class="container mt-5">
	<div class="row">
	  <div class="col-sm-4">
		<h3>Column 1</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
	  </div>
	  <div class="col-sm-4">
		<h3>Column 2</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
	  </div>
	  <div class="col-sm-4">
		<h3>Column 3</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
	  </div>
	</div>
  </div>;
};

Post

class Post extends React.Component {
  render() {
	return (
	  <div>
		<Header />
		<Article />
	  </div>
	);
  }
}

Cập nhật lại thẻ div chứa app


<div id="app">

</div>

Cập nhật lại React DOM

ReactDOM.render(
  <Post />,
  document.getElementById('app')
);

Tạo ứng dụng bằng Create React App

Sau khi tạo ứng dụng bằng create-react-app, bạn sẽ có câu trúc folder như sau:

└──📁 node_modules

└──📁 public

└──📁 src

└──App.css

└──App.js

└──index.css

└──index.js

└──logo.svg

└──reportWebVital.js

└──setupTests.js

└──.gitignore

└──package-lock.json

└──package.json

└──README.md

Bạn tạo folder components trong folder src để chứa 3 components: Header, Artitle, và Post

└──📁 node_modules

└──📁 public

└──📁 src

└──📁 components

└──Article.js

└──Header.js

└──Post.js

Thêm bootstrap vào public/index.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

Thêm file Header.js vào folder src/components

const Header = function () {
  return <div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
  </div>;
};

export default Header

Thêm file Article.js vào folder src/components

const Article = () => {
    return (<div class="container mt-5">
      <div class="row">
        <div class="col-sm-4">
          <h3>Column 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>);
  };

export default Article

Thêm file Post.js

import React, { Component } from 'react';
import Header from './Header';
import Article from './Articles';

class Post extends React.Component {
    render() {
      return (
        <div>
          <Header />
          <Article />
        </div>
      );
    }
  }

export default Post

App.js

import './App.css';
import Post from './components/Post';

function App() {
  return (
    <Post />
  );
}

export default App;

Tạo ứng dụng bằng Vite

Trong phần này, mình sẽ hướng dẫn bạn tạo nhanh ứng dụng React bằng Vite Mở terminal, gõ

yarn create vite
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@2.9.0" with binaries:
- create-vite
- cva
? Project name: » react-demo-layout

Chọn React

? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others

Rồi chọn Javascript

?? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

Để start project, bạn gõ

cd react-demo-layout
yarn
yarn run dev

Các thao tác thêm các file tương tự như phần trước bạn đã làm, lưu ý là lưu file định dạng jsx nha, vd như: Article.jsx, Header.jsx, Post.jsx

Remove thêm tất cả css trong file index.css với app.css

Tham khảo

Using Bootstrap with React: Tutorial with examples

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Nhật ký học tập

Tìm kiếm Blog này