Top 10 React js Things

2 min readMay 7, 2021

What is react

React
React is a javascript library. it helps easy to make SPA (single page application). When need to update a react element, react identify it, and update a specific element. React also solve reusability in a website.
react make a function and we use it again and again.

React Components

React functions vs class
Two ways to make react components. its is react functional components and another one react class components.
Functional components:

const Name= () => {
    return (
        <div>
            <h2>This is functional components</h2>
        </div>
    );
};export default Name;

Class Components:

class Name extends Component {
    render() {
        return (
            <div>
                <h2>This is class components</h2>
            </div>
        );
    }
}export default Name;

React virtual DOM

React js make internally components tree structure for all DOM. It’s totally separate from real DOM. when we will click or active any event on the website, react catch it and render on virtual DOM. If successfully compiled or render it then it shows on real DOM.

React Default Props

Default props like function default parameter. when you miss sending a parameter value then work the default parameter value. As like as react Dufault props works. when you do not send props value then work default props value.

React propTypes

React prop types as, like typescript, propTypes check react props type. if one prop expected a number value and you send a string value it throws a type error. It makes an application more optimize and more advantageous.

ComponentName.propTypes = {
 name: PropTypes.string,
 description: PropTypes.string,
 price: PropTypes.number
}

React Page Optimize

Internally, React Uses several clever techniques to optimize a website. If you need more optimize you can run this cmd npm run build. Then if you fetch an optimization problem you use React Developer Tools For Chrome. after visit your site if you see the below image then you can sure your website is optimized.

Or You can see the below or red background image then your site is not optimized

Data Load By React Js

React js data loading system is really awesome. you can load data from the server easily. You can reload data from the database-specific case. Suppose you want to check the log-in user as an admin or a simple user. If the login user is admin you can load admin data or load simple user data.