React-Blog-Site

User Info

With This React Application

I utilized React Hooks like useState, useEffect to put together a small React Blog Single Page Application. I find it very interesting that quite often when scouring the Internet for web development tutorials, and more specifically, React tutorials, it's very easy to find samples with pre-built applications. Then on the other hand, we have such a wonderful amount of resources out on the Internet that contain great pre-built websites using HTML, CSS and JavaScript. But very rarely do these two worlds actually meet. Well, with this project I aimed at showing how to take one of those readily available templates and converting into a fully functional single page application with React.

---

I Incorporated Bootstrap

So in this case for this React Application, I basically just went onto Google and I searched for a simple Bootstrap blog template. I came across the startbootstrap.com site. And here we have a number of bootstrap blog themes. I went for a blog site template. But ultimately you could go and find any sort of web template from any site. I thought this was gonna be a cool way to convert and kind of show the process of going from a Bootstrap template and actually converting it over into a React Single Page Application that anyone can utilize as a website.

```sh
Building Encapsulated Components That 
```
```sh
Manage Their Own State, Then Composing 
```
```sh
Them To Make Complex UIs.
```

check out a live demo of the project here http://react-blog-site.surge.sh

Features

-[Babel/core]

-[Reactjs -16]

-[Webpack -4]

-[Bootstrap Template Conversion]

---

Recommended Tools

The following tools are recommended for a React project. Also you will find included below some links for building some complex UI animations and conversion of SVG image into Data URL with the help of Webpack loader.

• Material-UI UI and components library.
• ESLint-loader, When using with transpiling loaders(like babel-loader),make sure they are in correct order(bottom to top). Otherwise files will be checked after being processed by babel-loader.
• CSS-Tricks, For building complex UI animations in React.
• Webpack CSS-loaders interprets @import and url() like import/require() and will resolve them.
• SVG-React-Webpack To utilize an SVG image in your React project, it will have to be transformed into a Data URL. We will need an appropriate webpack loader in our bundler.

Installation

git clone https://github.com/FernandoNunez-Dev/React-Google-Sticky-Notes

cd React-Blog-Site

npm install

npm start

visit http://localhost:8080/

• Full Stack Engineer

  • FernandoNunez-Dev

• Software Utilized

  • Reactjs -16
  • Babel/core
  • Webpack -4
  • Material-UI
  • Nodejs -LTS
  • ESLint-loader
  • CSS-Tricks
  • Webpack CSS-loaders
  • SVG-React-Webpack
  • Bootstrap -Template