Now that we have defined our first component, let's render it and see what it looks like:
- First, we edit src/App.js, and remove all its contents.
- Then, we start by importing React and the Login component:
import React from 'react'
import Login from './user/Login'
It is a good idea to group imports in blocks of code that belong together. In this case, we separate external imports, such as React, from local imports, such as our Login component, by adding an empty line in between. Doing so keeps our code readable, especially when we add more import statements later.
- Finally, we define the App component, and return the Login component:
export default function App () {
return <Login />
}
If we are only returning a single component, we can omit the brackets in the return statement. Instead of writing return (<Login />), we can simply write return <Login />.
- Open http://localhost:3000 in your browser, and you should see the Login component being rendered. If you already had the page open in your browser, it should refresh automatically when you change the code:
The first component of our blog application: logging in by username and password
As we can see, the static Login component renders fine in React. We can now move on to the Logout component.