Assignment 2: React Router and Single Page Applications

Loading...

From the course by The Hong Kong University of Science and Technology

Front-End Web Development with React

31 оценки

The Hong Kong University of Science and Technology

Front-End Web Development with React

31 оценки

Course 2 of 4 in the Specialization Full-Stack Web Development with React

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

From the lesson

React Router and Single Page Applications

In this week, you will learn about various component types. You will learn about React router and its use in designing single page applications. You will also learn about single page applications and use React Router to design single page applications.

Assignment 2: React Router and Single Page Applications4:49

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

It's time to start on the second assignment in this course.

In this module, we had learnt about

the various types of React components including functional components,

then we examined the React router and how we can create a single-page application.

In this assignment, you'll explore all these concepts.

To get you started,

a partially completed About component.js file is provided for you.

As the first task in this assignment,

download About component.js file,

and move it into your components folder of your project,

and then integrate the About component into your single-page application,

so that when we click on the "About Us" link,

you will be able to navigate to the About component.

So, when you have completed the first task of your assignment,

you will be able to navigate to the About Us view in your single-page application.

So, when you go to the About Us view,

this is what you will see after your download and integrate

the About component.js file that is provided for you.

So, you will see that this is partially

completed with some of the information already set up for you,

and if you have taken the previous Bootstrap course,

you will recognize this from the Bootstrap course.

This is exactly the same thing that we saw in the About Us page.

Right at the bottom, you will be creating a list

of all the corporate leaders for your company.

The information for creating this list is provided for you through

the leaders state property in the main component.js file.

So, that needs to be passed into the About component.js file,

so that we can render these set of leaders.

So, once you have set up the About component,

and pass the information about all the leaders

from your main component to About component,

this is what you will end up seeing at the bottom of the About component view here.

So, you will see the four leaders names being printed out here.

Now, you will end up replacing this information by a list of

leaders after you complete the second and third tasks in this assignment.

So, that once you complete the second and third tasks in this assignment,

this is what you will end up seeing at the bottom of the About Us view here.

So, you can see that the four corporate leader's information is laid out here.

Now, to help us do this,

we are making use of the media React start component.

We had already seen the use of the media React start component,

when we created our first view of the menu page in the first module.

So, you can go back and take a look at how we created the menu listing all the dishes in

the first exercise of the lesson on React components in the first module.

Now, you'll be using a similar media component to create this list of leaders here.

Note, in particular, that you're rendering the image of the leader to the left side,

you're rendering the leader's name here,

you're rendering the leader's designation here,

and the leader's details given in the description for the leader here.

So, in the second task of your assignment,

you'll be setting up a functional component

called Render leader in the About component.js file.

This Render leader component will use the media class to create

this view for each item in the list of leaders.

In your third task of your assignment,

you'll end up creating the list of these four leaders as shown here.

So, to construct this list,

you'll take the help of the Render leader component that you implemented in Task 2,

and then render each of the leaders in a media list as shown here.

Have fun completing the second assignment in this course.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play