App, which represents your main application and will be the parent of all other components.
Navbar, which will be the navigation bar
MainArticle, which will be the component that renders your content.
NewsletterForm, which is a simple form that let's a user input his email to receive the weekly newsletter
importstatement; you can import code from a module into another module. This allows us to write each component in its own module in a separate file and later import all components to the parent component like so:
import ExampleComponent from "./components/ExampleComponent". (In our case that parent would be App.js)
importstatement, we are importing React and Component from the React library, which allows us to create a class component. If you are wondering why we have to wrap
Componentinto curly brackets and not
React, this is due to the way they are exported from the
reactmodule. Default exports are imported without curly brackets; everything else must be wrapped in curly brackets. Don't worry about this too much as we will get plenty of exposure to import and export statements soon.
propsas an argument to the constructor and also to the
super()call, which must be called in any constructor. However, you will not learn about props here. This concept will be discussed further in the next lesson. The idea here is to expose you to the terminology that we will be using in the future.
/* */. There are sections of React components where the comments (denoted by
//) we are used to are permissible. For now, we'll leave that as an exercise for you.
onchange. Instead of
classNameand instead of
render()function you see is the most used React lifecycle function (more on that in an upcoming section). The only thing you should know for now is that every React class component needs a render function, which returns one JSX element. So whatever you want to return needs to be wrapped in a single parent element.
Appcomponent we created in other files of our project, we have to export the component. In our example, we export the component as the file's default export:
exportkeyword before the declaration of the component. However, if you export a component as a default, you can import it without wrapping curly brackets around it. If you export multiple components, you have to import them inside of curly brackets.
create-react-app, which sets up a complete React application for you. By running one command, it does all the necessary setup and configuration for you to immediately start working on your project.
npx create-react-app my-first-react-appin your terminal,
cdinto the project by typing
cd my-first-react-app, and then open it in your text editor of choice. If you want, you can view the project in the browser via the command
index.jsis the entry point of your application by default. Open up your index.js file and check out this line:
ReactDOM.render(<App />, document.getElementById('root'))