There are multiple ways you can write react.js code and execute it. But the convenient way is to use create-react-app. It comes with full packaging of inbuild server, Webpack, Babel, ESLint, Testing configuration and lot more.
You just need to focus on your code and not to worry about the basic configuration.
Let’s look at the steps to setup create-react-app.
Requirements:
- Node.js
- Visual Studio Code
Step 1: Install Node.js
Go to node.js website. In the LTS section, click on windows or mac.
Setup will get download according to your system requirements. Install the setup.
After installing node.js, open command prompt. Type node -v and npm -v commands one by one. If node and npm are installed correctly, then these commands will return you their respective version numbers.
Step 2: Install Visual Studio Code
Visual Studio Code is the free and open-sourced code editor. It is one of the top most editor used especially for JavaScript application development.
You can download Visual Studio Code according to your OS and system requirements. After download, install it. After opening, it will look like this.
Step 3: Install create-react-app
Create empty folder in any drive. Now, in the Visual Studio Code select File -> Open Folder and select the empty folder you have created and click on Select Folder.
We have created below empty folder.
Selected the same in Visual Studio Code.
Then, go to the Terminal in Visual Studio Code and click on New Terminal. Terminal window will get open below for your selected folder path.
Type command npx create-react-app my-app and hit enter. Installation will get start and it will take some time.
Note: You can give any name instead of my-app.
After installation is successfully completed, you will get below screen.
Step 4: Starting Application
To start application you have to change directory first. So Type command as given in the above screen.
Type cd my-app and hit enter.
After that type npm start and hit enter. Your my-app application will get open in the browser. It should be hosted at http://localhost:3000/ url.
If you don’t want to work with create-react-app then you can always work with React.js and Next.js.
Note: set default browser in React.js as per your choice.
That’s it.