Course Content

Introduction to React

1. Getting Started: ES6

Why React?Node.js and npm ES6 Variables ES6 Arrow Functions ES6 Map Method ES6 Destructuring ES6 Spread Operator ES6 Ternary Operator

2. Getting Started: JSX

JSX Introduction JSX Variables & Nested Elements JSX Embedding Expressions JSX Specifying Attributes Getting Started with React

3. React in Practice

Getting familiar with JSX Writing more Complex Elements using JSX Creating a React-Based Project Structure of a React Project

4. React Components

Introduction to Components Functional Components Creating React Components Importing Components

5. Controlling Data & Content

Passing Data into Components Conditional Rendering Loop Based Rendering Keys in Lists Event Handling Creating a TODO Application

6. Hooks

Introduction to Hooks Using the State Hook The Effect Hook Rules of Using Hooks Creating Custom Hooks Fixing the Todo Application

7. React Router

Introduction to React Router Route-Based Rendering Creating Navigation Bars Using Params

Introduction to React

Creating React Components

In the previous chapter, we explored how we can create components and what are the basic possibilities. There are, of course, more features related to components which we will explore in further chapters, but for now, we need to make sure that we have a good grasp of the concepts that have been discussed.

Task

The base code is already given with a data array containing some students' names and their scores. It also contains a getGrade function that takes in a score and outputs a grade.

Write a functional component called Grades at line 24 and create an unordered list inside it. Inside the list, use the data array to render list items having student names along with their grades in the form StudentName – Grade, for example, Aron - F.

You can use getGrade function to get the relevant grade. Also, don't forget to render the component inside the render method at line 36.

Hint

1. Use the map method for converting the array into <li> elements.
2. Inside the map element, you will embed two values from the array's item: name and grade.
3. Use the syntax data.map (student => ( )); for the map method. Here student represents a member of the data array.
4. Use the code <li>{student.name} - {getGrade(student.score)}</li> inside the map method for creating the <li> elements containing the required content. The getGrade function here takes in the student.score value and returns the calculated grade.

Solution

Everything was clear?

Section 4. Chapter 3