React

Modern React From The Beginning EP4: Multiple Components


Subscribe On YouTube

Episodes

In the last part of this Modern React From The Beginning series we’ve worked with lists in our React application. A list of online courses has been created and that list has then be used inside the component’s JSX code to output course properties in the browser.

In this episode we’ll continue using this example. Up until now everything has been added to App component. Now we’ll refactor the React application a little bit and make use of multiple components to better structure the code.

Adding A Seperate CoursesList Component

Let’s start within file src/App.js to extract the code which is needed to iterate through the list and courses and generate the corresponding HTML output in a separate component named CoursesList:

function CoursesList() {
  return courses.map(function(course) {
    return (
      <div key={course.id}>
        <span>
          <a href={course.url}><h4>{course.title}</h4></a>
        </span>
        <span>by <strong>{course.author}</strong></span>
        <span>| Video Hours: {course.hours_video}</span>
        <span>| Number of Lectures: {course.number_of_lectures}</span>
        <span>| Rating: {course.rating}</span>
        <br/><br/>
      </div>
    );
  }); 
}

Again we’re implementing this component in the same way like we already did with App component: as a simple function. The CoursesList functions contains just a return statement which is containing the JSX code which is needed to output the list of courses. The output code is the same as it was used in App component before.

Using CoursesList Component In App Component

The implementation of the App function can now be reduced to the following code:

function App() {
  return (
    <div>
      <h1>List of Courses</h1>
      <hr />
      <CoursesList />
    </div>
  );
}

Here you can see that the output of CoursesList component is added to the output of App component by using the <CoursesList /> HTML element within the JSX code. Therewith CoursesList becomes a child component of App component.

The complete code inside file App.js should now look like the following:

import React from 'react';

const courses = [
  {
    id: 1,
    title: "React - The Complete Guide (incl Hooks, React Router, Redux)",
    author: "Maximilian Schwarzmülller",
    hours_video: 40.5,
    number_of_lectures: 490,
    rating: 4.6,
    url: "https://codingthesmartway.com/courses/react-complete-guide/"
  },
  {
    id: 2,
    title: "Modern React with Redux",
    author: "Stephen Grider",
    hours_video: 47.5,
    number_of_lectures: 488,
    rating: 4.6,
    url: "https://codingthesmartway.com/courses/modern-react-with-redux/"
  },
  {
    id: 3,
    title: "The Complete React Developer Course (w/ Hooks and Redux)",
    author: "Andrew Mead",
    hours_video: 39,
    number_of_lectures: 200,
    rating: 4.7,
    url: "http://codingthesmartway.net/courses/complete-react-web-app-developer/"
  }
];

function App() {
  return (
    <div>
      <h1>List of Courses</h1>
      <hr />
      <CoursesList />
    </div>
  );
}

function CoursesList() {
  return courses.map(function(course) {
    return (
      <div key={course.id}>
        <span>
          <a href={course.url}><h4>{course.title}</h4></a>
        </span>
        <span>by <strong>{course.author}</strong></span>
        <span>| Video Hours: {course.hours_video}</span>
        <span>| Number of Lectures: {course.number_of_lectures}</span>
        <span>| Rating: {course.rating}</span>
        <br/><br/>
      </div>
    );
  }); 
}

export default App;

Using Separate Files

Refactoring our React application into two components has already provided more structure. However we’re able to bring even more structure to the project by using separate files for our components. Create a new file src/CoursesList.js and move the code of CoursesList component into that new file:

import React from 'react';

function CoursesList(props) {
    return props.courses.map(function(course) {
      return (
        <div key={course.id}>
          <span>
            <a href={course.url}><h4>{course.title}</h4></a>
          </span>
          <span>by <strong>{course.author}</strong></span>
          <span>| Video Hours: {course.hours_video}</span>
          <span>| Number of Lectures: {course.number_of_lectures}</span>
          <span>| Rating: {course.rating}</span>
          <br/><br/>
        </div>
      );
    }); 
  }
  
  export default CoursesList;

If you now take a closer look at the CoursesList implementation you’ll find a few differences:

  • The function CoursesList has now a new parameter props.
  • Inside the function body we’re using the props object to access our courses list by using props.courses.

The reason for those changes are quite obvious. The courses array is defined in file App.js, so it’s now available in CoursesList.js We need to pass over the courses array via a component property. To access component properties we need to define a function parameter.

To pass over the courses property we need to make a change in App.js as well:

import React from 'react';
import CoursesList from './CoursesList';

const courses = [
  {
    id: 1,
    title: "React - The Complete Guide (incl Hooks, React Router, Redux)",
    author: "Maximilian Schwarzmülller",
    hours_video: 40.5,
    number_of_lectures: 490,
    rating: 4.6,
    url: "https://codingthesmartway.com/courses/react-complete-guide/"
  },
  {
    id: 2,
    title: "Modern React with Redux",
    author: "Stephen Grider",
    hours_video: 47.5,
    number_of_lectures: 488,
    rating: 4.6,
    url: "https://codingthesmartway.com/courses/modern-react-with-redux/"
  },
  {
    id: 3,
    title: "The Complete React Developer Course (w/ Hooks and Redux)",
    author: "Andrew Mead",
    hours_video: 39,
    number_of_lectures: 200,
    rating: 4.7,
    url: "http://codingthesmartway.net/courses/complete-react-web-app-developer/"
  }
];

function App() {
  return (
    <div>
      <h1>List of Courses</h1>
      <hr />
      <CoursesList courses={courses} />
    </div>
  );
}

export default App;

The <CoursesList /> element which is used to include the output of CoursesList component is extended to also contain a courses attribute. The value of this attribute is set to the expression {courses}, so that the content of the courses array is assigned. By using that syntax we’re then able to access the courses array inside of CoursesList component via props.courses.

What’s Next

In the next course episode we’re going to continue to refactor our React application by introducing the arrow function and JavaScript destructuring syntax and therewith continue to streamline our code and continue to learn how to develop a modern React application.

Advertisement: Top 3 React Online Courses

If you want to dive deeper and become a React pro also consider taking one of the following great online courses.

React – The Complete Guide (incl Hooks, React Router, Redux)*
Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

Go To Course*

Modern React with Redux*
Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!

Go To Course*

The Complete React Developer Course (w/ Hooks and Redux)*
Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.