How to Learn React #3 — Understand the Magic Behind React Components

In the previous chapter we talked about JSX and we modified render method. We also mentioned React components a bit. In this chapter we will talk more about components, we’ll make use of them and give our app little bit of swing. So let’s open our editor and do some work. First we’ll create components directory inside src directory and move App.js to it. This directory will contains all of our components. We moved App.js so I’m getting a feeling we also need to change import statement in index.js. Yep we have to. Go ahead and change import of the App component in index.js toimport App from './components/App'; . After this change app should be compiled successfully. New project tree will look like this.

Project tree

Now…I’m getting a feeling that App.js is should represent our application. And right now it checks which type of day it is and do some conversion of name of the day. I kinda don’t like it. What I would like to see is just simple component which contains a lot of other components. Let’s say we are satisfied with our App.js component, but we would like to call it better e.g DayChecker. Then…we want to make use of DayChecker component in our app. Okay I don’t know why again but this can be achieved in two steps. We have to create new component called DayChecker with App.js functionality. Then we have to import that component in our App component and use it. Let’s do the first one. Copy everything from App.js create new file called DayChecker.js inside components directory and paste code to it. Okay this was easy but it’s not exactly what we want. We need to do some renaming now. Inside DayChecker.js change class from App to DayChecker and also change export statement to export DayChecker. The file should look like this

import React, { Component } from 'react';
class DayChecker extends Component {
  getDayName(number) {
    let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    return days[number];
  }
render() {
    // Get current date
    let today = new Date().getDay();
    // If it is weekday
    if (today === 6 || today === 0)
      return <div>Today is {this.getDayName(today)} - You can watch TV all day today</div>;
    // If it is weeken
    return <div>Today is {this.getDayName(today)} - You should go to work today</div>;
  }
}
export default DayChecker;

Okay…that was for the first step. Pretty easy I know. The good thing is that second step is even easier and more enjoyable because we’re gonna delete. In App.js delete everything and then add empty render method. The file will look like this

import React, { Component } from 'react';
class App extends Component {
  render() {
    
  }
}
export default App;

Now we’re gonna import our DayChecker component. In top of the App.js add import statement import DayChecker from ‘./DayChecker’; and inside render return it. The file will look like this

import React, { Component } from 'react';
import DayChecker from './DayChecker';
class App extends Component {
  render() {
    return <DayChecker />;
  }
}
export default App;

Okay…I like it. Now our App component looks better and all the logic regarding checking day is inside our DayChecker. Now the good thing about React components is that we can use them multiple times inside of our application so when you’re writing one, it is always good to think about reusability because it is very likely that you will use it multiple times. Now that we’re on fire let’s create another component. We will call it Header and it will only return simple heading saying

<h2>This app will tel you if you should work today</h2>

I believe in you so I’m not gonna provide 2 steps formula here. If you want to try do it yourself don’t scroll down much because there is a solution there. Okay so you probably created new component and it look like this

import React, { Component } from 'react';
class Header extends Component {
  render() {
    return <h2>This app will tel you if you should work today</h2>;
  }
}
export default Header;

Then you imported and wanted to render it in our App so the App.js look like this.

import React, { Component } from 'react';
import DayChecker from './DayChecker';
import Header from './Header';
class App extends Component {
  render() {
    return (
      <Header />
      <DayChecker />
    );
  }
}
export default App;

But now we’re getting error saying Adjacent JSX elements must be wrapped in an enclosing tag. What React is trying to tell render shouldn’t return multiple elements. Right now we’re returning 2. We have 2 options to fix it. First is to wrap our 2 components inside a div tag. Yes…that’s it now we’re only returning one element.

render() {
    return (
      <div>        
        <Header />
        <DayChecker />
      </div>
    );
}

The second one is to return an array of elements and we can do it like this

render() {
    return [
      <Header />,
      <DayChecker />
    ];
}

I don’t know which one you like better. I’m not some wizard of oz but I’m guessing second one because it is shorter. So we’ll go with that one. Okay…pretty good work. I want to congratulate you making it so far and also thank you for staying with me. To wrap up real quick…we created new components and use them in our app. In next chapter we’ll learn more about components. I will describe difference between class based component and functional component. Stay tuned, stay humble and let’s get ready to the rumble…in next chapter. Cheers!