React Single Page Applications Part 1

In this tutorial, you will continue to develop the React application as a single page application, integrating the various components. At the end of this tutorial, you will be able to:

• Leverage the React router to enable the development of single page applications
• Provide a way of navigating among various pages using the React router support

Tutorial Resources

• Single Page Applications Part 1.zip

Integrating the Contact Component

• Add a new file named ContactComponent.js file and update its contents as follows:

• Update the MainComponent.js file to integrate the ContactComponent by adding in the following:

Updating the Home Component

• First, download Single Page Applications Part 1.zip and move dishes.js, comments.js, promotions.js and leaders.js in this folder to the shared folder

• Now update the HomeComponent.js file to fetch and display the featured dish, promotion and leader as follows:

• Next, update MainComponent.js as follows:

(source: Front-End Web Development with React on Coursera)