REACT 18

Till now we have been creating projects manually .

But in real time manual creation of project is not encouraged.

For creating react application we use various bundle tools:

-webpack
-parcel
-vite

A bundler is a tool that takes all ur JS code along with assets like CSS images etc and combine them into a single file (can be few files) that can be served to browser.

Nodejs has in built support for webpack

project env can be setup using these tools.

NPM supports webpack bunding tool which is used to configure and create react application

Till date we have used react in traditional web application but now with the help of webpack we will create separate react application

Steps:
=>Open ur command prompt change the drive location to ur prefeerd workspace
=>use npx create-react-app project-name

now your project structure will be created :

-node_modules:library files installed in ur project
-public folder: it comprises of static resources like html,images,docs ,media files etc
-src: it comprised of dynamic files like .js,.jsx,.ts,.tsx,.css,.scss etc
-gitignore: configures the publishing of git
-package.json: it contains project metadata
-package-lock.json: it is used for migration
-Readme.md: Help doc for developers

We require a server to run a web-application.

React webpack will host our application on local server ,which will run on port 3000 (by default and can be changed) 

This tool will maintain server for our project

job of a server is when u make any request,server will listen to the request and send back the response

Note: Server doesn't start it listens.


open the project integrated terminal and run the command npm start

now the server will start listening

what is this npm start?
-npm start is like a batch program.It is going to execute steps defined inside a batch.

ex: npm i react
    npm i react-dom
    npm i bootstrap
    npm i bootstrap-icons

if we want all the individual commands to be executed at once we can define them under a batch program

ex:

go to package.file and inside scripts u will see lot of batch programs defined

ex: start
"start": "react-scripts start",

if we want to make a custom based batch program i can do it:

define a key ex: abhi
and define the steps for the key(i.e value) npm i bootstrap bootstrap-icons

-"abhi": "npm i bootstrap bootstrap-icons"

go to integrated terminal and use command as:

npm run abhi

bootstrap and bootstrap icons will be installed in ur node_modules


we wanted to design our own components:

first we will create our component:
-login.jsx
-login.css
-login.test.js



import "./login.css"
export function Login() {
    return (
        <div className="container">

            <form action="" className="form-login form-control alert alert-warning alert-dismissible">
                <h3 className="bi bi-person-fill">User Login</h3>
                <button data-bs-dismiss="alert" className="btn btn-close"></button>
                <dl>
                    <dt>UserName</dt>
                    <dd><input type="text" name="" id="" className="form-control" /></dd>
                    <dt>Password</dt>
                    <dd><input type="password" name="" id="" className="form-control" /></dd>
                </dl>

                <button className="btn btn-danger">Login</button>







            </form>









        </div>




    )
}