React 101: Create a Dynamic Time Display App
Steps to create a basic React App that displays Time utilizing setInterval
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.