- What is React?
React is a Javascript library for building UI(user interfaces). It is the world’s most popular Javascript library. It’s not exactly a ‘framework” because it is not a complete solution. Sometimes, we need to use other libraries to work with react.
In framework, many decisions are already made for us. Frameworks are not flexible. Since web browsers understood Javascript, we can use React in browsers.
2. Components:
React is all about components. These components are reusable, composable, and stateful.
We can think of components as simple functions. In functions, we can call functions with some input and they give us some output. If we need, can also reuse the function.
React components are also the same. We can reuse them. Components are set as “props”. React components has a private state to hold data that may be changed.
A component name should be Capitalized.
Let’s create a component using functions:
function FirstComponents (props) {
return <h2>Hello, world! </h2>
}// To render this component in the browser we need to write
ReactDOM.render(
<FirstComponents />, document.getElementById(root)
)
In the example above, in the return statement, I wrote some code that looks like HTML. But it is not HTML. It is not HTML nor Javascript. This is JSX.
Don’t understand, what is JSX? I will discuss it in the next section.
3. JSX?
JSX is an extension of Javascript that allows us to write function calls in an HTML-like syntax.
Does the browser understand JSX?
Browsers do not understand JSX. Browsers can understand only Javascript objects.
We can write the previous example like below:
function FirstCompoents (props) {
return React.createElement(
"h2",
null,
"Hello, World!"
);
}ReactDOM.render(
React.createElement(FirstComponents,
document.getElementById(root)
)
)
Browsers can understand this. But it looks complex. If we try to make bigger components it will more complex.
So, instead of writing React components using React.createElement syntax, we use a syntax that looks like HTML but not HTML. And this syntax look very easy to read. To use this syntax, we can use the compiler to translate it into React.createElement calls.
To translate JSX, we can use transpilers like Babel. If we use Create-React-App for creating React App, create-react-app by default use Bable to translate JSX.
4. defaultProps:
defaultProps is used to set the default props in the components. It is used for undefined props, not for null props.
Example:
const FirsComponent = () => {
// code will go here
}FirstComponent.defaultProps = {
name="Rakib"
}
5. How to optimize React Application Performance:
Use React.memo for Component Memorization:
React.memo provides us an accessible API to perform memorization. Memorization is used to speed up applications by collecting the results of valuable function calls.
Avoiding implementing inline Style Attribute:
If you are using the inline style attribute, the browser takes a lot of time for scripting and rendering. Most time spent by React application in development due to plan all the style rules transferred to the actual CSS properties, which extends the rendering time for the component.
Avoid extra Tags by Using React fragment:
If we use react fragment, it will help our application to reduce additional tags. It is necessary for components to have one parent tag. So, the requirement of having a single parent at the top level of the component is fulfilled.
Dependency Optimization:
While optimizing the application bundle size, you can also invest your time examining the amount of code used from dependencies. Let’s say you could be utilizing Moment.js which involves localized files for multi-language assistance.
For load cash, you can use 30 of the 150+ methods, and the additional methods in your final bundle will not be optimal. So, to solve this you should use a lodash webpack plugin to remove residual functions.
6. How rendering works:
When setState() is called, it informs React about state changes. Then, React call the render() method to update the representation of the components in the virtual DOM, and then it compares it with what’s rendered in the browser. If there are any changes, React just changes the things which need to be changed.
7. Conditional rendering:
Ternary operator:
We can use the ternary operator for conditional rendering. But we need to use a ternary operator inside ‘{}’ curly braces.
Example:
const FirstComponent = () => {
return(
<h2> {isActive ? 'User is now active' : 'User is not in active'}
)
}8. prop-types:
When our application is growing big, we will find a lot of bugs with type checking. For some applications, we can use TypeScript to type check our whole application. But if we don’t use typescript we can use prop-types for type checking.
We can install it by this command:
npm install --save prop-typesWe can import it in our application like this:
import PropTypes from 'prop-types';Example:
import PropTypes from 'prop-types';const FirstComponents = () => {
return(
<h1>Welcome, {name} </h1>
)
}FirstComponents.propTypes = {
name: PropTypes.string
}
9. Hocks:
Hocks are a new edition in React 16.8. In a React component hook is called a special function. All hooks functions begin with the word “use”. Some of them can be used to provide a function.
Component with stateful elements (like useState) or to cache/memorize functions and objects (like useCallback).
Example: useState hocks-
import React from 'react';const FirstComponent = () => {
const [count, setCount] = useState(0)
return (
<p>Total Count: {count}</p>
<button onClick={ () => setCount(count + 1)}
)
}
10. useEffect:
Basically, useEffect hocks are used to managed side effects in our application. We, use useEffect hocks for fetching data and so on.
Example:
import React from 'react';const FirstComponent = () => {
const [products, setProducts] = useState([])
useEffect(() => {
fetch('http: localhost-5000)
.then(res => res.json()
.then(data => setProducts(data)
}, [])
return (
<p>Total products - {products.length}</p>
)
}
This useEffect() method takes a callback function as a first parameter and takes one array for dependencies. If we don’t have any dependencies, we can simply add an empty array ‘[]’.
