Some advanced topics of React you should know

react

Component VS Element

React component is a templet that can be reuse in another places of application. React element is a basically an object that represent HTML element. What returns a functional component is a element. So, we can see what is returned by component is a react element.

React is declarative

React describes to the web UI. We don't describe to the web UI but we tell the react that do this then react describe to the web UI therefor we see the result in the web UI. That’s why it is called “react is declarative”.

What is reconciliation?

When react render DOM on the UI, it keeps a virtual version of this DOM. Then if react needs to change any content in the UI, it doesn't render the whole DOM but instead it keeps virtual version of the updated DO. So now it has two version so it compares these two versions. if sees any deference it just changes from the rendered DOM previously. This process is called reconciliation.

What is JSX in react?

As we know that if we want to create element in react, we need to call a function that is React.createElement(“element”,attribute,..children). JSX comes to easy this task. So, what we write in JSX it is automatically compiled to this function call. So, it is JavaScript extension that allows us to write XML (that is almost similar to HTML) in our JavaScript code. It is not HTML template.

Using undefined, null, true, false as JSX children

If you use undefined , null,true, false as children of JSX, it is ignored, you cannot see any effect on the UI. For example: -

<div>
<h1> {false}</h2> no effect
<h1> {true}</h2> // no effect
<h1> {undefined}</h2> // no effect
</div>

Default props in react

We can set default props that is used when these props are set to undefined. But if you set to null , it does not work. Look at this example:-

const Blogs = ({color}) => {
return (
<div className="text-center mt-5">
<h1 style={{color:color}}>Coming soon.....</h1>// red color
</div>
)
}
Blogs.defaultProps = {
color:"red"
}

Conditional rendering in react

We often need to show some element and hide some element according to specific logic. In order to do this, we can use conditional rendering in our JSX. There a few ways you can do it with. 1. Ternary operator 2. Logical && operator. for example:-

const Blogs = () => {
const [state,setState] = useState(false)
return (
<div className=”text-center mt-5">
{ state && <h1>Coming soon…..</h1>}
{ state ? <h1>Coming soon…..</h1>: <span>comming soon</span>}
</div>
)
};

PropTypes in react

When we build app with react, we always use props to share data. Sometimes we face bugs for example we except string type from a prop but it is set to number that creates bug. If the size of app is large it is difficult to fix the bug. Propstype comes to solve this type problem like typescript. you can set to proptype . If you set to deferent type, you can see warning in the console. Here is an example :-

mport React, { useState } from 'react';
import PropTypes from 'prop-types'; 
const Blogs = () => {
const [state,setState] = useState(false)
return (
<div className="text-center mt-5">
{ state &&  <h1>Coming soon.....</h1>}
</div>
)
}
Blogs.propTypes = {
name: PropTypes.string,
age:PropTypes.number
}

Some plugins you may need for production build

You may want to optimize the performance of your react app. Basically, if you want to test the performance of app make sure you are checking with production build not development build. Besides that, you can gain more performance by implementing below plugins:-

1. terser-brance
2. envify
3. uglifyify
4. rollup-plugin-terser

React is a library not framework

react is UI library. You can build with react user interface you can’t do another necessary thing that app need like routing, translation etc. You nedd to use third-party library to implement those. Framework has all built-in functionality that app needs like Angular it is a popular JavaScript framework.