A Few lines about React.js
1. What is React?
React may be a declarative, efficient, and versatile JavaScript library for building user interfaces. It allows you to compose complex UIs from small and isolated pieces of code called “components”.
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:
Application code
React, Redux, react-router
Build tools
Webpack, Uglify, npm/yarn, Babel, babel-preset-env
Testing tools
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?
JSX is an XML/HTML-like syntax employed by React that extends ECMAScript in order that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is meant to be employed by preprocessors (i.e., transpilers like Babel) to rework HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.
Basically, by using JSX you’ll write concise HTML/XML-like structures (e.g., DOM like tree structures) within the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, rather than putting JavaScript into HTML, JSX allows us to place HTML into JavaScript.
6. Function Vs Class Components
Functional Components:
A functional component is simply a clear JavaScript function that accepts props as an argument and returns a React element.
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.Class 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.
8. PropType
PropTypes exports a variety of validators which will be wont to confirm the info you receive is valid. during this example, we’re using PropTypes.string. When an invalid value is provided for a prop, a warning are going to be shown within the JavaScript console. For performance reasons, propTypes is merely checked in development mode.
9. Conditional Rendering
Conditional rendering in React works an equivalent way conditions add JavaScript. Use JavaScript operators like if or the conditional operator to make elements representing the present state, and let React update the UI to match them.
Some of the conditional rendering process as follows:
Ternary Operator
Helper Functions
Components
10. Optimizing Performance
We can optimize the app performance by following some techniques:
- Use the production build
- Brunch
- Browserify
- Rollup
- WebPack
- Profiling Components with the DevTools profiler
- Virtualize Ling Lists
- Avoid Reconciliation
and more …
That's all for today :)
