What is React?
react is JavaScript library for building user interfaces
developed at Facebook and released to the world in 2013
How does react work?
react creates virtual DOM in memory
instead of manipulating the browser's DOM directly, react creates a virtual DOM in memory, where it does all the necessary manipulating before making the changes in browser DOM
React only changes what needs to be changed!
why React?
1.Easy creation of dynamic application
2.reusable components
3.dedicted tools for easy debugging
VIRTUAL DOM
the virtual DOM is only a virtual representation of the DOM.
When new elements are added to the
UI, a virtual DOM, which is
represented as a tree is created.
● Each element is a node on this tree.
If the state of any of these elements
changes, a new virtual DOM tree is
created.
● This tree is then compared with the
previous virtual DOM tree, the
virtual DOM calculates the best
possible method to make these changes
to the real DOM. This ensures that
there are minimal operations on the
real DOM.
React APP Structure
** JSX**
JSX stands for JavaScript XML and allows us to write HTML in React.
Coding JSX
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() or appendChild() methods.
Expressions in JSX
with JSX you can write expressions inside curly braces {}.
the expression can be variable, property, or any other valid JavaScript expression. JSX will execute the expression and return the result.
React Components
Components are independent and reusable bits of code.
Components com in two types, class components and function components
Components are like functions that return HTML elements.
Component represent the part of user interface, before React Hooks, when we want to create a dynamic component, we have to create a class component and use lifecycle methods to change states to make it reusable and encapsulate.
It is regular ES6 classes that extends component class form react
library, also known as “stateful” components because they implement
logic and state.It must have render() method returning html.
● Functional component :
const App = ( ) => {return (<h1> Hello </h1>)};
● Class component :
class App extends Component{
render( ){
return (<h1> Hello </h1>)}
};
Component lifecycle
there are 3 phases in React component :
● Mounting
● Updating
● Unmounting
Mounting
When mounting you have 4 lifecycle methods :
1.Constructor
the constructor is the first method that is called when mounting a component.
- render() from the render() method you return the JSX that builds the component interface.
3.ComponentDidMount()
this method is the one that you will use to perform API calls, or process operation on the DOM.
Updating
1.ComponentDidUpdate()
this method is called when the component ha been updated in the DOM.
** Unmounting**
● componentWillUnmount()
The method is called when the component is removed from the DOM. Use this to do any sort of cleanup you need to
perform.
Props and State
- Components need data to work with. There are two different ways that you can combine components and data: either as props or state.
Props
props is short for properties and they are used to pass data between react components. React data flow between components is uni-direction (from parent to child only)
in a class component, props are passed by default. there is not add anything special , and they are accessible as this.props in a Component
instance.
_React props can be of any data type, including variables, numbers, strings, objects, arrays, and more.
Strings can be sent inside quotes as in the examples above, but numbers, variables, and objects need to be sent inside curly brackets._
State
● special built-in object called state, which allows components to create and manage
their own data.
● In the Component constructor, initialize this.state
● Can Update state using this.setState() method
● Don’t mutate ( change ) state directly , always use setState( ) method to change
state value that cause this component to rerender and update view
Handling Events
Handling events with React
elements is very similar to
handling events on DOM
elements.
Example :
<button onClick={addUsers}>
Add Users
</button>
Comparison Table: Functional Components vs. Class Components
Single page application
`
Top comments (0)