React JS
PropTypes: PropTypes imply that components use the correct data type and pass the right data. And it is further understood that these components use the right kind of props and the obtained components get the right kind of props.
State-props: The main difference between props and states is that states are internal and controlled by components.
JSX: JSX is an inline markup that looks like HTML but is converted to JavaScript. JSX expressions start with HTML-like open tags and end with closing tags. JSX tags support XML self-close syntax so that the closing tag can be optional.
Component Lifecycle: Each element of the reaction has a life cycle that we can observe and manipulate in its three main stages. There are three stages: Mounting, Updating, and Unmounting.
Hooks: React Hook is a simple JavaScript function that is included inside the React library. These functions are similar to Hooks and can be used with React Hooks where needed.
Custom hooks: A custom hook is a JavaScript function. This custom hook is used to share arguments among other JavaScript functions. We make custom hooks ourselves.
Example: import { useEffect, useState} from "react"
const addProducts = ()=>{
const [ products, setProducts] = useState([]);
useEffect(()=>{
fetch('./product.JSON')
.then(res=>res.json())
.then(data=> setProducts(data));},[])
return [ products, setProducts ];}
Context API: Context API is used to send the components of the app through props from any place in any way from the app
Virtual DOM: Virtual DOM is a programming concept where the UI is stored in “virtual” representative memory and matched to the actual DOM through a library like ReactDOM. A virtual DOM and a real DOM have the same features. Real DOM manipulation is slow and virtual DOM manipulation is much faster.
How do events work in react: The rules for managing events with React elements are the same as the rules for managing events with DOM elements. But there are some syntax differences: React events are named using camelCase, rather than lowercase.
Higher order component: A higher-order component is an advanced technique in React for reusing component logic. The examples of Higher-order components are Redux's connect and Relay's createContainer.
useEffect and useState: useState allows our functional components which used to be stateless become stateful. And useEffect allows our functional components to leverage component lifecycle hooks.
Events: The rules for managing events with React elements are the same as the rules for managing events with DOM elements. But there are some syntax differences: React events are named using camelCase, rather than lowercase.
Flux Concept: Flux concepts is a new kind of architecture that complements React and the concept of Unidirectional Data Flow.
Fragments: Fragment keywords are used to group a list of children components without using any additional nodes in the DOM.
Prop drilling: Prop drilling is the process of a React app where props can easily pass data from one component to another.
Conditional rendering: conditional rendering refers to the dynamic output of user interface markups based on a condition. Using conditional rendering, it is possible to toggle specific application functions, API data rendering, hide or show elements, decide permission levels, authentication handling, and so on.
React advantages and disadvantages:
Advantages:
1/ JavaScript code much easier.
2/ Cross-platform support.
3/ Templates can be designed much easier. 4/ Provides amazing developer tools. 5/ UI focused design.
6/ Easy to accept.
Disadvantages:
1/ Lack of Documentation.
2/ It only covers the UI so other languages are needed to create a complete application.
3/ The high speed of development makes the life of the developer difficult.
Optimize a react js application: Here's what to do to optimize a react js application:
1. Large bundle size.
2. Large rendering.
3. unnecessary rendering.
4. Download on demand. There are many more things to keep in mind, including the above.
Empty tags: Empty tag is used to declare fragments in React.
Most common approaches for styling a React application: The most common approaches for styling a React application are:
1/ CSS Classes
2/ Inline CSS
3/ Pre-processors Such as Sass, Stylus, and Less
4/ CSS-in-JS Modules Such as Styled Components, Emotion, and Styled-JSX.
