React is a famous JavaScript library utilized for web improvement. React.js or ReactJS or React are various ways of addressing ReactJS. The present some enormous scope organizations (Netflix, Instagram, to give some examples) likewise use React JS.

There are many benefits of utilizing this structure over different systems, and Its positioning under the main 10 programming dialects throughout the previous few years under different language positioning records.

I am making a short series so you can learn REACT, this is a basic post, I'll explain the structure of React, or we can say React in Operation Theatre.

R1, R2, R3 ... I will define them as you read.

/* R1 */ class center extends React.component{
    constructor(props){ /* R2 */
        super(props)
        
  /* R3 */this.state={
            counter:0
        }
    }
}

handleIncrement(){ /* R4 */
    this.setState(
        counter:this.state.counter+1
    )
}

render(){ /* R5 */
    return(
        <div> /* R6 */
            <button onClick={
                this.handleIncrement}> + </ button>
        </div>        
    )
}

R1

A react component also works as a JavaScript class that is inherent from the React.component, so we declare a class that's an extension of React.component.

R2

A constructor is a function that builds the object of the props is the state of the component, which is another object inside the props object.

R3

One of these props is the state of the component, which is another object inside the props object.

The state object holds some information that may change over the time of the component, and any change in it will change the behaviour of the component.

R4

Here we write the function that we will need in building the UI and the UI functionality

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

R5

Render() is a component method that takes the UI input we write and created those elements in the DOM as usual DOM nodes.

R6

We can return only one element so all our elements should be wrapped together on one parent element, which is what we call div.

The UI input is usually written in JSX which is a mixture between HTML and JavaScript. As you see here we write UI elements the same way as in HTML and when we need to add functionality to any element of them we write it in nor al JavaScript too, but it has to be written between curly braces.

Thank you for Reading. You can follow me on Twitter