N3s

There are some things I should have known when I started my own Blog. Here I´ll write some of those things. Hope you find a great guide on this post.

I started this project because I wanted to write about my experience, learnings, and some of my thoughts. And I think this is one of my most challenging projects, I´ve been blocked and frustrated for hours, searching for information, watching tutorials, reading documentation, discussions and even looking for help with my contacts. There is no doubt that I´ve learned lots of things from this project.

I´ll write here those things I wish I have known when I started this project, hope you find this post really useful and don´t get stuck as me.

1. Open Graph Protocol.

The Open Graph Protocol, also known as "OG Protocol", is the tool which help us to have a little preview and card when sharing the URL of our project in Social Networks.

This is a tool really easy to implement, basically you just need to write some meta-tags on the head element of the index.html file, and in no more than 2 minutes you have improved your project, this will provide professionalism to your project. 

I encourage you to use it in all your Web Apps. We are as good as our projects, so... let´s made them as well viewing as we could.

2. React Router.

The React Router package help us to implement routing to our project by the client side, there is no need to made use of a backend server to made routing.

This package is really helpful talking about navigation, it is too fast to configure and change our application to use it.

To use React Router the first thing to do is to add a Router which must contains all our application or at least most of it due to the Link components and any other component regarding to the React-router library will not work outside of it. 

Once you have added the router, you just need to add your Routes, in case you have a header or a footer, the routes should be located outside of them because the things that are outside of the routes will maintain static.

3. React Helmet.

The React Helmet is a package that we could use once we have defined our routes, this is because the purpose of the package is to give us the possibility to change the meta-tags of the applications based on the component or route we are located.

It is based on one React Component called "Helmet" which is a non displayable components, and inside of it we will place or new meta-tags like we will do it in the head element. Is important to say Helmet will just change the meta-tags that we redefine in the Helmet element. 

4. Pre-rendering.

The pre-rendering is a technique commonly used in the server side where the application is load before it is requested, this allowing your application to load faster for the users and providing a better SEO (Search Engine Optimization) in which React is actually pretty bad due to the way it is based and the way it works. 

During this project I've been looking for a way to use pre-rendering in the client side of the app, but I haven't had any success on it, I'm still trying to do get this, but if I don't achieve this in some more tries, I'll move to a server side at least for this part of the project.

I want to add pre-rendering to this project because using it, I'll be able to share the links with the preview or card provided before by the React-Helmet package, because without it, the card will not be shown independent from the root direction, due to Helmet is based on JavaScript, and needs to be loaded in the app.

5. Attribute: dangerouslySetInnerHTML.

This attribute was really helpful when developing my blog, this because it turned so easy to create the page where each blog is completely shown. This attribute in this case was used to create all the children of an element by providing the structure in a string format.

I´m very proud of my results and efforts with this project and I hope you like it too.

Thank you for your time.

See you soon on my next post. 😁