The Create-react-app component
Let's discuss the create-react-app component. By now, most of it will be self-explanatory.
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.”
Get hands-on with 1200+ tech skills courses.