FRONTEND BOOTCAMP

Session #3
React. JS

• Need of React
• How React works
• HTML vs JSX
• Components in React
• Life-cycle methods vs Hooks
• Todo react web app
Need of React
Need of React

Conventional web development requires more effort to build and
maintain UI, and can result in more code duplication
How React works
 HTML vs JSX

JSX stands for JavaScript Syntax Extension or JavaScript XML.

Before JSX, we had to update HTML from JavaScript using DOM
manipulation. But JSX allows developers to write HTML-like code directly
in their JavaScript code.

JSX also allows developers to easily integrate dynamic data and logic into
their user interfaces. By using JavaScript expressions within curly braces
 Components in React
Two types of components in React:
1) Class Component
2) Functional Component
Components in React

Functional components are defined as JavaScript functions that return
React elements.

Class components are defined using ES6 classes that extend the
React.Component class.
 Life-cycle methods

Class components supports life-cycle methods that
represents the over all span of components and
their manipulations.
Life-cycle methods
Hooks
Hooks are functions that let you “hook into” React state and lifecycle
features from function components. Hooks don't work inside classes —
they let you use React without classes
UseState hook
The React useState Hook allows us to track state in a function
component.

State generally refers to data or properties that need to be tracking in

an application.
UseEffect hook
The useEffect Hook allows you to perform side effects in your
components.

Some examples of side effects are: fetching data, directly updating the
DOM, and timers.

useEffect accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)
Thank You!
Make sure to join us in the next session!!