Getting started with React.js

Photo by: React

It's holidays and I'm having a mini vacation. What else to-do on holidays than educate yourself.
First I was thinking to create a separated section for this topic because it's huge. Here is a lot of to cover, and a lot of to learn. But then I just decided to continue with a system that I'm currently using for my blog, and maybe later refactor it to a different section. Will see what is going to happen and figure it out on the fly.

Why React?

How I ended up for this topic is actually thanks to David Jurelius and Mattias Petter Johansson. They are a quest hosts one of the channels on Youtube I use to watch, I put a link to it down below. And they are building there a React js prototype. So I started doing with them this project and just got so excited, that thought why not to learn more by myself.
Earlier before these series, I have been keeping eye on the Javascript frameworks and libraries and I feel that React is the one that suits me the most. There is a lot of discussion on the Internet what framework to choose and why. So feel free to do some research and find out what would be the best solution for you.

What is React?

To get started with React we need to understand what it is. Official documentation says:

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

If you're familiar with the term "library", then you should know it's not a complete solution. In case you need to build a product you will need to add a lot more complexity to project - React is just taking care of user interfaces.

What problem does React solve?

Applications that state changes a lot can get benefit from this library. React was founded to make DOM manipulation a lot easier and faster. There are also other benefits, but this is the main goal.

How to get started?

For learning process, I'm going to use the create-react-app starter pack, so this way I can focus on writing code not to configuring development environment. This project created by Dan Abramov and some of his colleagues at Facebook. What is cool about this starter pack is that.
Installing it is made really simple. You will need npm or yarn package manager. I'm going to use Yarn, and run this command:

1yarn global add create-react-app

To create first project run:

1create-react-app my-first-app

This will create a project folder and download all component needed.
To execute freshly created project run:

1yarn start

For today, It's a lot of information, so I will stop here and continue in the upcoming week where I try to figure out a good structure for React js project and find out what is component? Meanwhile feel free to try my Reactive drum kit that I built when playing around with React, links are down below :)

Available resources