Yêu cầu trong bài viết

Cú pháp

• Dùng let, const trong JavaScript ES6 hoặc var ở các phiên bản JavaScript thấp hơn.
• Dùng Function.
• Dùng Class trong JavaScript ES6.

Ví dụ

import React, { Component } from 'react';

// Ví dụ 1
let Tab_let = () => {
  return (
    <div>Khởi tạo bằng let</div>
  );
};

// Ví dụ 2
const Tab_const = () => {
  return (
    <div>Khởi tạo bằng const</div>
  );
};

// Ví dụ 3 - const hoặc let đều được
const Tab_shorthand = () => (
  <div>Cách tắt khi dùng Arrow Function</div>
);

// Ví dụ 4
function Tab_function() {
  return (
    <div>Khởi tạo bằng Function</div>
  );
}

// Ví dụ 5
class Tab_class extends Component {
  render() {
    return (
      <div>Khởi tạo bằng Class</div>
    );
  }
}

Cách sử dụng

Chúng ta chỉ đơn giản sử dụng tên thẻ như trước đó tôi đã đề cập vào bất kỳ vị trí nào nằm bên trong phạm vi sử dụng React. Chắc có lẽ sẽ có nhiều bạn đến khúc này sẽ bị lấn cấn đó là làm sao biết phạm vi của React là ở đâu? Và nó đã được khởi tạo như thế nào?

Quay lại bài viết trước, các bạn có nhớ rằng khi các bạn tạo dựng ReactJS bằng cách dùng create-react-app , chúng ta đã thấy qua file index.js  trong thư mục src  chứ. Vâng, chính là nó! Tôi sẽ giải thích cho các bạn qua cấu trúc file public/index.html  và src/index.js  bằng hình ảnh sau:

Hình ảnh trên chứa các phương thức mặc định dùng để khởi động ReactJS cũng như trỏ tới <div id=”root”></div>  để nhận biết đâu là vùng hoạt động của ReactJS. Tiếp tục, chúng ta quay trở lại file App.js  và thêm những Component mà chúng ta đã viết ở trên vào:

The post Tìm hiểu Component trong ReactJS appeared first on Thien An Blog.

Yêu cầu

• Cài đặt NodeJS phiên bản mới >= 6 (LTS hoặc bản hiện tại – https://nodejs.org/en/download/)
• Cài đặt Visual Studio Code/Sublime Text hoặc WebStorm (tùy chọn)

Cài đặt

create-react-app thienanblog

cd thienanblog
npm start

Một cửa sổ sẽ hiện lên và các bạn thấy ReactJS đã chạy rồi đấy:

Xong như vậy là chúng ta đã hoàn tất cách cài đặt ReactJS. Chuyển sang tinh chỉnh một số File nào. Bạn hãy vào trong thư mục src  và tìm file App.js  như hình:

Sau đó tinh chỉnh lại như sau và save lại:

/// ...
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Chào mừng tới React tại Thienanblog</h1>
        </header>
        <p className="App-intro">
          <ThienanBlog />
        </p>
      </div>
    );
  }
}
/// ...

Lập tức màn hình Browser sẽ tự động Reload lại mà không cần bạn phải F5. Đó chính là do NodeJS vẫn đang chạy, nên vì thế nó sẽ nhận biết được khi nào các bạn thay đổi nội dung trong file.

Viết Component đơn giản

Tiếp tục, chúng ta sẽ viết ngay 1 Component đơn giản nhất trong ReactJS bằng cách gõ vào đoạn Code sau:

function ThienanBlog() {
  return (
    <div>Thienanblog xin chào các bạn độc giả</div>
  );
}

Đoạn code trên chắc chắn sẽ có rất nhiều bạn thấy dòng code “quái lạ”… làm thế nào mà có HTML gì đó ở trong đây vậy? Đó chính là JSX đấy các bạn ạ và nó là gì thì từ từ rồi chúng ta sẽ biết, đừng vội nản các bạn nhé. Và nội dung file App.js  sẽ như sau:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
function ThienanBlog() {
  return (
    <div>Thienanblog xin chào các bạn độc giả</div>
  );
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Chào mừng tới React tại Thienanblog</h1>
        </header>
        <p className="App-intro">
          <ThienanBlog />
        </p>
      </div>
    );
  }
}
export default App;

Sau đó, các bạn save lại và xem lại kết quả của chúng ta:

Lời kết

The post Tìm hiểu ReactJS và hướng dẫn cài đặt appeared first on Thien An Blog.