This Test Will Show You Whether You’re An Expert in react Without Knowing It. Here’s I talk about How I Improved My react and How It Works
React is a front-end JavaScript library developed by Facebook in 2011. It follows the component based approach which helps in building reusable UI components. It is used for developing complex and interactive web and mobile UI. Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.
As of now, React is the most popular front-end technology that more and more companies are using.
The features of React:
1.JSX: JSX is a syntax extension to JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code. Example:
Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object
For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel
2. Components: Components are the building blocks of any React application, and a single app usually consists of multiple components. It splits the user interface into independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function.
Components come in two types, Class components and Function components. Example:
i) Class components: When creating a React component, the component’s name must start with an upper case letter.
The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions. The component also requires a render() method, this method returns HTML. Example:
ii) Function Component: Here is the same example as above, but created using a Function component instead.
A Function component also returns HTML, and behaves pretty much the same way as a Class component, but Class components have some additions. Example:
3. DOM: DOM stands for Document Object Model. The DOM represents an HTML document with a logical tree structure. Each branch of the tree ends in a node, and each node contains objects. Examole:
React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.
i) Virtual DOM: Virtual DOM updates faster and it can’t directly update HTML. Its updates the JSX if element updates. Virtual DOM manipulation is very easy and no memory wastage.
ii) Real DOM: Real DOM can directly update HTML. It updates slow and creates a new DOM if element updates. Real DOM manipulation is very expensive and also too much of memory wastage.
4) One-way data-binding: React’s one-way data binding keeps everything modular and fast. A unidirectional data flow means that when designing a React app, you often nest child components within parent components.
5) High performance: React updates only those components that have changed, rather than updating all the components at once. This results in much faster web applications.
6) Arrow function in React: An arrow function is a short way of writing a function to React. It is unnecessary to bind ‘this’ inside the constructor when using an arrow function. This prevents bugs caused by the use of ‘this’ in React callbacks. Example:
7) Lists in React: We create lists in React as we do in regular JavaScript. Lists display data in an ordered format The traversal of lists is done using the map() function. Example:
8) Synthetic events in React: Synthetic events combine the response of different browser’s native events into one API, ensuring that the events are consistent across different browsers. The application is consistent regardless of the browser it is running in. Here, preventDefault is a synthetic event. Example:
i) Require vs Import:
ii) Export vs Exports:
iii) Props:
iii) State:
Thank you!
