React Components Part 1

In this tutorial, you will add the first component to your React application and update its view using JSX. At the end of this tutorial, you will be able to:

• Add components to your React application
• Use JSX to define the views of your component.

Tutorial Resources

• images.zip

Adding a Menu Component

• First, download the images.zip file provided above and then unzip the file. Create a folder named assets in the public folder. Move the resulting images folder containing some PNG files to the React project's public/assets folder. These image files will be useful for our tutorial.
• Next, add a new folder named components in the src folder, and create a new file named MenuComponent.js in this folder.
• Add the following code to MenuComponent.js:

• Next, open App.js file and update it as follows:

• Open App.css file and delete all its contents.

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