ReactJS Tutorial for Beginners

ReactJS Tutorial for Beginners

We will learn about state in this part, but let’s first understand the difference between state and props.

Welcome to part-5 of the series. You can find part-4 here. We will learn about state in this part, but let’s first understand the difference between state and props.

props vs state

Since, react have two important concepts. One been props and other been state, they are compared a lot. And also differentiated a lot. Below diagram show the difference between them.

Image for post

props vs state

state in code

As, per the above diagram state is managed within a component. So, we will first create a state variable. Create a new file Counter.js inside the component folder. It is a class based component and we have the class constructor in it. The state variable is declared with this.state inside a constructor and is an object. We can put any numbers of key-value pair in it.

We are declaring count inside the state variable, with the initial value of 0. Now, inside our render() method we access it by this.state.count.

Image for post

Counter.js

Now, in localhost it will show the initial value.

Image for post

localhost

Now, whenever we want to change the value of state, we do it thorough setState method. We have added a button and a onClick event to it. Next, we are calling *incrementCount *function.

On important thing to notice is that at line 9, we are using the bind. This is done because the this keyword will throw error, if we don’t give it.

Inside the *incrementCount *function, we are calling the this.setState and increasing the count value.

Image for post

react-js-development react react-js-tutorials reactjs-development react-js-training

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

React JS Tutorial For Beginners In Hindi | What Is React JS | React JS Training

Great Learning brings you this React JS Tutorial For Beginners in Hindi Session. React JS is a JavaScript library that is developed and maintained by Facebook developers. If you want to build any sort of single page application, then React should be your go-to language. React also provides a way to reuse our UI components.

Top ReactJS Development Company in USA - Hire React JS Developers

Hire ReactJS developers from a Top ReactJS Development Company in USA to developing User Interfaces on ReactJS framework.

React js Projects 2020

Are you looking for some new react js to expand your skills or to explore the possibilities of react js, have a look at these projects : Project 1: Next.js React GraphQL Express Apollo Boilerplate If you are a react js developer who uses GraphQL, Next.js, Express, and Apollo regularly ( well I do ) then, give this boilerplate a go.