**Bootstrap sizes:6 classes

 Xtra small-mobile
 Small
 Medium
 Large
 Xtra large
 Xtra xtra large

Nav colors

Success,primary, secondary,light,warning,danger,dark,info

Forms

Enter label.form-label-> class name: form-label

Input tag: input.form-control

Button tag: button.btn.btn-success

REACT

In cmd Create project: npx create-react-app appname (appname should be one word—no space)

Go to project folder,open project using cmd

Start react:npm start

Create components

 src(right click)->new foldercomponents(right click)->new file.jsx(AddStudent.jsx)

 Component name should be First letter capital
 in AddStudent type rafce
 In div enter the code
 In App.js change the name in div like <AddStudent/>
 Need to close img tag
 Change class to className in card or anything else
 To add nav bar to all pages,create another component and add <navbar/>to all other
components

1.Create employee app

Add employee-empcode,name,designtn,salary,compny name.cmpny email,cmpny website,company

contact,dob,pincode,bloodgrp(dropdwn),pamchayat,village,username,emailed,pswd,confirm
password,register button
Search emp-empcode textbox,search btn

Delete emp-empcode textbox,dlt button

View all emp-12 emp data—empcode,name,designtn,salary in table structure

2. Movie app

Movie entry-movie id

Search: movie id

Dlt

View all: shopping card ui 12 movies

3. Vehicle app

Add vehicle.search,dlt,view all(12 vehicle in table)

12 more

1.To install the package we use npm I react-router-dom (if anything is running in the terminal the
we should terminate before installing)

2.Browser router-routesroute (route depend on how many link we have)

Inside App.js

<BrowserRouter>

<Routes>

<Route path=’/’ element={<AddStudent/>} />

<Route path=’/Search’ element={<SearchStudent/>} />

<Routes/>

< BrowserRouter/>

Without reloading the page we can load the page:

In navbar change <a to <Link and Href as to

JSON object: they are enclosed in {}

JSON Array: they are enclosed in[]

To declare an array

const [data,setData]=new useState(

{“name”:”jo”,”rollno”:12,”AdmissionNo”:98765},

{“name”:”jo”,”rollno”:12,”AdmissionNo”:98765},

{“name”:”jo”,”rollno”:12,”AdmissionNo”:98765}])

New shopping-app

Add

Pr title

Img

Price
category

submit

Viewall

Api link bind

New-User-app

Add user

View

Table format

Install axios(API call library)

Npn I axios

Api call axios.get(“link”).then()

const[data,setdata]= new useState([])
const getData=()=>{
axios.get("http://172.16.180.115:3000/visitors").then(
(response)=>{
setdata(response.data)
}
)
}
useEffect(()=>{getData()},[])

{
data.map(
(value,index)=>{
return <tr>
<th
scope="row">{value.vistorName}</th>
<td>{value.vistorPhone}</td>

<td>{value.PurposeOfVisit}</td>
<td>{value.vistorAadhar}</td>
<td>{value.vistorPlace}</td>
</tr>

}
)
}

Method:post

To create variable we can use let,const,var

Loging app

Login

User name and pass

Admin and 12345 success

BACKEND

Const – values cannot be changed

Var- values can be change(global)

Let- values can be changed(local)

App-

Company-app-backend

2 section- employees

/api/employee/add-add employee

/api/employee/view-view employee

/api/employee/search-search employee

/api/employee/delete-delete employee

Officer

/api/officers/add-add officers

/api/officer/view-add employee

/api/employee/search-add employee

/api/employee/add-add employee

Course-app-backend

Cou title

description

Venue

Duration

Date

Express is used for node

what is Git
git is a tool for source code management.
Version control systems are software tools that help software teams manage changes to
source code over time.
Benefits:
Managing and protecting source code.
Keep records of all the modification.
Comparison of earlier version.

 Eg: github
 Gitlab
 Bitbucket
 Apache subversion
 mercurial.

Centralized vcs
-single central server
-latest version
-cannot work if server is down
Eg:-subversion
Team foundation server

GITHUB

GitHub is an online software development platform. It's used for storing,

tracking, and collaborating on software projects.
Repository

A GitHub repository can be used to store a development project

Branch

A GitHub branch is used to work with different versions of a repository at

the same time.

By default a repository has a master branch (a production branch).

Any other branch is a copy of the master branch (as it was at a point in
time)

Commits

At GitHub, changes are called commits.

Each commit (change) has a description explaining why a change was made

Pull request

With a pull request you are proposing that your changes should
be merged (pulled in) with the master.

Pull requests show content differences

Git configuration

Configure the user name and email address

git config --global user.name “sumayya06”

git config –global user.email “[email protected]”

to push a project we need to complete 5 steps:

1. Init - git init // initialize a local git repository

2. Add - git add .
3. Complete - git commit –m “message” (message can be the project status)
 4. Remote add - git remote add origin link (project repository link)
5. Push - git push –u origin master

Git diff – to view the changes made

For only pushing the changes in the project we follow 3 steps:

1.add

2.commit

3.push

Versioning of GIT

Master or main are called branch and they are deliverable branch

Create a branch development from masteror main branch and from the development branch we can
create different branches according to our need like sum,multiply etc. if the code is correct then
commit and merge it to the development branch and then to the main branch.if we want to make
changes in the existing code of someone then we need to create a branch and then if it is correct
commit and merge.

git checkout –b development - to create new branch

git checkout master - to go back to the existing branch

git reset- undo local changes

git merge- merge a branch to an active branch.

Git status – to display all changes

fetch and rebase- git fetch // retrieving the latest changes from the remote repository without
merging

git pull –rebase // intergrating changes from one branch to another by reapplying commints on the
branch you’re rebasing onto

Git fetch command while updating your local repository with the new changes from the
remote repository. Git pull rebase command while executing the changes from the remote
branch onto your local branch.

Git command
  Git config:- configure username and email address

 Git add:-add one or more files to staging area.

 Git diff :- view the changes made to the file

 Git init:- initialize local git repository.

 Git commit :- saves all the changes

 Git reset :-undo all the changes.

 Git merge:- merge to or more branch to active branch

 Git status:-display all the state of files(files that have

created,deleted ,modified etc)

 Git push:- push contents from local repository to the server

 Git pull:- to fetch and download contents from remote repository and

update to local repository.

Git branch commands:

Git branch : display list of the local branches in ur git repository.

Advanced git

Git commit -am “ message” -can get rid of add command ‘-am’ will

automatically adds all the file in the current working directory

2. Amend
You can rename your current commit message using the `--amend`

flag and write the new message. This will help you with accidental

messages.
$ git commit --amend -m "Love"