Morioh
Login
Alexander Tyler

Alexander Tyler

4 years ago

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

#reactjs #web-development #javascript

Modern React From The Beginning: Multiple Components

https

Modern React From The Beginning: Multiple Components

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.

1.95 GEEK