• The Complete Guide to Installing React JS: Step-by-Step Instructions

    React.js is an open-source JavaScript library developers use to build User Interfaces ( UIs)/ You can use React.js for component building that represents logically reusable parts of the UI. Being an open-source library, users get the actions to access the source code, inspect, and modify this. 

    Find the ways to install React.js into your project from the upcoming part.

    Step 1- You Need Node.js Installation First 

    Before proceeding with the React.js installation, you need to install Node.js first. Being a javascript library, React.js needs a runtime environment like Node.js for running javascript on the server side. Among the different available versions, the best version would be the latest and most stable version of Node.js.

    For Node.js installation, go through the Node.js website. On the web page, you will get the option to download the recommended or current version.

    After downloading your preferred version, install it on your system.

    Once the installation is done, open the command prompt to confirm that Node has been successfully installed. Type in node -v in your command prompt. After that click the enter button. This command will show the recent Node version installed on your computer.

    Step 2- Install React 

    Now you are all set to install React into your project. 

    At first, we’ll check the “traditional” way of React installation, using create-react-app (CRA), so you can know about the process. Then we’ll dive into the ways of installing it using the modern Vite build tool.

    React.js Installation Using CRA

    In the command prompt window, explore the directory you want to use in React project creation.

    For this cause, type cd [directory name] then click on enter.

    As presented in the image above, now we will explore the documents directory, where we want to install React.js

    In the documents directory or in the place, create the folder you will use for creating the React app. 

    Then type mkdir [folder name]and the newly created directory using cd [newly created folder name].

    In the newly created folder directory, type in npx create-react-app [project name of your choice], and then wait for the complete creation of your React.js project.

    The final section is supposed to come with a text in the image presented below.

    And now open the React project in your code editor. Do this by typing in code.  Your code editor will look like this if you use the VS code.

    Now different advanced tools are available that help React app creation more easily. Vite is one of those key tools.

    How to use Vite for React.js Installation?

    It is an amazing modern tool that can be used for faster and reliable React app creation.  Just like using CRA, here also you need to be sure of the fact that you have a node installed in your system.

    After doing this,  navigate to the preferred directory and create a new folder using your preferred name.

    Now, open the newly created folder in the code editor (VS code)

    In this step, open the terminal presented in the image above.

    After that run npm create vite@latest [your project name].

    Then you will be asked to select the framework that you want to install. After that click on Enter.

    After the framework selection, now choose the language that you want to use. 

    When all these steps are done, now you will be able to see the React files on your system, and it will look like this.

© 2024 Euphoriagenx. All Rights Reserved