How to Create a React app?
Hey, readers 👋. In this article, we are going to learn how to create a small react app using VS code ,nodeJS and parcel. Since we use Visual Studio code to create the app, please download and install it from here if you don’t have it on your computer. (for nodeJS use this link -nodeJS)
React — React is a Java Script library that we use to create interactive websites. Developed and maintained by Facebook and Instagram. Suitable for large web applications which use data and change over time without reloading the page(single page applications).
Here is the steps to create the react app. 👇
- First, let's create the environment by installing nodeJS on your computer.
- Then create a new folder in a preferred location on your computer.
- Open a command prompt in that location and type “code .” to add that folder as your vs code workspace.
4 . Then go to the terminal in the menu bar and select “Open a new terminal”(This will open a new terminal at the bottom of the window).
5. In the terminal, type “npm init” and press enter. This command will create a “package.json” file with some common keys and values. As you can see below, provide a description and an author in this process.
5. Finally after entering those details you will get a result like below and press “Enter” to complete the process.
6. Then we need to install the dependencies. Let’s install “parcel@next” as a dev dependency using “npm i -D parcel@next”. Here, “i” means install, and “-D” means dev dependency. Then we need to install react and react-dom. (“npm i react react-dom”)
7. Create two files named “index.html” and “index.jsx” in your work space.
8. Add <div> to index.html with “app” id.
9. Then import index.jsx inside the body tag.(below </div> tag).
10.Now,let’s go to the “index.jsx” file and import react. Then add following code to the index.jsx.
import React from 'react'; //importing react
import {render} from 'react-dom';
render(<h1>Welcome to React</h1>, document.getElementById('app'));// this code will display Welcome to react in your browser.
11. Before you run the code make sure to add “parcel index.html” in your “package.json” as the start script.
12. Wohoo!! 💃 now our application is ready. Let’s run it.oh how to run it? 😅 Just type “npm start” on previously opened terminal and hit Enter. (You will get an output like below.)
13. Then press “Ctrl” and click the link in the terminal. (Your browser will open a new tab on “htttp://localhost:1234” and display “Welcome to React.”)
😎 Happy right? You just learned the baby steps to create a react app.
Hope you liked it and thank you for reading!! 😍
Let’s meet again in another article. 🌿
Until then happy coding!!!! ❤️
