React JS -Fundamentals (Part-1)
Topics which is covered -
- What is React and How it’s work?
- JSX vs Pure React js.
- React Component — Function and Class Component.
- Function Component vs Class Component.
- Interactive Component using States.
- Iterating the list in React.
What is React?
React is a declarative, efficient, and flexible library for building dynamic user interfaces.
React creates a 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 the browser DOM.
React finds out what changes have been made, and changes only what needs to be changed.
JSX vs Pure React js
React is all about Components and it lets you compose complex UIs from small and isolated pieces of code called “components”.
React has a few different kinds of components, but we’ll start with Class Component:
If there is a
constructor() function in your component, this function will be called when the component gets initiated.
The constructor function is where you initiate the component’s properties.
Props are arguments passed into React components and passed to components via HTML attributes.
Function component also returns HTML and behaves pretty much the same way as a Class component.
Function vs Class Components
Remember Props are read-only objects so we have a state to make UI more interactive.
React components has a built-in
state object. The
state the object is where you store property values that belong to the component.
state object changes, the component re-renders and
setStateto update the state of the objects.
Iterating the list in React
If you like the tutorials give a clap, soon I will publish part -2 of fundamental.