# React 101: Create a Dynamic Time Display App

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:

```bash
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:

```bash
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:

```javascript
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:

```javascript
import TimeOfTheDay from './TimeOfTheDay';
```

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

```javascript
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:

```javascript
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:

```bash
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:

```javascript
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:

```javascript
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:

```bash
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.