We are going to install and set up React JS project file in vs code. React JS is a popular Javascript library used to build single-page user interfaces. Visual studio code is the most popular IDE, that uses for building and debugging modern web and mobile applications.
Vs code is popular for free thousand of extension and intelligent code completion. If you want to build large projects like react app, multipage websites, and dynamic websites then vs code best is your choice.
What is React JS?
React is the Popular Javascript framework that use to build single-page applications. React allows us to create reusable UI components. It is maintained and developed by Facebook. Many big and small startup companies use ReactJS to build fast-loading user interfaces.
How to Setup React JS Project?
1. Install Node JS & NPM
You need to install Node JS on your machine. To install Node JS go to nodejs.org and choose to update the LTS version. You can also install the current version but the LTS version is recommended by most users.
Tips: To test that you have Node JS correctly installed on your machine, you can type node --version in a terminal or command prompt.
NPM stands for Node Package manager which is used to download packages directly from your terminal. You need to install NPM on your computer. To download NPM, go to npmjs.com and create an account to access all features.
If you download Node JS then NPM automatically installs on your machine. To test that you have NPM correctly installed on your machine, you can type NPM --version in a terminal or command prompt.
3. Install Visual studio code
Visual studio code helps to easy to build large web and app development projects. Vs code is a free text editor tool that you can install from visualstudio.com and download a stable version.
You may use other text editors like Sublime Text, Brackets, notepad ++, and atom. Most Developers use visual studio code. Vs code provides many features like thousand of free extensions, terminals, debugging, file handling, and more.
4. Create React App
To install react app, You can use any terminal like CMD, Powershell. You can also use vs code pre-build terminal to install react app.
Now you can create react app by type:
npx create-react-app new-app
where the new-app is the name of your folder for your application. It takes few minutes to create react app.
Tip: If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.
5. Open React App in vs code
To open your react app in visual studio, open another terminal and Navigate the new-app folder, and type code.
cd my-appcode .
6. Run React App in Browser
After setup your react app, you can open your app in the browser. Open the new terminal in vs code and navigate or type cd new-app then type npm start.
cd new-appnpm start
Now, You can see your app preview in the browser. If you can composing these steps then you can also read react js documentation and watch YouTube tutorials.
Common Questions
2. Best Text Editor for web Development
- Visual Studio
- Sublime Text
- Atom
- Brackets
- Notepad ++
3. Best visual studio Extension
- Live Server
- Material Theme
- Live Saas Compiler
- JavaScipt Snippets
- Live Share
1. Which is better NPM and Yarn?
In terms of speed, yarn easily trumped NPM. Yarn installs a number of packages at once as compared to the NPM, which installs each one at a time, throughout the installation process. While NPM provides the caching feature, Yarn's seems to be much better.