The Create-react-app component

Modules

Remember how default objects can be exported without curly braces? So we import React line 1 (referring to the code given below) as default and component as named. On line 2 we import the logo from the logo.svg file. It was exported as default with the name logo from another file already. Finally, on line 21 we export App as the default so it can be imported from any other file without curly braces.

$$$$

Class component

On line 5 a class called App that inherits Component is declared to create our class component. Then the render() function is used to return one JSX/HTML div. Remember that the render() function can only return one JSX/HTML element.

$$$$

JSX

Lines 8-16 are written in JSX. We can’t explain each line in depth, but we can give a general description of what this code block does. It first creates a div called App. Then it creates a header which contains the imported logo and the line “Welcome to react”. The black part of the output image shown below is essentially the header. Then it simply outputs a paragraph with the line “To get started, edit src/App.js and save to reload.”