¿Cómo crear una aplicación de blog usando ReactJS?

Introducción: React js es una biblioteca JavaScript de código abierto que se utiliza para crear la interfaz de usuario impresionante para la interfaz del sitio web. React JS también es famoso por el código declarativo, basado en componentes y Learn Once, Write Anywhere.

Acérquese a esto, creó el, npx create-react-app MY-APP e instale todos los módulos. Luego, creamos el componente del nombre de la carpeta en src y creamos dos archivos jsx post.jsx y posts.jsx y diseñamos el componente jsx con post.css y posts.css. Y por último, importamos el componente en App.js y diseñamos el principal en App.css.

Ahora veamos la implementación paso a paso para crear una aplicación de blog en Reactjs.

Paso 1: Crear Proyecto React 

npx create-react-app MY-APP

Paso 2: cambie su directorio e ingrese su carpeta principal MY-APP como:

cd MY-APP

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Paso 3: App.Js es el punto de entrada de la aplicación en el que en la cabecera hemos importado el archivo CSS e import react que hemos creado a través de NPM (Node Package Manager). Hemos importado el </post/> que hemos creado para escribir todos los posts en el componente Post.

import React from "react";
import "./App.css";
  
import Posts from "./components/Posts/Posts";
  
const App = () => {
  return (
    <div className="main-container">
      <h1 className="main-heading">
        Blog App using React Js 
      </h1>
      <Posts />
    </div>
  );
};
  
export default App;

Paso 4: Ahora, el siguiente paso es crear una carpeta de componentes con información privilegiada src y crear 2 archivos llamados Publicación y Publicaciones en ella. En Publicaciones, jsx, hemos creado una función de flecha llamada blogposts, y dentro de una publicación de blog, creamos una array de objetos nombrados como título del mosaico del cuerpo del blog y dentro del cuerpo creamos otro nombre de objeto autor para el nombre del autor que publica el blog, imageUrl para URL de la imagen.

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 (
    <div className="posts-container">
      {blogPosts.map((post, index) => (
        <Post key={index} index={index} post={post} />
      ))}
    </div>
  );
};
  
export default Posts;

Paso 5: Agregar estilo a post.jsx. Para las publicaciones de blog en Post.jsx, necesitamos diseñar el esqueleto del artículo para que agreguemos el estilo para el cuerpo y .post_conatiner dentro de la etiqueta de estilo.

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

Paso 6: ahora en post.jsx, la array de objetos que hemos creado en Post.jsx importamos en este componente y luego llamamos usando la expresión JSX como nombre de las publicaciones del blog, nombre del autor, contenido del artículo, y por último la URL de la imagen que hemos utilizado allí en Post.

import React from "react";
import "./Post.css";
const Post = ({ post: { title, body,
imgUrl, author }, index }) => {
  return (  
    <div className="post-container">
      <h1 className="heading">{title}</h1>
      <img className="image" src={imgUrl} alt="post" />
      <p>{body}</p>
      <div className="info">      
        <h4>Written by: {author}</h4>
      </div>
    </div>
  );
};
  
export default Post;

Paso 7: Entonces, después de llamar a la expresión JSX, es necesario diseñar el componente para mostrar el artículo para el que hemos creado. Post.css en este Post-container es un contenedor del pos que se usa para configurar la publicación del cuerpo. En encabezamiento el encabezamiento del post y establecer el ancho y alto de la imagen de acuerdo a la pantalla.

.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;
}

Paso para ejecutar la aplicación:  Abra la terminal y ejecute el proyecto usando el comando.

npm start

Salida: Su proyecto se muestra en la URL http://localhost:3000/

Producción