React is a popular JavaScript library for building user interfaces. It allows you to create reusable components that can be shared among different parts of your application. In this tutorial, we will create a simple react app that displays the time of the day.

Prerequisites

Before you start, you will need to have the following software installed on your machine:

• Node.js and npm (comes with Node.js)

• An IDE of your choice, unless you're a transcendent being that writes code using plain text editors like notepad.exe

Step 1: Create a new react app

To create a new react app, you will use the create-react-app command. Open your terminal and run the following command:

codenpx create-react-app time-of-the-day

This will create a new directory called time-of-the-day and generate all the necessary files for a basic react app.

Step 2: Open the app in your text editor

Next, open the time-of-the-day directory in your favourite text editor. You should see a file structure similar to this:

time-of-the-day/
  README.md
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Step 3: Create a new component

In react, a component is a piece of code that represents a part of the UI. Each component is a JavaScript class or function that returns a JSX element.

To create a new component, create a new file called TimeOfTheDay.js in the src directory. Add the following code to the file:

import React from 'react';

class TimeOfTheDay extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default TimeOfTheDay;

This component is a simple class that extends the React.Component class and has a render method that returns a JSX element. The render method is what determines what gets displayed on the screen.

Step 4: Use the new component in the app

Next, you will use the TimeOfTheDay component in the main app. Open the App.js file and import the TimeOfTheDay component at the top of the file:

import TimeOfTheDay from './TimeOfTheDay';

Then, replace the existing div element in the render method with an instance of the TimeOfTheDay component:

render() {
  return (
    <TimeOfTheDay />
  );
}

Step 5: Display the current time

Now that you have the basic structure of the app set up, you can add some code to display the current time.

First, add a constructor method to the TimeOfTheDay component to set the initial state:

constructor(props) {
  super(props);
  this.state = {
    time: new Date().toLocaleTimeString()
  };
}

The constructor method is called when the component is created, and it allows you to set the initial state of the component. In this case, the state is an object that contains a time property set to the current time.

Next, modify the render method to display the current time:

render() {
  return (
    <div>
      <h1>The time is {this.state.time}</h1>
    </div>
  );
}

Here, you are using a template literal to insert the value of this.state.time into the JSX element.

Step 6: Update the time every second

Right now, the time is only displayed when the component is first rendered. To update the time every second, you can use the setInterval function to call a method that updates the state.

Add the following method to the TimeOfTheDay component:

updateTime() {
  this.setState({
    time: new Date().toLocaleTimeString()
  });
}

This method updates the time property of the state object with the current time.

Next, call the updateTime method every second using the setInterval function:

componentDidMount() {
  setInterval(() => this.updateTime(), 1000);
}

The componentDidMount method is called after the component is rendered, so this code will run once when the component is first displayed. The setInterval function calls the updateTime method every 1000 milliseconds (1 second).

Step 7: Test the app

To test the app, open a terminal and navigate to the time-of-the-day directory. Then, run the following command:

npm start

This will start the development server and open a new browser window with the app running. You should see the current time displayed in the browser window.

---

In this tutorial, you learned how to create a simple react app that displays the time of the day. You created a new component, added it to the main app, and used the setInterval function to update the time every second. With these basic concepts, you can build more complex react apps.