Wednesday, July 9, 2025

React Basic Setup and Add HTML




Steps to Set Up a React App with Node.js

Step 1:- 
Download and Install Node.js 

Step 2:- 
Create a React Project 
  • Open your terminal or command prompt and run:
npx create-react-app project name

Replace my-app with your preferred project name.





Step 3: Navigate to the project folder and open it in VS Code.
  • cd my-app (todos-list)
  • command:- code .
  • This will open the project in VS Code.

Step 4: Start the React App.
  • Open the terminal inside VS Code (Ctrl + ` ) and run

OR



⚠️ You wrote npn start — it should be npm start.

Step 5: Open the Browser.
  • After running npm start, your default browser should automatically open at http://localhost:3000, and your React app will be running.
Work

Step 1: Use javascript




Step 2: Create the variable.


Function-based component

Step 1: 
How to use HTML below the screenshot with opening and closing brackets.


example:-
                    return (
                                  < 
                                        <h3> Hello </h3>
                                        <p> My app works </p>
                                  < />
                                );

Step 2: User Bootstrap
  • Added the CSS (Head Section) and JS (After Body) files inside the index.html

    public/index.html

Step 3: - Bootstrap HTML add inside the app.js file.


Note:- Replace the class to classname.

example:-
                    return (
                                  < > 
                                        <h3> Hello </h3>
                                        <p> My app works </p>
                                        (Bootstrap HTML)
                                  < />
                                );


Next Tutorial:
Click here

No comments:

Post a Comment

If you have any problem please let me know.