In this article, we have created the blog app using react js, First of all, we have created the project name blog by entering the command npx create-react-app blog and installing all modules. Then we create the folder name component under src and make two jsx file post.jsx and posts.jsx and styling the jsx component by post.css and posts.css. And last we import the component into App.js and styling the main into App.css.
Lets have a look at how the final application will look like.
Blog app using ReactJS
Steps to create the application:
Step 1: Create React Project
npx create-react-app blog
Step 2: Change your directory and enter your main folder MY-APP as :
cd blog
Step 3: Install the required modules using the command
npm i bootstrap
npm i react-bootstrap
Step 4: Create a folder call components and create the files BlogNav.js, Posts.js, Post1.js, Post2.js, Post3.js, Post4.js
Project Structure: After following the above steps the project structure will look like
The dependencies in package.json will look like:
package.json
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.0",
"react": "^18.2.0",
"react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}Example: Write the following code in your files
- App.js: This file imports all the components and displays it
- BlogNav.js: This file is used to create the navigation bar
- Posts.js: This file renders the posts
- Post1.js, Post2.js, Post3.js, Post4.js: These files contain the content of the blog
JavaScript
// App.js
import React from "react";
import "./App.css";
import Posts from "./components/Posts";
import Navbar from "./components/BlogNav"
const App = () => {
return (
<div className="main-container" style={{backgroundColor: "aliceblue"}}>
<Navbar />
<Posts />
</div>
);
};
export default App;
// Posts.js
import React from "react";
import Post1 from "./Post1";
import Post2 from "./Post2";
import Post3 from "./Post3";
import Post4 from "./Post4";
import { Container, Row, Col, Card } from 'react-bootstrap';
const Posts = () => {
return (
<Container>
<Row className="justify-content-between">
<Col md={8} className="mb-4 mt-4">
<Post1 />
</Col>
<Col md={2} className="mt-4 float-right">
<Card>
<Card.Body>
<Card.Title>Recent Posts</Card.Title>
<ul className="list-unstyled">
<li><a href="#">JavaScript</a></li>
<li><a href="#">Data Structure</a></li>
<li><a href="#">Algorithm</a></li>
<li><a href="#">Computer Network</a></li>
</ul>
</Card.Body>
</Card>
</Col>
<Col md={8} className="mb-4">
<Post2 />
</Col>
<Col md={8} className="mb-4">
<Post3 />
</Col>
<Col md={8} className="mb-4">
<Post4 />
</Col>
</Row>
</Container>
);
};
export default Posts;
// BlogNav.js
import React from "react";
import 'bootstrap/dist/css/bootstrap.css';
import { Navbar, Nav, Form, FormControl } from 'react-bootstrap';
const BlogNav = () => {
return (
<div>
<Navbar style={{
backgroundColor:"#A3C1D4"
}}>
<img
src='https://media.geeksforgeeks.org/gfg-gg-logo.svg'
height='30'
alt=''
loading='lazy'
/>
<Navbar.Brand href="#home" style={{color:"white", marginLeft:"10px"}}>GeeksforGeeks</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse id="basic-navbar-nav" className="d-flex justify-content-end">
<Nav>
<Nav.Link href="#home" style={{color:"white"}}>
JavaScript
</Nav.Link>
<Nav.Link href="#about" style={{color:"white"}}>
Data Structure
</Nav.Link>
<Nav.Link href="#services" style={{color:"white"}}>
Algorithm
</Nav.Link>
<Nav.Link href="#contact" style={{color:"white"}}>
Computer Network
</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="ml-auto" />
</Form>
</Navbar.Collapse>
</Navbar>
</div>
)
}
export default BlogNav;
// Post1.js
import { Card } from "react-bootstrap";
const Post1 = () => {
return (
<Card>
<Card.Img
variant="top"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305183140/Javascript.jpg"
width={20}
height={250}
/>
<Card.Body>
<Card.Title>JAVASCRIPT</Card.Title>
<Card.Text>
JavaScript is the world most popular
lightweight, interpreted compiled programming
language. It is also known as scripting
language for web pages. It is well-known for
the development of web pages, many non-browser
environments also use it. JavaScript can be
used for Client-side developments as well as
Server-side developments
</Card.Text>
<a href="#" className="btn btn-primary">Read More</a>
</Card.Body>
</Card>
);
};
export default Post1;
// Post2.js
import { Card } from "react-bootstrap";
const Post2 = () => {
return (
<Card>
<Card.Img
variant="top"
src=
"https://media.geeksforgeeks.org/img-practice/banner/coa-gate-2022-thumbnail.png"
width={20}
height={250}
/>
<Card.Body>
<Card.Title>Data Structure</Card.Title>
<Card.Text>
The word Algorithm means “a process
or set of rules to be followed in calculations
or other problem-solving operations”. Therefore
Algorithm refers to a set of rules/instructions
that step-by-step define how a work is to be
executed upon in order to get the expected
results.
</Card.Text>
<a href="#" className="btn btn-primary">Read More</a>
</Card.Body>
</Card>
)
}
export default Post2;
// Post3.js
import { Card } from "react-bootstrap";
const Post3 = () => {
return (
<Card>
<Card.Img
variant="top"
src=
"https://media.geeksforgeeks.org/img-practice/banner/google-test-series-thumbnail.png"
width={20}
height={250}
/>
<Card.Body>
<Card.Title>Algorithm</Card.Title>
<Card.Text>
The word Algorithm means “a process
or set of rules to be followed in calculations
or other problem-solving operations”. Therefore
Algorithm refers to a set of rules/instructions
that step-by-step define how a work is to be
executed upon in order to get the expected
results.
</Card.Text>
<a href="#" className="btn btn-primary">Read More</a>
</Card.Body>
</Card>
)
}
export default Post3;
// Post4.js
import { Card } from "react-bootstrap";
const Post4 = () => {
return (
<Card>
<Card.Img
variant="top"
src=
"https://media.geeksforgeeks.org/img-practice/banner/cp-maths-java-thumbnail.png"
width={20}
height={250}
/>
<Card.Body>
<Card.Title>Computer Network</Card.Title>
<Card.Text>
An interconnection of multiple devices,
also known as hosts, that are connected using
multiple paths for the purpose of sending/
receiving data media. Computer networks can
also include multiple devices/mediums which
help in the communication between two different
devices; these are known as Network devices
and include things such as routers, switches,
hubs, and bridges.
</Card.Text>
<a href="#" className="btn btn-primary">Read More</a>
</Card.Body>
</Card>
)
}
export default Post4;
Step to run the application: Open the terminal and run the project using the command.
npm start
Output: Your project is shown in the URL http://localhost:3000/
Similar Reads
ReactJS | Using Babel
Now we know that what Babel is, we will focus on how to install it on your machine using node. Babel can be installed easily after following these simple steps. Requirements : A code editor like atom, sublime text or Visual studio code.Node should be installed on the machine with npm too. We will in
2 min read
News App using React
News App using React JS uses React's basic principles to fetch the latest news from a News API and show them to users based on their interests. It's a simple project to create an interactive and personalized news-viewing experience. Preview of final output: Let us have a look at how the final output
4 min read
Crowdfunding App using React
In this article, we will create a Crowdfunding App using React. The React crowdfunding app features multiple projects, each with a set fundraising goal. Users can contribute by entering donation amounts, and the app dynamically tracks progress toward each goal. Preview of final output: Let us have a
5 min read
Create ToDo App using ReactJS
In this article, we will create a to-do app to understand the basics of ReactJS. We will be working with class based components in this application and use the React-Bootstrap module to style the components. This to-do list can add new tasks we can also delete the tasks by clicking on them. The logi
3 min read
Create a Blog App using React-Native
This article shows how to create a basic blog app using react native. This app contains functionalities such as adding a blog and a delete button to remove the blogs using react native. The user can enter content with a title and then click on 'Add New Post' to create a new blog post Preview of fina
4 min read
Create a Quiz App using ReactJS
In this article, we will create a quiz application to learn the basics of ReactJS. We will be using class components to create the application with custom and bootstrap styling. The application will start with questions at first and then the score will be displayed at last. Initially, there are only
4 min read
Build an Admin Panel using ReactJS
The Admin Panel project is a web application built using ReactJS, a popular JavaScript library for building user interfaces. The Admin Panel is designed to provide a centralized and user-friendly interface. It provides a user interface for managing various aspects of a platform, such as viewing rece
9 min read
Random Quote Generator App using ReactJS
In this article, we will create an application that uses an API to generate random quotes. The user will be given a button which on click will fetch a random quote from the API and display it on the screen. Users can generate many advices by clicking the button again. The button and the quotes are d
3 min read
Travel Blog Website using React
Creating a Travel Blog Website using React JS is a better way to learn how to manage state, passing props and render data dynamically. In this article, we are going to learn how to create a Travel Blog Website using React JS. This website will have a list of places with images and description. The d
4 min read
How to Create a Basic Notes App using ReactJS ?
Creating a basic notes app using React JS is a better way to learn how to manage state, handle user input, and render components dynamically. In this article, we are going to learn how to create a basic notes app using React JS. A notes app is a digital application that allows users to create, manag
4 min read