Hướng dẫn chạy Reactjs trên Visual Studio Code

19:33 04/03/2024

Visual Studio Code (VSCode) là một trình soạn thảo mã nguồn mở và miễn phí được phát triển bởi Microsoft. Trong bài viết này, FPT Polytechnic sẽ giới thiệu chi tiết cách sử dụng reactjs trên visual studio code.

Giới thiệu công cụ lập trình Visual Studio Code

Visual Studio Code do Microsoft phát triển, là sự kết hợp hoàn hảo giữa IDE (môi trường phát triển tích hợp) và Code Editor (trình soạn thảo mã nguồn). Visual Studio Code miễn phí, nhanh, nhẹ và chạy tốt trên cả 3 nền tảng Windows, macOS và Linux. Với những ưu điểm này, Visual Studio Code trở thành công cụ lập trình được dùng phổ biến nhất hiện nay. 

Visual Studio Code sử dụng Electron, một nền tảng để triển khai các ứng dụng Node.js máy tính cá nhân, được phát triển dựa trên trình biên tập của Visual Studio Online. 

Một số ưu điểm của Visual Studio Code:

  1. Visual Studio Code có khả năng mở rộng và tùy chỉnh: Đây là điều tuyệt vời nhất của Visual Studio Code. Thông qua kho extensions phong phú Visual Studio Code hỗ trợ lập trình nhiều ngôn ngữ khác nhau, ngoài ra còn tùy chỉnh theme, kích thước, font chữ, keyboard shortcut, coding style, tính năng.
  2. Visual Studio Code có khả năng tích hợp Git: Cung cấp đẩy (push) và kéo (pull) code trực tiếp từ Visual Studio Code.
  3. Visual Studio Code khả năng tích hợp Terminal: Cung cấp giao diện cửa sổ dòng lệnh.
  4. Visual Studio Code Debugger: Hỗ trợ gỡ lỗi cho rất nhiều ngôn ngữ lập trình.
  5. Visual Studio Code có Code Spell Checker: Cho phép kiểm tra tên hàm, ghi chú, tên biến sai chính tả.
  6. Visual Studio Code cung cấp khả năng tự động hoàn thành mã (autocompletion) để giúp viết mã nhanh hơn và tránh sai sót cú pháp.
  7. Visual Studio Code Intellisense: Là sự kết hợp giữa trí tuệ nhân tạo và tự động hoàn thiện code. Intellisense cung cấp cách viết tắt, gợi ý và mô tả ngắn khi viết code. Những gợi ý sẽ được tính toán dựa trên nhiều nhân tố như: cú pháp, ngôn ngữ lập trình, hàm, biến.
  8. Visual Studio Code có phiên bản cho Windows, macOS và Linux, giúp bạn làm việc trên nhiều hệ điều hành khác nhau mà không cần thay đổi quá nhiều.
  9. Visual Studio Code có thể mở terminal trực tiếp trong VSCode, giúp bạn thực hiện các lệnh hệ thống và quản lý dự án một cách dễ dàng.
  10. Visual Studio Code có một cộng đồng đông đảo, và Microsoft liên tục cập nhật và cải tiến ứng dụng, đảm bảo tính ổn định và tính năng mới.

Sử dụng Git Bash với Visual Studio Code

  • Tích hợp Git Bash vào Visual Studio Code
  • Mở 1 terminal mới trong VS Code (Ctrl + Shift + ` ) hoặc Termial -> New Terminal
  • Chọn Git Bash
  • Kiểm tra phiên bản Git 
  • Nhập lệnh sau để kiểm tra: git –version

Hướng dẫn cài đặt 

Visual Studio Code

Truy cập địa chỉ: https://code.visualstudio.com/download để tải bản cài đặt 

Chọn hệ điều hành Windows, Linux, macOS và phiên bản 32bit, 64bit:

Xong ta được:

NodeJS 

ReactJS chạy trên môi trường NodeJS. Vì thế cần cài đặt môi trường NodeJS để có thể lập trình ReactJS. 

Node.js là một môi trường chạy mã JavaScript phía máy chủ, được xây dựng trên JavaScript Engine V8 của Google Chrome. Nó cho phép bạn thực hiện mã JavaScript không chỉ trên trình duyệt mà còn trên máy chủ, mở ra nhiều cơ hội trong việc phát triển ứng dụng web và dự án phía máy chủ. 

Các bước để cài đặt NodeJS:

Tải Node.js tại đây: https://nodejs.org/en/download/

Có nhiều định dạng: .msi cho Windows, .zip cho Linux, .pkg cho macOS. 

Tiến hành chạy file cài đặt, ta chọn Next để tiếp tục.

Đồng ý với các điều khoản người dùng cuối và chọn Next.

Mặc định, Node.js sẽ được cài đặt ở ổ đĩa C, ta giữ tùy chọn này và chọn Next.

Các tùy chọn của chương trình, tương tự ta giữ tùy chọn này và chọn Next.

Xác nhận lần cuối trước khi cài đặt, ta chọn Install.

Và bắt đầu quá trình cài đặt.

Sau khi quá trình cài đặt hoàn tất, ta chọn Finish.

Tạo React App 

Nhập lệnh sau vào cửa sổ dòng lệnh: npx create-react-app hello-world

Sau đó mở trong Visual Studio Code bằng câu lệnh: cd hello-world && code .

Mở terminal (Ctrl + Shift + `) và nhập lệnh sau để khởi động máy chủ Node và chạy ứng dụng: npm start

Để kiểm tra ta mở trình duyệt và truy cập vào localhost:3000.

Trên đây là hướng dẫn chi tiết cách cài đặt reactjs trên visual studio code. Hy vọng các bạn sẽ thực hiện thành công!

Giảng viên Phạm Tùng Dương
Bộ môn Ứng dụng phần mềm
FPT Polytechnic Hà Nội

Cùng chuyên mục

Đăng Kí học Fpoly 2024

  • Max. file size: 50 MB.
  • Max. file size: 50 MB.
  • Max. file size: 50 MB.