Chapter 2 - Creating our own content

UDEMY COURSE

Now it is time to watch the first four chapters of the Udemy course which will explain the basics of React apps, how to change the layout of your app and splitting up the project into multiple components.

In this chapter we want to create the basic components for our app and start with the layout of our GUI. Lets begin by installing a library called bootstrap, which provides really nice pre-styled HTML components like buttons, icons and more complex objects like navbars and cards.

Install additional dependencies

To install bootstrap you have to execute the following command in your project:

$ npm i bootstrap

Now again have a look into the package.json file. What has changed?

Now we have to import Bootstrap in App.js by adding the following line. After you added this line you should already see some changes in the layout of the app.

import 'bootstrap/dist/css/bootstrap.min.css';

Last we remove all the HTML code in App.js that lives inside the outer div container. So after this step there is just the outer div container left. Inside the div element with the class name 'App' our code will be placed. This div element works like an outer container for our app's code.

<div className='App'></div>

Next we need to create some components where parts of our GUI will be placed in. Create the following components in the src directory of your app:

• Navbar

• Login

• Footer

For the beginning you can just add some sample HTML code inside these components, like a paragraph with a dummy text (i.e. <p>This is the nabvar component</p>)

Inside the App component import all of these components and add them inside the outer div container.

<div className='App'>
  <Navbar />
  <Login />
  <Footer />
</div>

Adding a navbar

Go to the bootstrap navbar documentation (https://getbootstrap.com/docs/5.2/components/navbar/). Just copy the sample code into the Navbar.js component file so that it looks like this:

Have a look in your browser. You will now see a nicely styled navbar at the top.

Bootstrap containers

Next we have to edit the App component. We add a new div container which we will give the class "container". In Bootstrap all the content lives inside this container. You can read about Bootstrap containers in this article: https://getbootstrap.com/docs/5.2/layout/containers/

<div className='App'>
  <Navbar />
  <div className='container'>
    <Login />
  </div>
  <Footer />
</div>

Bootstrap Grid and the Login component

Bootstrap uses a grid structure to display its contents. You can read about the grid system in this article: https://getbootstrap.com/docs/5.2/layout/grid/

We will add two rows and for each row one column:

<div>
  <div className='row'>
    <div className='col-12'></div>
  </div>
  <div className='row'>
    <div className='col-12'></div>
  </div>
</div>

Now add a headline to the first row and a login form to the second row:

<div>
  <div className='row'>
    <div className='col-12'>
      <h3>Login</h3>
    </div>
  </div>
  <div className='row'>
    <div className='col-12'>
      <div className='form-group mt-3'>
        <label>Username</label>
        <input className='form-control mt-1' placeholder='Enter username' />
      </div>
      <div className='form-group mt-3'>
        <label>Password</label>
        <input
          type='password'
          className='form-control mt-1'
          placeholder='Enter password'
        />
      </div>
      <div className='d-grid gap-2 mt-3'>
        <button>Login</button>
      </div>
    </div>
  </div>
</div>

Finally we need to edit our footer. There is a page where you can find nice code snippets for pre-styled bootstrap footers. Select one of them and add the HTML code to the Footer component.