My first blog with MERN Stack (Front-end)
Tags: react, javascript, webdev
Published: 2020-05-05 20:09:10

# 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](https://github.com/rhodlib/mern_personal_blog/tree/master/client) 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](https://reactjs.org/) 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](https://www.npmjs.com/package/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](https://reacttraining.com/react-router/web/guides/quick-start) 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](https://www.npmjs.com/package/history) 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

```javascript
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.

```javascript
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

```javascript
// 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](https://github.com/rhodlib/rhodlib_blog/blob/master/src/index.js) is the full code

```javascript
// 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](https://www.npmjs.com/package/axios) is the link to axios npm package.

---

### React-mardown

[Here](https://www.npmjs.com/package/react-markdown) 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.

```javascript
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](https://www.react-spring.io/) 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](https://github.com/rhodlib/rhodlib_blog/blob/master/src/components/Blogheader/index.js) is the full code.

```javascript
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](https://www.npmjs.com/package/react-loading-skeleton) 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](https://github.com/rhodlib/mern_personal_blog/tree/master/client/src/components) 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](https://github.com/rhodlib/mern_personal_blog/tree/master/client/src/routes) 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](https://i.imgur.com/rHJwRxn.png?2)

- 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!.