Introduction

Welcome to this tutorial! Today, we’re going to delve into the world of ReactJS, a popular JavaScript library used by developers worldwide. Our focus will be on how to update the data on clicking a button in ReactJS. Don't worry if you're new to programming or ReactJS. I'll explain all the terms and concepts in a way that's easy to understand.

What is ReactJS?

ReactJS, often just called React, is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by Facebook and a community of individual developers and companies. React allows developers to create large web applications that can update and render efficiently in response to data changes.

Understanding Components in ReactJS

In React, the user interface of an application is broken down into reusable pieces called 'components'. You can think of components like LEGO blocks. Each block (component) has a specific look and function. You can use these blocks together to build complex structures (user interfaces).

Understanding State in ReactJS

The state in React is an object that represents parts of the app that can change. Each component can maintain its own state. You can think of the state as a data store that the component can read from and write to.

Getting Started

To illustrate the concept of updating data on button click, let's create a simple counter app. This app will have a number displayed on the screen and a button. Each time the button is clicked, the displayed number will increase by one.

First, we need to set up a new React application. You can do this by running the command npx create-react-app counter-app in your terminal. This command creates a new folder named "counter-app" with a basic React app setup.

Now, navigate to the newly created directory using cd counter-app and open the src/App.js file. This is where we'll be writing our code.

Creating the Counter Component

Let's start by creating a new component called Counter. In React, a component can be defined as a function that returns what the UI should look like. Here's what the Counter component looks like:

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>Click me</button>
    </div>
  );
}

export default Counter;

In the code above, we have a function Counter that returns a div with an h1 tag and a button. The h1 tag displays the number 0, and the button says "Click me". Right now, clicking the button doesn't do anything.

Adding State to the Counter Component

To make the button interactive, we need to introduce a state to our component. As mentioned earlier, the state in React is like a data store that the component can read from and write to.

We can create a state in our component using the useState hook. A hook is a special function that lets you "hook into" React features. For example, useState is a hook that lets you add React state to function components.

Here's how we can add a state to our Counter component:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button>Click me</button>
    </div>
  );
}

export default Counter;

In the code above, we're importing the useState hook from React at the top. Inside the Counter function, we're calling useState and passing 0 as an argument, which is the initial state of our count. useState returns an array with two elements: the current state (count) and a function to update it (setCount).

Updating the State

Now that we have a state, we need to update it whenever the button is clicked. We can do this by adding an onClick event to the button. An event in JavaScript is something that happens as a result of user action (like clicking a button).

In the onClick event, we'll call the setCount function and pass in count + 1 as an argument. This will increase the count by one each time the button is clicked.

Here's the updated code:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

In the code above, we added onClick={() => setCount(count + 1)} to the button. This means that each time the button is clicked, the setCount function is called with count + 1 as an argument.

Conclusion

Congratulations! You've just built a simple counter app in React. You now know how to create a state in a React component and update it when a button is clicked. I hope this tutorial was helpful and made the concept of state in React clearer to you.

Remember, React is all about components and states. Components define what the UI looks like, and states allow the UI to react to user actions. By understanding these fundamental concepts, you're well on your way to becoming a proficient React developer. Happy coding!