Cách cài đặt reactjs visual studio code

Bài viết được sự cho phép của BBT Tạp chí Lập trình

Giới thiệu chung

ReactJS là một thư viện JavaScript dùng trong việc xây dựng giao diện người dùng và được phát triển bởi đội ngũ Facebook. Tới nay, ReactJS đã thu hút hàng triệu lập trình viên trên thế giới.

React được sử dụng để xử lý ở tầng view cho các website và mobile app, cho phép ta tạo nên các Reusable UI components. React là 1 trong những thư viện JS phổ biến nhất hiện nay, có nền tảng vững chắc cùng với 1 cộng đồng developer vô cùng lớn đằng sau nó. Bạn sẽ không hối hận khi học nó đâu.

Không dài dòng nữa, chúng ta bắt đầu thôi!

1/ Thiết lập môi trường

• 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)

2/ Cài đặt

Chúng ta sẽ tiến hành cài đặt ReactJS thông qua Package đã được viết sẵn bằng cách gõ vào lệnh vào Command Prompt/Windows Powershell hay Terminal trên Mac và Linux:

 npm install -g create-react-app

Sau khi cài đặt hoàn tất, các bạn có thể gõ tiếp lệnh theo cú pháp sau:

 create-react-app my-app

Đây là kết quả sau khi cài đặt thành công:

Đây là kết quả hiển thị

Bây giờ chúng ta có thể chạy thử:

 cd my-app yarn start

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:

File app.js

Chúng ta sửa lại nội dung trong file App.js:

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

function App() {
  return (
    

            Hello World!!!
    
  );
}

export default App;

Ngay lập tức sẽ hiển thị kết quả như sau:

Kết quả hiển thị

Trong index.js chũng ta thấy đoạn code, ở đây được dùng load file App.js khi khởi tạo chương trình.

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';


ReactDOM.render(

  

    

  ,

  document.getElementById('root')

);

Bạn thắc mắc không biết Id root ở đâu? Bạn để ý trong project mình có 1 thư mục là public, bạn mở nó ra thấy 1 file index.html mở nó ra và bạn sẽ thấy 1 div với id root như hình:

Đây là file HTML chính của chúng ta, tất cả component sẽ được load ở đây.

Lời kết

Như vậy, chúng ta đã tìm hiểu ReactJS và cách cài đặt như thế nào, tự viết hiển thị Helloworld đầu tiên bằng ReactJS.

Các bạn chờ đợi bài tiếp theo nhé!

Author: Nguyễn Trung Kiên

Bài viết gốc được đăng tải tại Tạp chí Lập trình

Có thể bạn quan tâm:

• [Recap] ReactJS & ReactNative thực chiến
• Elixir – Ngôn ngữ được viết bằng macros
• Xây dựng một ứng dụng trò chuyện bằng ReactJS trong 10 PHÚT (Phần 1)

Xem thêm các tuyển dụng ReactJS hấp dẫn tại TopDev

Không biết mọi người sử dụng Code Editor nào để viết ứng dụng React? Bản thân mình thì trung thành với Visual Code (mọi người hay viết tắt là vscode). Đây là trình code editor nhỏ gọn, nhưng lại nhiều tính năng, được hậu thuẫn bởi ông trùm Microsoft.

Điều mình thấy tâm đắc nhất ở vscode đó chính là kho extension hấp dẫn, cũng toàn miễn phí cả. Nếu bạn đang sử dụng VS Code thì mình khuyên nên thử các extension dưới đây, tăng hiệu suất công việc lên đáng kể đấy.

Trước khi mình giới thiệu các extension, mình sẽ nói qua cách cài đặt extension trong VS Code đã nhé.

Nội dung chính của bài viết

• Cài đặt extension trong VS Code
• 5 vscode extensions hữu ích
  • ESLint
  • Open native terminal
  • React PropTypes Generate
  • Reactjs code snippets
  • VSCode React Refactor

Cài đặt extension trong VS Code

Visual code tích hợp extension market luôn trong ứng dụng, nên việc cài đặt extension rất đơn giản. Bạn chỉ vào biểu tượng extension, gõ tên extension muốn cài đặt -> chọn extension -> nhấn nút install.

Thông thường thì sau khi cài xong là bạn có thể sử dụng được luôn. Tuy nhiên, cũng có một vài ngoại lệ, bạn cần khởi động lại VS Code thì extension mới có hiệu lực.

ESLint

Đây là tiện ích mà có lẽ hầu như ai cũng nên cài đặt. Nó giúp cho mã nguồn của bạn chất lượng hơn, hạn chế những lỗi tiềm tàng. Về cơ bản thì extension này đơn giản là tích hợp thư viện ESLint vào VS Code. Nếu bạn chưa biết ESLint là gì, mời bạn đọc tài liệu này.

Extension này sử dụng thư viện ESLint được cài đặt trong thư mục workspace mà bạn đang mở. Nếu mà thư mục này không có thì nó sẽ tìm thư viện ESLint trong máy tính.

Nếu bạn chưa cài đặt ESLint thì đơn giản gõ lệnh sau để cài:

npm install eslint --save-dev

Open native terminal

Việc phải duyệt qua lại giữa các thư mục (sử dụng lệnh “cd ”) trong terminal thật là mệt mỏi . Tiện ích nhỏ này giúp bạn mở terminal  và con trỏ đang ở thư mục gốc dự án luôn.

Bạn có thể mở terminal ở bất kỳ đâu, chỉ đơn giản là chuột phải và chọn ” Open in native terminal (current folder)” hoặc “Open in native terminal (root folder)“.

React PropTypes Generate

Việc phải thêm các propTypes thủ công rất thời gian. Tiện ích này sẽ tự động tạo propTypes. Bạn chỉ việc chọn component và  nhấn tổ hợp phím ” ctrl + shift + alt + p”. Tiện ích này khá giống với ReactPropTypes trong Jetbrains’s Platform.

Reactjs code snippets

Mỗi khi bạn tạo một file mới, thông thường bạn sẽ phải tự thêm các component skeleton, component có thể là một class, function, hooks, redux… Tiện ích này sẽ giúp bạn tạo tất cả các đoạn mã đó chỉ với một nhấp chuột.

Reactjs code snippet có sẵn các đoạn mã cho React dựa trên babel-sublime-snippets package. Reactjs code snippets có khoảng 50 đoạn mã khác nhau, hỗ trợ 4 ngôn ngữ (file extensions):

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)

VSCode React Refactor

Bất kể dự án nào, viết bởi ngôn ngữ gì thì đều nên viết code thật clean, tuân thủ các nguyên tắc viết code. Với dự án React cũng vậy. Nếu một ngày, bạn nghĩ mình cần phải refactoring lại mã nguồn dự án thì đây chính tiện ích dành cho bạn.

Một vài tính năng hữu ích của tiện ích này:

• Hỗ trợ Extract JSX element thành một file hoặc function
• Hỗ trợ cả TypeScript và TSX
• Làm việc tốt với cả Class, function và arrow functions.
• Xử lý key attribute và function bindings
• Làm việc tốt với các Hooks API mới.

Như vậy là mình đã giới thiệu xong 5 vscode extensions hữu ích. Bạn có sử dụng các vscode extensions trên không? Ngoài ra, còn extension nào hay ho nữa không? Hãy để lại bình luận ở bên dưới nhé.

Đọc thêm về React:

• React Hooks – Có gì hấp dẫn?
• Hướng dẫn học ReactJS trong 5 phút dành cho người mới
• Sử dụng Context trong React theo cách đơn giản nhất