Page Comparison

...

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 use the project from the last 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

   Code Block
   language js
   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.

   Code Block
   language js
   <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