如何使用 ReactJS 创建博客应用程序？

简介： React js 是一个开源的 JavaScript 库，用于为网站前端构建出色的用户界面。 React JS 还以声明式、基于组件和 Learn Once, Write Anywhere 在代码中而闻名。

方法：在本文中，我们创建了 使用 react js 的博客应用程序，首先，我们通过输入命令 npx create-react-app MY-APP 并安装所有模块来创建项目名称 MY-APP 。然后我们在 src 下创建文件夹名称组件，并制作两个 jsx 文件 post.jsx 和 posts.jsx 并通过 post.css 和 posts.css 设置 jsx 组件的样式。最后，我们将组件导入 App.js 并将 main 样式设置为 App.css。

现在让我们看一下在 Reactjs 中创建博客应用程序的分步实现。

第 1 步：创建 React 项目

npx create-react-app MY-APP

第 2 步：更改您的目录并输入您的主文件夹 MY-APP 为：

cd MY-APP

项目结构：它将如下所示。

项目结构

第 3 步： App.Js 是应用程序的入口点，在该应用程序的标头中，我们已导入 CSS 文件并导入我们通过 NPM（节点包管理器）创建的 react。我们已经导入了我们为在 Post 组件中编写所有帖子而创建的 。

Javascript

import React from "react";
import "./App.css";
  
import Posts from "./components/Posts/Posts";
  
const App = () => {
  return (
    

      

        Blog App using React Js 
      
      
    
  );
};
  
export default App;

第 4 步：现在下一步是在 src 内部创建一个组件文件夹，并在其中创建 2 个名为 Post 和 Posts 的文件。在 Posts, jsx 中，我们创建了一个名为 blogposts 的箭头函数，在博客文章中，我们创建了一个名为 title fro tile of blog body 的对象数组，并在正文中创建另一个对象名称 author 来作为发帖作者的名字博客，imageUrl 为图片的 URL。

Javascript

import React from "react";
import "./Posts.css";
import Post from "../Post/Post";
  
const Posts = () => {
  const blogPosts = [
    {
      title: "JAVASCRIPT",
      body: `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`,
      author: "Nishant Singh ",
      imgUrl:
        "https://media.geeksforgeeks.org/img-practice/banner/diving-into-excel-thumbnail.png",
    },
    {
      title: "Data Structure ",
      body: `There are many real-life examples of 
      a stack. Consider an example of plates stacked 
      over one another in the canteen. The plate 
      which is at the top is the first one to be 
      removed, i.e. the plate which has been placed 
      at the bottommost position remains in the 
      stack for the longest period of time. So, it 
      can be simply seen to follow LIFO(Last In 
      First Out)/FILO(First In Last Out) order.`,
      author: "Suresh Kr",
      imgUrl:
        "https://media.geeksforgeeks.org/img-practice/banner/coa-gate-2022-thumbnail.png",
    },
    {
      title: "Algorithm",
      body: `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. `,
      author: "Monu Kr",
      imgUrl:
        "https://media.geeksforgeeks.org/img-practice/banner/google-test-series-thumbnail.png",
    },
    {
      title: "Computer Network",
      body: `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. `, 
      author: "Sonu Kr",
      imgUrl:
        "https://media.geeksforgeeks.org/img-practice/banner/cp-maths-java-thumbnail.png",
    },
  ];
  
  return (
    

      {blogPosts.map((post, index) => (
        
      ))}
    
  );
};
  
export default Posts;

第 5 步：将样式添加到 post.jsx。对于 Post.jsx 中的博文，我们需要设计文章的框架，以便在其中添加 body 的样式和 style 标签内的 .post_conatiner。

帖子.css

body {
    background-color: #0e9d57;
}
.posts-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

第 6 步：现在在 post.jsx 中，我们在 Post.jsx 中创建的对象数组导入到这个组件中，然后我们使用 JSX 表达式调用，例如博客文章的名称、作者的姓名、文章的内容，最后是我们在 Post 中使用的图像 URL。

Post.jsx

import React from "react";
import "./Post.css";
const Post = ({ post: { title, body,
imgUrl, author }, index }) => {
  return (  
    

      
{title}
      
      
{body}
      
      
        
Written by: {author}
      
    
  );
};
  
export default Post;

第 7 步：因此，在调用 JSX 表达式之后，需要为组件设置样式以显示我们创建的文章。这个 Post-container 中的 Post.css 是一个 pos 的容器，用于设置 body post。在heading文章的标题中，根据屏幕设置图片的宽度和高度。

Post.css

.post-container {
    background: #e2e8d5;
    display: flex;
    flex-direction: column;
    padding: 3%;
    margin: 0 2%;
}
.heading {
    height: 126px;
    text-align: center;
    display: flex;
    align-items: center;
}
.image {
    width: 100%;
    height: 210px;
}

运行应用程序的步骤：打开终端并使用命令运行项目。

npm start

输出：您的项目显示在 URL http://localhost:3000/中

输出