Blog Platform

Set Up Your React Project

Open your terminal and run the following commands:

npx create-react-app blog-platform
cd blog-platform

Step 2: Install React Router

You’ll need React Router for navigation:

npm install react-router-dom

Step 3: Create Blog Components

Replace the content of src/App.js with the following code:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import './App.css';

const postsData = [
  {
id: 1,
title: 'First Blog Post',
content: 'This is the content of the first blog post.',
  },
  {
id: 2,
title: 'Second Blog Post',
content: 'This is the content of the second blog post.',
  },
  {
id: 3,
title: 'Third Blog Post',
content: 'This is the content of the third blog post.',
  },
];

const Home = () => (
  <div>
&lt;h2>Blog Posts&lt;/h2>
&lt;ul>
  {postsData.map((post) => (
    &lt;li key={post.id}>
      &lt;Link to={/post/${post.id}}>{post.title}&lt;/Link>
    &lt;/li>
  ))}
&lt;/ul>
  </div>
);

const Post = ({ match }) => {
  const post = postsData.find((p) => p.id === parseInt(match.params.id));

  return (
&lt;div>
  {post ? (
    &lt;>
      &lt;h2>{post.title}&lt;/h2>
      &lt;p>{post.content}&lt;/p>
      &lt;Link to="/">Go Back&lt;/Link>
    &lt;/>
  ) : (
    &lt;h2>Post not found&lt;/h2>
  )}
&lt;/div>
  );
};

const App = () => {
  return (
&lt;Router>
  &lt;div className="App">
    &lt;header className="header">
      &lt;h1>Blog Platform&lt;/h1>
      &lt;nav>
        &lt;Link to="/">Home&lt;/Link>
      &lt;/nav>
    &lt;/header>
    &lt;Switch>
      &lt;Route path="/" exact component={Home} />
      &lt;Route path="/post/:id" component={Post} />
    &lt;/Switch>
  &lt;/div>
&lt;/Router>
  );
};

export default App;

Step 4: Style Your Blog Platform

Open src/App.css and add some basic styles:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.App {
  text-align: center;
  padding: 20px;
}

.header {
  background-color: #282c34;
  color: white;
  padding: 20px;
}

.header nav a {
  margin: 0 15px;
  color: white;
  text-decoration: none;
}

.header nav a:hover {
  text-decoration: underline;
}

h2 {
  margin-top: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

footer {
  margin-top: 40px;
  padding: 20px 0;
  background-color: #f1f1f1;
}

Step 5: Run Your Application

In the terminal, run:

npm start