DEV Community

Cover image for What is React āš›ļøšŸ¤” and the concept of Componets in React
Kushal sharma
Kushal sharma

Posted on

What is React āš›ļøšŸ¤” and the concept of Componets in React

Hmm, You have open this blog then you must be the React Developer or Want to know the about the trending word Reactjs.

What is React JS?

React JS is a JavaScript library used in modern web development to build interactive web applications. The basic idea of react.js is to divide the UI elements into the small components and combine them later to make the whole App. First, see the below Image
Alt Text
Here we can divide the UI of the twitter into the three main components. we will design and develop all those three components separately and combine them to make the main UI. These components can be further divided into separate components. below we divided the twitter card into different components. The heart of the React is a component.
Alt Text.

Let's try to make a Mockup of the given example into the component
1) Left Component

import React from "react"; 
class LeftComponent extends React.Component {
    render() {
       return(
        This is the left component
       )
    }
}

export default LeftComponent;

2) Middle Component

import React from "react"; 
class MidddleComponent extends React.Component {
    render() {
       return(
        This is the Middle component
       )
    }
}
export default MidddleComponent;

3) Right Component

import React from "react"; 
class RightComponent extends React.Component {
    render() {
       return(
        This is the Right component
       )
    }
}
export default RightComponent;

so we make a component separately acc to their purpose. lets Combile them all

Alt Text

SO basically we import all our components into our main App and combine them all. That all About the component and its usage.

I hope that you like this Post. I don't want to go deeply into the logical syntax of the react for this post. I want to keep as simple as possible. if you want to make a full react tutorial with syntax then give your views in the comments.

To keep up with everything Iā€™m doing, follow me on Twitter. ==> Kushal Sharma

Top comments (10)

Collapse
 
roniardynt profile image
Ron

Thanks mr Kushal, this is easiest react component explanation what i ever seen

Collapse
 
sharmakushal profile image
Kushal sharma

thanks, Ron

Collapse
 
roniardynt profile image
Ron

I'm hyped for await your next react explanation šŸ”„šŸ”„šŸ”„

Collapse
 
davidyaonz profile image
David Yao

I wish I had this kind of explanation when I first started using React. Good work!

Collapse
 
sharmakushal profile image
Kushal sharma

Thanks , glad to hear that you liked the example

Collapse
 
neisha1618 profile image
Altoneisha Rose

Great examples

Collapse
 
sharmakushal profile image
Kushal sharma

Thanks altoneisha

Collapse
 
sm0ke profile image
Sm0ke

Nice, thanks for sharing!

Collapse
 
ziizium profile image
Habdul Hazeez • Edited

I am currently learning React and this post will be of great help and the key to my understanding of the entire React ecosystem. Thank you for keeping it so simple and straightforward.

Collapse
 
sharmakushal profile image
Kushal sharma

thanks, Habdul I also have struggled to find the simplest and the basic concept of reacting so I write this one so the beginners can know what is react and what is the concept of react