19 - React Bootstrap and State - Exercise

Overview

In this exercise we will practice including Bootstrap library to our project. We will create state for our components and swap rendered components using router functionality. If you don’t have AllDepartments and Department components, please download them from here

Task 1 - Include Bootstrap

1. https://react-bootstrap.github.io/

2. Open a terminal (either Terminal in VSCode or Windows Powershell) pointing to your project folder. For this task we will work with the Department component from the previous exercise.

3. Type in npm install react-bootstrap bootstrap . After a short installation you should see the process finished with no errors. You may see some audit warnings, we will disregard those for now.

4. Open your package.json and check that the Bootstrap dependency has been indeed added.

   

5. In index.js include the following bootstrap css link

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

6. Create a new folder inside your src folder called assets. This is where all the pictures will go that we will use in our website. Download 5 random pictures from the internet, rename them to 1.jpg, 2.jpg, 3.jpg, 4.jpg and 5.jpg and place them into this folder.

7. We will use a Bootstrap component to help us style our Department component. We will use a Bootstrap Card component. https://react-bootstrap.github.io/components/cards/

8. Inside the Department component, replace the previous code with the Card component code. We will use the information from the props to be displayed in the Card and also dynamically generate the picture source.

   <Card style={{ width: '18rem' }}>
         <Card.Img variant="top" src={require(`../assets/${props.dept.dep_id}.jpg`)} />
         <Card.Body>  
           <Card.Title>{props.dept.dep_name}</Card.Title>
             <Card.Text>
             This is team {props.dept.team_id}.
             </Card.Text>
             <Button variant="primary">Go somewhere</Button>
          </Card.Body>
       </Card>

9. Run npm start and check the view in your browser.

Task 2 - Adding State