What is React JS?
React lets you build user interfaces out of individual pieces called components.
React is SPA (Single page application) application. Components will be rendered based on routing.
What is a component?
React components are JavaScript functions which can be re-usable. In a simple word component is a re-usable function.What is a Pure Component?
React pure component which rendering the same output for same input.
Whenever the component always returning same output based on the input given which is called as pure component.
Example: const purecomp = (input) => {return input}
Example 2:
function Recipe({ drinkers }) {
return (
<ol>
<li>Boil {drinkers} cups of water.</li>
<li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li>
<li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li>
</ol>
);
}
export default function App() {
return (
<section>
<h1>Spiced Chai Recipe</h1>
<h2>For two</h2>
<Recipe drinkers={2} />
<h2>For a gathering</h2>
<Recipe drinkers={4} />
</section>
);
}
Extension:
React JS files can be created with the extension of .js.
Any react function which is returning it should have one div to return.
Re-Usability: We can re-use the component in other function/component.
Example:
StudentList.js
// Function as a component
export function StudentList() {
return (
<div>
<h2>Student 1</h2>
<h2>Student 2</h2>
</div>
);
}
Students.js
import StudentList from "./StudentList";
// Calling StudentList Function in another component
export function Students() {
return (
<div>
<StudentList />
</div>
);
}
Life Cycle:
Mounting > Updating > UnMounting
Mounting
Constructor:
Constructor is a method which is used to initialize the object state in class, It will be automatically called during creation of object in a class.When you implement constructor in the react component you need to call super(props) before calling any other statement otherwise this.props will be undefined in the constructor and can lead the bugs.
Example:
constructor(props){
super(props);
}
render()
ComponentDidMount():
Updating:
Static getDerivedStateFromProps():
shouldComponentUpdate():
render():
getSnapshotBeforeUpdate():
componentDidUpdate():
Static componentWillUnmount():
UnMounting:
Static componentWillUnmount():
What is Real Dom:
- Real DOM is the actual structure of the webpage.
- React Update complete document in the Real DOM.
- React DOM is the actual webpage rendered on the browser any changes made directly reflect on the complete webpage.
- The DOM represents the web page often called a document with a logical tree and each branch of the tree ends in a node and each node contains objects.
- The developer can modify the content of the document using a scripting language like JavaScript.
- The changes and updates to the DOM are fast because of its tree-like structure but re-rendering whole documents makes the DOM Slow.
- All UI components need to be re-rendered for every DOM update.
What is Virtual Dom:
- Virtual DOM is the virtual representation of Real DOM
- React update the state changes in Virtual DOM first and then it syncs with Real DOM
- Virtual DOM is just like a blueprint of a machine, can do changes in the blueprint but those changes will not directly apply to the machine.
- Virtual DOM is a programming concept where a virtual representation of a UI is kept in memory synced with “Real DOM ” by a library such as ReactDOM and this process is called reconciliation
- Virtual DOM makes the performance faster, not because the processing itself is done in less time. The reason is the amount of changed information – rather than wasting time on updating the entire page, you can dissect it into small elements and interactions
