React: Tạo project Hello World

Trong bài viết này, mình sẽ hướng dẫn bạn cách tạo 1 project React đơn giản và giới thiệu 1 số thành phần code để bạn bắt đầu 1 cách đơn giản hơn.

Setup

Softwares and Packages

Bạn cần cài đặt Visual Studio code, NodeJs, và React.
Mở command line, cài đặt package ‘create-react-app’.
npm install -g create-react-app
‘Create React App’ là một trình tạo template cho ứng dụng React được tạo bởi Facebook. Nó cung cấp một môi trường phát triển, được cấu hình để dễ sử dụng với thiết lập tối thiểu, bao gồm:

ES6 and JSX transpilation
Dev server with hot module reloading
Code linting
CSS auto-prefixing
Build script with JS, CSS and image bundling, and sourcemaps
Jest testing framework

Extensions

Trong Visual Studio Code, bạn cần cài đặt 1 số extension sau:

Bracket Pair Colorizer
ES7 React/Redux/GraphQL/React-Native snippets
Highlight Matching Tag
Prettier-Code Formater

Tạo Project Hello World

Để tạo mới project và chạy project, trong cmd, bạn gõ:


create-react-app my-app
cd my-app
npm start

Mở browser lên với port 3000

Mặc định project của bạn sẽ chạy ở port 3000. Để đổi sang port khác, bạn mở file package.json, thay đổi đoạn start. Dưới đây là đoạn code đổi sang Port 3006. Bạn mở file package.json, sửa thành đoạn code sau:

"start": "set PORT=3006 && react-scripts start",

Bạn sẽ rất bối rối vì nếu tìm hiểu trên mạng, sẽ có nhiều kiểu code khác nhau nhằm mục đích tạo ra React element. Đầu tiên, bạn cần hiểu JSX là gì.

JSX and Without JSX

JSX (viết tắt của cụm từ JavaScript XML) là một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML.

JSX = Javascript + XML.

Nó transform cú pháp dạng gần như XML về thành Javascript. Giúp người lập trình có thể code ReactJS bằng cú pháp của XML thay vì sử dụng Javascript. Các XML elements, attributes và children được chuyển đổi thành các đối số truyền vào React.createElement.
JSX (viết tắt của cụm từ JavaScript XML) là một cú pháp giống như XML / HTML được React sử dụng để mở rộng ECMAScript để văn bản giống như XML / HTML có thể cùng tồn tại với mã JavaScript / React.
Đây là ví dụ sử dụng React API để hiển thị 1 phần tử React trên browser mà không sử dụng JSX


<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script type="text/javascript">
 // create a React element rElement
 var rElement = React.createElement('h1', null, 'Hello, world!');
 // dElement is a DOM container
 var dElement = document.getElementById('example');
 // render the React element in the DOM container
 ReactDOM.render(rElement, dElement);
</script>

Thay vì sử dụng chuỗi string chứa React element, các bạn có thể sử dụng JSX

var rElement = React.createElement('h1', null, 'Hello, world!');

Tương đương với:

var rElement = <h1>Hello, world!</h1>;

Mã code JSX cần được viết trong thẻ a <script type="text/babel">. Mọi thứ trong thẻ này sẽ được chuyển đổi thành Javascript bằng cách sử dụng thư viện Babel.
Babel là một chương trình biên dịch và trình dịch mã Javascript. Nó được sử dụng để chuyển đổi một mã nguồn khác


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;
      // dElement is a DOM container
      var dElement = document.getElementById('root');
      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement)

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this section for a production-ready setup with JSX:
      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

      In a larger project, you can use an integrated toolchain that includes JSX instead:
      https://reactjs.org/docs/create-a-new-react-app.html

      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
  </body>
</html>

Tạo mới 1 Component

Có 2 cách tạo mới 1 component:
React.createElement(): viết code trực tiếp như ví dụ ở trên
Component: tập hợp các function, style, logic, và có thể được tái sử dụng.
Cú pháp:

class MyReactClassComponent extends Component {
   render() {}
}

Lưu ý là bạn chỉ có duy nhất 1 hàm render() trong class MỷeactClassComponent. Hàm render chỉ trả về duy nhất 1 React element.
Đoạn code dưới đây tạo ra 1 component HelloWorld


import React, { Component } from 'react';

class HelloWorld extends Component{
    render(){
        return <h1>Hello world</h1>
    }
}

export default HelloWorld;

Trong file App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import HelloWorld from './components/helloworld/helloworld';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <HelloWorld></HelloWorld>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Bạn sẽ có kết quả:

ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác. Nói một cách chính xác theo thuật ngữ React, người ta có thể sử dụng các stateless components trong các components khác bằng cách export các components từ các modules tương ứng và sử dụng nó trong các tệp khác.

export default function() {}
export default class {}

Khi export có định danh thì khi import cũng phải gọi đúng tên đã export, còn nếu sử dụng default export thì khi import đặt tên là gì cũng được.

export default HelloWorld; // helloworld.js

Dưới đây là đoạn code sau khi thay đổi thay đổi tên import:


//…
import HelloWorld1 from './components/helloworld/helloworld';

function App() {
  return (
    <div className="App">
        <HelloWorld1></HelloWorld1>        
    </div>
  );
}

export default App;

Tham khảo

https://reactjs.org/docs/add-react-to-a-website.html

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