Creating A React App from Scratch: A Step-by-Step Process

React is a powerful JavaScript library for building user interfaces. Developed by Facebook, it simplifies the process of creating interactive and dynamic web applications. Here are some key points about React:

 

  • Component-Based: React allows you to build user interfaces by breaking them down into smaller, reusable components. These components can be combined to create entire screens, pages, and apps.
  • JSX Syntax: React uses JSX (JavaScript XML) syntax, which is a combination of JavaScript and HTML-like markup. JSX makes it easy to write and maintain components.
  • Interactivity: React components receive data and update the screen based on that data. When the data changes (due to user interactions or other events), React efficiently updates the UI to reflect the new state.

Requirement For Creating a First React App from Scratch:

 
To create a React app using Create React App, you’ll need the following:
 
Node.js: Make sure you have Node.js installed on your local development machine. The minimum required version is Node 14. You can download Node.js from nodejs.org.
 
Npm or Yarn: Create React App uses either npm or Yarn to install dependencies. You’ll need one of these package managers:-
 
npm: It is automatically included with your Node.js installation.
Yarn: If you prefer Yarn, make sure you have Yarn installed (version 0.25 or higher).
 

Hardware Requirements for building Simple React App from Scratch:

 
RAM: At least 4GB of RAM.
Storage Space: Approximately 10GB of storage space.
Once you have Node.js and npm or Yarn set up, you can create a new React app using the following methods:
 
  • open the terminal;
  • Run the following commands for test the version of node and npm;
1.Node –v
2.Npn –v
Step 1:start creating a react app
  • open vs code in your computer.
  • first of all create a new folder example- “React-Demo”.
  • and open this folder in vs code.
  • then open terminal and run following command.
npx  create-react-app  my-app
cd   my-app
npm start

this will create a new directory and start installing react in your computer after installing run command “NpmStart”  and press inter for check react app in your browser. you will show “localhost3000″ in your pc.

Step 2: Exploring structure of folder:

 

  • open the src-folder where we will do our most of work. here it contain the main component files app.js, app.css.  it is the root component of our work.
Step 3: Creating Simple react app page.
  • go to app.js file and select all by pressing ctrl+a and delete default code and paste following code:

making a amazon navigation bar using react.js source code 

import React from ‘react’;

import ‘./App.css’

const App = () => {

  return (

    <div>

      <div className =”navbar”>

        <div style={{ fontSize: ’50px’ }}>amazon</div>

        <nav>

          <a href=”/home” style={{ marginRight: ’10px’ }}>Home</a>

          <a href=”/about”>About</a>

          <a href=”/about”>contact us</a>

          <a href=”/about”>signup</a>

        </nav>

      </div>

      <h1>Hello, It’s my first React App!</h1>

      <h2>Happy Coding!!</h2>

    </div>

  );

};

export default App;

 in this step we will created a simple functional component called app. which returns a <div> element containing a <Nav> Navigation bar of amazon. and text in <h1> tag with text 

“Hello its my first React app”

Step 5: Start the development server in terminal by following command for seeing app in your browser ;

cd my-app

npm start

 this will start creating development server and you will see your First React App in your Browser

http://localhost:3004/

The app should display amazon navigation bar in your browser. 

thanks for  visiting our blog. you will see me in my next tutorial of web development.