My first blog with MERN Stack (Front-end)

All about my blog: Front-end

Front-end Blog: How?

In this article, I'll explain how i create the front end of my blog, technologies and examples, but this isn't a guide step-by-step. It's simple because this project just centered in the back-end.

here is all the code of the front-end

First read this

This front-end it's very simple, you can use Redux/Context for state managment, the back end is ready for load many users but i only have one, mine. i use this for posting articles, this blog don't have box comment because is for documenting and save quick information for me, like notes. also you can user prop-types for props(it's a very good practice and really necesary for developing). this blog don't have front-end validations for login, because this project is for practicing backend. for this reazons the front is very simple. Be creative!.

---

---

Index

• Dependencies
  • React
  • React-router-dom
  • history
  • axios
  • react-markdown
  • react-spring
  • momentjs
  • react-loading-skeleton
• Structure
  • components
  • routes
  • utils

---

---

Dependencies

In the following step, I'll to explain these dependencies and why i use them.

---

React

Why react? i choose react because i think this is te most interesting library for JavaScript, very popular, you can get a lot of information about this on internet, you really can fell that u can take the controll of the app.

but react is only a choise, are many other popular framework/libraries as Angular or Vue, you can choose whatever you want. you can make the fron-end only with JavaScript and HTML5 and CSS, but is good start to think in components and create scalable and easy to mantain applications.

here is the official web of React

---

React-router-dom

Because React is a library we need to install all dependencies that are necesaries for our app.
react-router-dom is essencially if we need to work with routes, are other options like wouter is more simple and great to small projects, but i use react-router-dom because is more common to see in real projects.
I don't explain how use react-router-dom because here is a guide about this, and we can see a lot of post about how it's work.

---

history

history allow us to navigate between routes without a full page refresh, manage the history stack, navigate, and persist state between sessions.

here is all about history npm package.

How use history on my project? react-router-dom have your own history, you can use this using BrowserRouter, generally we us to see

import { BrowserRouter } from "react-router-dom";

this sentence call the BrowserRouter with your own history;

in the case you use the external history, you need to use Router, Router is inside of react-router-dom, is like BrowserRouter without a history.

import { Router } from "react-router-dom";

How install history? $ npm install --save history

How i use history on this project?

well, a good practice for me, is create a folder with the name utils and inside of this create a file called history.js.

history.js

// First import createBrowserHistory from history
import { createBrowserHistory } from "history";

// Then export the function.
export default createBrowserHistory();

and later in index.js at the src folder.

index.js - here is the full code

// Import history from utils
import history from "./utils/history";
// Import Router from react-router-dom
import { Router } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    // Use history inside of Router
    <Router history={history}>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

and this is all, we have history on the app.

---

Axios

As the npm package says, axios is a promise based HTTP client for the browser and node.js.

we can use fetch to make the requests, but i prefer axios because it make all the work for us and reponse with a JSON, we dont need to make a promise chaining only for that. and i like to work with async/await for asyncronus functions and try/catch for error handling.

here is the link to axios npm package.

---

React-mardown

Here is the star of the project, this npm package is the solution of all my problems with the markdown. Is a little dangerous save markdown one the backend, because anybody can execute an script, we need to create a purifyDOM, etc. With react-markdown we can save a String in the database with a markdown sintax and the front-end with react-markdown is encharge of transform this sintax on markdown, let's see.

import React from "react";
//Import react-markdown
import ReactMarkdown from "react-markdown";

//Create a component article
const Article = ({title, textString}) => (
    <div>
        <h1>{title}</h1>
        //Use ReactMarkdown with the textString(with markdown sintax) as source
        <ReactMarkdown source={textString}>
    </div>
):

export default Article;

and this is all, we can show strings with markdown sintax stored in the database as Markdown, in the website.

---

React-spring

this is a npm package to make animations and transitions in the components, isn't necessary but is a really interesting

I'll don't explain much about this because i not use this in the best way, i have a lot to learn, but here is all about react-spring, remember this is not a step-by-step guide, is an article about my first experience about MERN stack.

---

Moment JS

I use moment only for display a Date in the header of each blog, and for this is very simple. obviously are many uses, but for now is right for me.

How to install? $ npm install --save moment

How to use in my blog?

src/components/Blogheader/index.js - here is the full code.

import React from "react";
// Import moment
import moment from "moment";

// The createdAt prop is type Date storage in the database
const Blogheader = ({ title, description, createdAt }) => (
    <div>
        <h3>{title}</h3>
        <p>{description]}-{" "}
            <span>
                // Use moment, passing a Date and format
                {moment(createdAt).format("YYYY/MM/DD")}
            </span>
        </p>
    </div>
);

export default Blogheader;

---

React-loading-skeleton

This is a library to make a skeleton of your content for the view, i normaly prefer a loader. But is usual to see on social media pages, I just used it to test it.

here is all the information about this library

---

---

Structure

I will explain the structure that i use in the project, only three folders:

• components
• routes
• utils

and two files app.js and index.js

---

Components

here are the components folder.
there is four more folders.

• blogheader (It's the component with the title, description and date of creation that you can see when you enter on the website or see an article).

• footer (It's the component with social links and copyright ).

• header (It's the component with Title of the blog and links).

• layout (It's the component where i made the layout is not necesary but is a good practice to me, to keep my components organized).

---

Routes

here are the routes of my proyect, there is four folders.

• NewArticles ( this is the route for render the page to create new articles, you can see how this look here

• Article (this route render the article)

• Home (this route render the home)

• Login (this route render the login page)

---

Utils

Only have a file called history.js where i create the history.

---

THE END

This is all about the front end of my blog, I hope you find it interesting!.