Things I learned about React
1. Reason Behind React’s popularity
React’s performance is still one of the most important reasons why it becomes extremely popular but it is not classified to be the best thing about it. React become popular because it created a common language between developers and browsers that allowed developers to declaratively describe UIs and manage the action on their state change instead of change on DOM elements. Working with the DOM API is hard So React gives developers the ability to work with a “virtual” browser that is friendlier than the real browser. It acts like an agent who communicates with the DOM. Learning react is beneficial for iOS and Android mobile developers because React Native allows you to use your React skills to build native mobile applications.
2. React is all about components.
I learned in React UIs use components that are reusable, composable and stateful. All big and components are reusable even on different projects. We can think of components as a simple function we call a function with some input and they give us some output and use functions as needed. It is designed around the concept of reusable components.
3. Why is React named “React” anyway?
When the state of a component changes the UI represents changes. This change in the description of the UI has to be reflected in the device we are working with the browser and needed to update the DOM tree. In React application we don’t need to do that manually. React will simply react in the state changes and automatically update the DOM when needed.
4. In React creating components using functions.
React components are in their simplest form just plain old JavaScript functions.
function Button (props) {
// Returns a DOM/React element here. For example:
return <button type=”submit”>{props.label}</button>;
}
// To render a Button element in the browser
ReactDOM.render(<Button label=”save” />, mount);
The example shown looks like HTML in the returned output of the function. This is not HTML nor JavaScript and it is not even React. This is called JSX it is an extension to JavaScript that allows us to write function calls in an HTML like syntax.
5. What exactly are hooks?
A hook in React component is a call to a special function. All hooks functions begin with the word “use”. Some of them can be used to provide all function component with stateful elements and others can be used to manage side effects use effect cache/memoize functions and objects use a callback. Hooks are very powerful when it comes to things you can do with them. React hook functions can only be used in functional components. You can’t use them in class components. example give of Hook
const Button = () => {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
};
ReactDOM.render(<Button />, mountNode);
6. Creating reusable components.
In React components are all about reusability. The same component can be reused over and over again. suppose we created a button component and they can increment global count with any value. they are the same component but their increment value is can be changed.
const CountManager = () => {
// ..
return (
<>
<Button clickAction={incrementCounter} /> {/* +1 */}
<Button clickAction={incrementCounter} /> {/* +5 */}
<Button clickAction={incrementCounter} /> {/* +10 */}
<Display count={count} />
</>
);
};
7. Managing side effects.
Rendering a React component in the browser for the first time is referred to as mounting and removing it from the browser is referred to as unmounting. Side effects usually need to happen either before or after React’s render task. This is why React provides lifecycle methods in class components to let you perform custom operations before or after the render operation.
For function components side effects are managed by using the useEffect hook which takes 2 arguments a callback function and an empty array of dependencies.
The first time React renders a component that has a useEffect call it will invoke its callback function. After each new render of that component, if the values of the dependencies are different from what they used to be in the previous render, React will invoke the callback function again.
Side effects are also very useful for viewing what is going on in the application and for further optimizing the performance of React updates.
useEffect(() => {
// Do something after each render
// but only if dep1 or dep2 changed
}, [dep1, dep2]);
8. Virtual-DOM in React world.
When React was released there was a lot of buzz about the performance because it introduced the smart idea of a virtual DOM that can be used to reconcile the actual DOM. When React renders a tree element in the browser it first generates a virtual DOM of that tree and keeps it in the memory then it proceeds to perform the DOM operations which makes the tree appear in the browser. If some update happens react which was previously rendered it generates a new virtual DOM of the updated tree now react has two versions of the tree in the memory. React does not discard what has already been rendered instead it compares the two virtual DOM versions of the tree and make an appropriate update by using the diffing algorithm.
9. Conditional Rendering.
in React conditional rendering can be done. It’s often needed to render one part of the markup if some conditions are met, and the other if they are not. In React there are a few ways to do that.
Possible variations:
a. ternary operator outside return expression
b. if/else block outside return expression
10. prop-types in React.
PropTypes is a library that minimizes problems in React by checking the types passed in the props object against a specification we set beforehand and raising a warning if the types passed don’t match the types it expects.
Installation
npm install --save prop-types