Exercise: React part 2 (Message/Clock Parent-Child props passing)

Idea: Introduction to the React Props system.
Background: https://reactjs.org/

In this exercise you have to create a simple React App using component and passing props from a parent component to is child-component.


Step 1 (Get the default project up and running)

a) Open the terminal window and navigate to the your React-folder
b) Create a new React project named: clock (run: npx create-react-app clock)

Note that it may take several minutes!

Once the project is created:

c) Navigate (change directory) to 'clock' and run: 'npm start'

Verify that your default React app is running on localhost: 3000

d) After verifying that your default app is running, delete all default src files:

 

Step 2 (Component: App - create the App.js file)

a) Create a new file: App.js
b) Add import of React and Component from 'react':

import React, { Component } from 'react';

c) Create a new Class-Component 'App':

class App extends Component {
   render() {
     return (
       <div className="App"><h1>Local time:</h1> </div>
     );
   }
}

d) Add an export statement in the bottom of the file (so the App-Component can be used from the index.js file):

export default App;

Step 3 (Create the index.js file)

a) Create a new file: index.js.
b) Add import of React, ReactDOM and the App-Component:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

c) Render the App-Component:

ReactDOM.render(<App />, document.getElementById('root'));

(The ReactDom.render method inserts the App-Component in the document (index.html) at the div-tag with the id="root" and re-render the page).

d) Verify, that your React App show "Local time:"

 

Step 4 (Component: Message - create the Message.js file)

a) Create a new file: Message.js
b) Add import of React and Component from 'react':

import React, { Component } from 'react';

c) Create a new Class-Component 'Message'. The Message-Component will become a Child-Component to the App-Component, and you have to pass a messagetext from the Paret to the Child as props:

class Message extends Component {
  render(props) {
    return (
      <div className="Message">
        <h1>{this.props.messagetext}</h1>
      </div>
    );
  }
}

 

 

 

 

Step 5 (Update the App-Component - App.js)

a) Add an import statement for the Message-Component:

import Message from './Message';

b) Replace the <h1>Local time:</h1> tag with a Message-Component passing "Local time:" as a value to the messagetext props:

      <div className="App">
         <Message messagetext="Local time:"/>
      </div>

c) Verify, that your React App still shows "Local time:"

Oops - The Message-component was never exported and can therefore not be used (imported in App.js) - So:

d) Add an export statement in the bottom of the Message.js file (so the Message-Component can be used from the App.js file):

export default Message;

 

Step 6 (Component: Clock - create the Clock.js file)

a) Create a new file: Clock.js
b) Add import of React and Component from 'react':

import React, { Component } from 'react';

c) Create a new Class-Component 'Clock' and add the following code:

class Clock extends Component {
    constructor(props) {
      super(props);
      this.state = {date: new Date()};
    }
  
    componentDidMount() {
      this.timerID = setInterval(
        () => this.tick(),
        1000
      );
    }
  
    componentWillUnmount() {
      clearInterval(this.timerID);
    }
  
    tick() {
      this.setState({
        date: new Date()
      });
    }
  
    render() {
      return (
        <div>
           <h2>The Clock is: {this.state.date.toLocaleTimeString()}.</h2>
        </div>
      );
    }
  }

  export default Clock;

d) What does this component? and how doses it work?

Step 5 (Update the App-Component - App.js)

a) Add an import statement for the Clock-Component and add the Clock-component under the Message-Component in the render-function.
b) Test your React App!

Congratulation! - React App is ... Nice!

/ Henrik H