Simple react app with bootstrap.js
We will create a simple react app that lists comments from users who have commented on our blog.
To create a react application we use the create-react-app command. We name our project comments-react.
npx create-react-app comments-react
More details about create-react-app can be found here
To start our react application, we navigate to the project root directory and then run the command npm start.
cd comments-react
npm start
The React app created by create-react-app looks as below. We have a file called index.js that renders a component called App. The App.js file is the main component of our application. All other components will be defined inside this component.
If we open App.js, we can see that it already has a few lines of code. This code is generated by the create-react-app.
For our simple project, we can delete this auto-generated code so that the App component looks like below:
Now, let us add a list of user comments to our react app.
A comment will have a description and the name of the user who has made the comment. We will define this in a functional component called Comment.js
Our blog might have lots comments made by different users. For each user comment, we will render the Comment.js component.
Let us create two files, Comment.js and Comments.js as below.
Comment.js
This functional component expects two arguments passed to the component as props: name and description.
Inside the Comment component, we display the user’s name as well the comment description. We access these values from props by using {props.name} and {props.description}.
import React from "react";
const Comment = (props) => {
return (
<div>
<b>{props.name} says</b>
<p>{props.description}</p>
</div>
)}
export default Comment;Comments.js
The Comments functional component displays a list of comments.
We have already defined Comment.js to accept two props: name and description. When we call the Comment component, we have to pass two props — name and description, with data.
Below, we render three comments, by calling the Comment component and passing in a name and a description.
import React from "react";
import Comment from './Comment';
const Comments = () => {
return (
<div>
<h1>Comments</h1>
<br/>
<Comment
name={'Sally'}
description={'I really loved reading about your blog!'}/>
<br/> <Comment
name={'Mary'}
description={'Great work! Definitely inspired me to add more green to my place.'}/>
<br/>
<Comment
name={'Andrea'}
description={'Thanks for the guide to buying houseplants for beginners.'}/>
</div>
)}
export default Comments;
Running the application
We can now run the app by navigating to our project folder in our terminal and running the below command to start our application.
npm start
When the app starts successfully, it will run on http://localhost:3000
In the browser, we can see our comments rendered successfully.
Adding Bootstrap to our project
Navigate to the project folder in the terminal and add bootstrap as a dependency to our project by executing
npm install bootstrap
Once bootstrap is installed, you will see it in the dependencies section in the package.json file.
package.json contains a list of all the dependencies in our project. Here, bootstrap version 5.1.3 has been added to the project,
Now, open index.js and add the below line to import bootstrap to our project.
import ‘bootstrap/dist/css/bootstrap.css’;
Now, we can add bootstrap classes to our project. Let us add each Comment in a bootstrap card and a bootstrap grid.
import React from "react";
const Comment = (props) => {
return (
<>
<div className="container">
<div className="row justify-content-center">
<div
className="col col-xl-11 col-lg-11 col-md-10 col-sm-8 col-xs-8">
<div
className="card"
style={{ 'width': '80%' }}>
<div
className="card-body"
style={{'backgroundColor': '#edf0ed' }} >
<b>{props.name} says</b>
<p>{props.description}</p>
</div>
</div>
</div>
</div>
</div>
<br />
</>
)}
export default Comment;Refactor Comments.js
Next, let us refactor Comments.js so that we can dynamically render multiple comments by reading it from a variable.
We define a variable called commentsList which stores a list of comments. Each element of the list is an object that contains a name and description.
const commentsList = [
{
name: 'Sally',
description: 'I really loved reading about your blog!'
},
{
name: 'Mary',
description: 'Great work! Definitely inspired me to add more green to my place.'
},
{
name: 'Andrea',
description: 'Thanks for the guide to buying houseplants.'
}
];Next, we will render each element in this list as a Comment component.
We use the Javascript map function to iterate each element in the list and return a Comment component.
While iterating each element of commentsList, we pass the values of the name and description as parameters of the corresponding Comment component.
We also add a key parameter to each Comment component. This is because React expects each element in a list to have a unique key.
commentsList.map(
(comment, index) => <Comment
key={index}
name={comment.name}
description={comment.description} />
)Comments.js
import React from "react";
import Comment from './Comment';const commentsList = [
{
name: 'Sally',
description: 'I really loved reading about your blog!'
},
{
name: 'Mary',
description: 'Great work! Definitely inspired me to add more green to my place.'
},
{
name: 'Andrea',
description: 'Thanks for the guide to buying houseplants.'
}
];
function Comments() {
return (
<>
<br />
<div class="container">
<h3>Comments</h3>
</div>
<hr />
<br /> {commentsList.map(
(comment, index) => <Comment
key={index}
name={comment.name}
description={comment.description} />
)}
</>
)}
export default Comments;
If we refresh/restart our app, we can see the new changes with styling.
Finally, let us add some dummy data for our blog. The comments will be at the bottom of the page.
import React, { useState } from "react";
import Comment from './Comment';
const commentsList = [
{
name: 'Sally',
description: 'I really loved reading about your blog!'
},
{
name: 'Mary',
description: 'Great work! Definitely inspired me to add more green to my place.'
},
{
name: 'Andrea',
description: 'Thanks for the guide to buying houseplants.'
}
];function Comments() {
return (
<>
<div className="container">
<h2>My Amazing Blog</h2>
<hr />
<br />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</p> </div> <br />
<div className="container">
<h4>Comments</h4>
</div>
<hr />
<br /> {commentsList.map(
(comment, index) => <Comment
key={index}
name={comment.name}
description={comment.description} />
)}
</>
)}
export default Comments;
Our blog looks better now!
Thank you for reading!
In the next section, we will dynamically add comments to our blog. The details can be found here.
