in one website there are multiple component

• In src folder, we need to put our component

• In component, we need to send props and state

Component's props

Suppose there is a templet, so we need fill with some details. Means the details inside of component known as props

Component's state

Based on the user interaction or some http request/response change component details known as Component's state

• Now open index.html under public folder

• Now open SRC folder, you can find out APP.js and index.js there are two component

• index.js is entry point

App.js

• Now you need to run by using below command

npm start

Then it will run on localhost:3000

Now, it is running the app.js component is showing on screen

• Now you can add more components in App.js component

• If you want build for production then below command we need to run

npm run build.

Component types

• Class Based Component --> initial das react is using class base component. Mean it was creating class

• Function Based Component --> Now day react is using function based component

callback function

JavaScript is asynchronized execution and callback method will call after some time period

promise

The promise can fullfill or reject

Wt is JSX

• JSX produces React “elements”.

• JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax

• The benefit is inside html you use JavaScript by using {}

• Here you need to use className for CSS class

• In Html using label by using for but here used htmtFor

• In JSX you can return only one tag

Types of props

props is also known as properties

create a folder called component in the src folder

State and Handling Event

State is nothing but it is hook

Hook

• Hooks were added to React in version 16.8. Hooks let you use state and other React features without writing a class.

• Although states have largely replaced classes in React, there is no plan of removing classes from React.

• Things you need to keep in mind while using hooks:

• You must import hook first

• You must import it from react

• Hooks can only be called in React Function Components, meaning:

where text is variable with default value Enter text here and you can value by using setText

React Router Setup

• Router is saying instead of bring all data from server. Pick on particular component data

Now we need to install Router

npm install react-router-dom

All theory link? Link

• React JS Installation Answer

• Creating our first react app using create-react-app Answer

• JavaScript Refresher Answer

• Wt is JSXAnswer

• Setup Adding Bootstrap to React Answer

• Props and PropTypes in ReactAnswer

• State & Handling Events in React or hook Answer

• How can create custom hook in react?Answer

• Adding + Auto Dismissing Alert Messages Answer

• Changing title dynamically & adding favicons Answer

• React Router Setup + Usage Answer

• Setup + Introduction to Class based components Answer

• Redux is use state management for big web site Answer

Interview Question Answer