DEV Community

Cover image for Updating the Screen: React Documentation Introduction
Labby for LabEx

Posted on

Updating the Screen: React Documentation Introduction

Introduction

This article covers the following tech skills:

Skills Graph

Welcome to the React documentation! This lab will give you an introduction to updating the screen.

Updating the Screen

The React project have already been provided in the VM. In general, you only need to add code to App.js.

Please use the following command to install the dependencies:

npm i
Enter fullscreen mode Exit fullscreen mode

Often, youโ€™ll want your component to โ€œrememberโ€ some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add state to your component.

First, import useState from React:

import { useState } from "react";
Enter fullscreen mode Exit fullscreen mode

Now you can declare a state variable inside your component:

function MyButton() {
  const [count, setCount] = useState(0);
  // ...
Enter fullscreen mode Exit fullscreen mode

Youโ€™ll get two things from useState: the current state (count), and the function that lets you update it (setCount). You can give them any names, but the convention is to write [something, setSomething].

The first time the button is displayed, count will be 0 because you passed 0 to useState(). When you want to change state, call setCount() and pass the new value to it. Clicking this button will increment the counter:

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

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}
Enter fullscreen mode Exit fullscreen mode

React will call your component function again. This time, count will be 1. Then it will be 2. And so on.

If you render the same component multiple times, each will get its own state. Click each button separately:

// App.js
import { useState } from "react";

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

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

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}
Enter fullscreen mode Exit fullscreen mode

Notice how each button โ€œremembersโ€ its own count state and doesnโ€™t affect other buttons.

To run the project, use the following command. Then, you can refresh the Web 8080 Tab to preview the web page.

npm start
Enter fullscreen mode Exit fullscreen mode

Summary

Congratulations! You have completed the Updating the Screen lab. You can practice more labs in LabEx to improve your skills.

MindMap


๐Ÿš€ Practice Now: Updating the Screen


Want to Learn More?

Top comments (0)