How To Setup ReactJS In VSCode (Install And Run React JS App In Visual Studio Code) 2024
Like the video 🙂 and follow instructions below:
========================================
Install NVM (Node Version Manager)
curl - o - https://raw.githubusercontent.com/nvm... | bash
do not add space between - and o and - on line above
(you tube rewrites it to o without spaces)
Load NVM (may vary depending on shell)
source ~/.bashrc # or ~/.zshrc for zsh users
Install the latest LTS version of Node.js
nvm install --lts
Install create-react-app globally
npm install -g create-react-app
Create a new React app
npx create-react-app my-app
Navigate into the project folder
cd my-app
Open VSCode in the project folder
code .
Start the development server
npm start
Learn how to set up a React JS app in Visual Studio Code with this quick and easy tutorial. If you're searching for terms like install React in VSCode, run React app VSCode, create React app command line, set up React environment, install Node.js for React, how to start React project, VSCode React setup, React JS tutorial for beginners, launch React app in browser, or React hot reload in VSCode, then you're in the right place.
YouTube keywords: #reactjs #webdevelopment #vscode #visualstudiocode
In this tutorial, you'll first install the latest version of Node.js using NVM (Node Version Manager) right from the command line. I'll guide you step-by-step on how to validate your installation and ensure everything is working correctly.
Once Node.js is ready, you'll learn how to create a brand new React app from scratch using the terminal in VSCode. We'll cover the commands to install create-react-app globally and how to use it to build your first React project effortlessly.
After setting up your app, I'll show you how to launch it locally using the npm start command, which will open your app in the browser and start the development server with hot reload enabled for quick updates.
Finally, we’ll explore how to open your React project in Visual Studio Code for easy editing and debugging. With this setup, you'll be ready to start developing React applications efficiently in no time!
Timestamps:
00:00 how to install and run react js apps in vscode (visual studio code)
00:18 how to install latest version of nodejs using NVM (node version manager) from command line
00:44 validate the nvm version with source bashrc or zshrc
00:57 Creating first react js app in vscode from scratch on command line
01:10 how to check which version of nvm I have currently installed from command line (terminal)
01:27 how to install latest LTS version of node with nvm on command line (terminal, macOS)
01:57 how to create new (first) react js app in vscode from visual studio code terminal (command line)
02:18 npm install -g create-react-app
02:50 how to launch or start new react js app from vscode to run at localhost in browser (npm start)
03:09 how to open react js project folder in vscode for editing with hot reload
04:07 opening reactjs app from command line on macOS in terminal using code command
