1. What is React?
2. React is not a framework.
One important distinction between libraries like React and frameworks like Ember.js and AngularJS is that React cares only with rendering the UI and leaves many things up to every project to place together. As of July 2018, a typical set of tools, often called a stack, for building a React application is as follows:
React, Redux, react-router
Webpack, Uglify, npm/yarn, Babel, babel-preset-env
ESLint, Enzyme, Mocha/Jest
3. React will react.
React gets its name from the very fact that it reacts to state changes (although not reactively, but on a schedule). There was a joke that React should are named Schedule!
However, what we witness with the eye when the state of any component gets updated is that React reacts thereto update and automatically reflects the update within the browser DOM (if needed).
4. What is the Virtual DOM?
The virtual DOM (VDOM) may be a programming concept where a perfect , or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library like ReactDOM. This process is named reconciliation.
5. What is JSX?
6. Function Vs Class Components
There is no render method utilized in functional components.
Also referred to as Stateless components as they simply accept data and display them in some form, that’s they’re mainly liable for rendering UI.
React lifecycle methods (for example, componentDidMount) can’t be utilized in functional components.
A class component requires you to increase from React. Component and make a render function that returns a React element.
It must have the render() method returning HTML
Also referred to as Stateful components because they implement logic and state.
React lifecycle methods are often used inside class components (for example, componentDidMount).
7. React Hooks
Well, React Hooks, a feature that’s available in React v16.7.0-alpha are some things awesome you ought to realize .
Here may be a teaser for React Hooks.
In the above code,
useState is the first Hook.
9. Conditional Rendering
Some of the conditional rendering process as follows:
10. Optimizing Performance
We can optimize the app performance by following some techniques:
- Use the production build
- Profiling Components with the DevTools profiler
- Virtualize Ling Lists
- Avoid Reconciliation
and more …
That's all for today :)