filmov
tv
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)
# 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
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
YouTube keywords: #reactjs #webdevelopment #vscode #visualstudiocode
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
========================================
# Install NVM (Node Version Manager)
# 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
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
YouTube keywords: #reactjs #webdevelopment #vscode #visualstudiocode
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