introduction
React JS is the most popular JavaScript library for building dynamic user interfaces. It has become an essential tool in the web developer community. React JS is widely used by top companies like Apple, Facebook, Netflix, Instagram over 225,000 live websites. This article will guide you through Step-by-step building of React app from scratch.
Prerequisites
Before we dive in, ensure you have the installed the following in your computer:
- Install Node.js and npm on your machine. Download them from nodejs.org.
- Install Visual Studio Code from code.visualstudio.com.
Step 1: Setting Up Your Development Environment
- To set up a new React project, use the Create React App package.
- Avail the Create React App package using npx.
- Open your terminal and run the following command:
This command will create a new directory called my-first-react-app with all the packages.
Start the Development Server and open your new React app in the default browser using:
Step 2: knowing the Project Structure
The project directory should look like this:
public/: Contains the static files, including index.html where your React app is rendered.
Step 3: Creating the First Component
React components are the building blocks of a React application. Let’s create a simple functional component that renders a simple header. Open src/App.js in your text editor and place the below code:
Welcome to My First React App
Step 4: Creating Additional Components
Create a new file in the src directory called Greeting.js:
Hello, React Developer!
Welcome to My First React App
Step 5: Adding Interactivity with State
Using State in a Component
Add a button that increments a counter each time it’s clicked.
Modify Greeting.js to use the useState hook:
Hello, React Developer!
You clicked {count} times
The useState hook initializes a state variable count and a function setCount to update it. The button increments the count each time it’s clicked.
Step 6: Building and Deploying Your App
1. Build the App for Production
This command creates an optimized build of your app in the build directory.
2. Deploying the App into GitHub Pages
Install the gh-pages package:
Add the following scripts to your package.json:
“homepage”:”http://{username}.github.io/{repo-name}”, “scripts”: { “predeploy”: “npm run build”, “deploy”: “gh-pages -d build” }Initialize a Git repository, commit your code, and push it to GitHub:
Deploy your app:
Your app should now be live at
Conclusion
Finally, Our first React app was built and deployed successfully. This tutorial covered the basics of creating a React app including components, state, and deployment. To expertise in React JS, Join Credo Systemz React JS Training in Chennai. Gain the skills of React js, coding knowledge and practical experience. Expand your app’s functionality by adding advanced features. Happy coding!