React Beginner Guides — My first 10 month with React.

A deep in journey to the center of the most favorable front-end library in the world. The main reason that I wrote this piece is to keep my consistency to keep learning on React. This is my 10th month of learning, and I hope I could continue the series of React Beginner Guides, to get along with creating a better documentation.

For disclaimer, everything I declare here is my personal experience with using React, and mostly will talk about personal-technical mix stuffs. I also wanted to make some short tutorial about React, and documented what I learned each day.

Also to be clear, 10 month is obviously not a decent amount of time to master React, moreover, it is not me — exactly 10-full-month of learning because I had a lot things to do and learn aside of React itself.

Again, the main reason I wrote this medium is to keep my consistency on learning, and better writing in documentation.

To be honest, what I felt after few times hitting a wall in React is that I kept drawing back myself on keeping learning further, I getting bored with React, and really wanted to learn something else.

Photo by Kevin Grieve on Unsplash

Then, I stumbled on an article about how the importance of a documentation to keep up your learning process, and decided to wrote this series to hopefully increase my interest a bit more. For you who felt the same on any other language or tech, writing a documentation or a story might could help you refresh and review your progress, and hopefully, gave more insight on what things really made you bored.

What I feel at first when hearing React ? In the past few years, I’ve developed quite amount of project, some of them are based on web platform. I basically started learning on plain HTML. My first reaction was like most of us trying our first code, there’s lots of ‘whoa’ and ‘gotcha’ moment in between. I started moved up a little bit to CSS, PHP, learn some frameworks, started learning server-client based website, and more technical stuffs. And 10 months ago, I met React.

Photo by Christopher Robin Ebbinghaus on Unsplash

My first impression about React was like when you woke up in the morning, home is sound, life is good, and then BAM!, “React. Learn this, improve, overcome, or you failed your final project and life is bad”, said the sound in my head, after hearing that my final project for my undergraduate degree must use React, and React only.

My project is about a web apps, for running and compiling MySql Database compiler using one of the Node’s library, to run your own SQL script in a web platform, which results later be used as online judging system for Students test scoring.

In the implementation, I started rumbling on React and Node courses. I barely had any basic on using any NPM’s library before, I know nothing about Javascript, literally nothing, and barely haven’t had use any other front-end or back-end development system before. We got 6 month to finish this, and at first, I honestly thought I’m screwed.

Then life is going again, I got this most helpful partner on my side that helps me a lot with the project. I found lots of boilerplate and useful links from lots of developers community and groups.

I even found this React boilerplate for kick-starting a simple REST front end website called Admin-on-rest by Marmelab. I though it was the best thing I could found at that time. And in short time, Life is good again.

And then I stumbled on a wall. I started on React and Node, a full-stack app, and create my biggest mistake : I barely know any Javascript.

Short story, I finished my final project, with barely a running web apps, and then submitted it. It runs, not smooth, but acceptable. I don’t quite understand how everything works, and kind of just going with it.

To this point, my current learning habit is learning what the source provides, any other side quest is irrelevant to the progress. I focused more short-term rather than long-term learning curve, and only take the easy road to master something.

Photo by Tim Gouw on Unsplash

And I failed to foresee the obvious : Mastering React need at least basic understanding in Javascript. I know this sound idiotic, but that’s what I’ve been through and struggle with the past few month with React. Just brute forcing all I know, all the way in. And that’s the fastest way to get bored at learning something.

With that in mind, I started a new journey, in a new place after I graduated, to learn from the basic, and actually learn to understand React.

And …

Let’s quit the short talk, and jump in to the Intro!

What react actually is?

React is a front-end library. It’s developed by Facebook in 2010, and open-sourced in 2013. It’s beginning to rocket it’s popularity on the past few years because increasing demand and popularity of component-based development. React itself need additional library to be able to work with specific platform, like react-dom for web development, and react-native for mobile.

What react is NOT?

React is not a framework. It doesn’t handle complex data-view binding, it doesn’t have models, database manager, data controller, or any data flow related function. All it cares is how to render things to the interface.

It uses the DOM nodes to manipulate views and events related actions directly. You can see your website, as a tree. Tree have lots of branch and leaves. DOM is the whole tree, and DOM nodes every part that grows from the tree.

React manipulates how the branches display, communicate, and interpret data on each other.

My face literally when learning React. Photo by Sabri Tuzcu on Unsplash

There’s lots of framework and library that controls UI, so what made React special?

React is component based. With this concept, it uses a ‘thing’ in the browser called the Virtual DOM, that affect the way React renders stuff into the interface.

Normal steps without the Virtual DOM would be like this :

1. UI code got compiled
2. Whole DOM of a page is produced
3. New generated DOM is replacing all of the old/current DOM in the current shown page.
4. New Page is shown from the New generated DOM

Whereas with Virtual DOM :

1. UI code got compiled
2. Whole DOM of page is produced
3. Old/current DOM is duplicated as Virtual DOM
4. New generated DOM is compared with the old/current DOM via Virtual DOM, if there’s any change, each changed node on old/current DOM is updated with the updated node in the new generated DOM
5. As result, is a New DOM with only parts of the changed node is changed.
6. New Page is shown from the New generated DOM

Virtual DOM affects greatly into performance since we no longer need to reload whole DOM each time the node changed.

Why should I use/changed to React?

You must have seen lots of people started using React at this point. I also have some amount of recommendation from my fellow developer friends who suggest on React. But honestly, that’s not the main reason I moved to React.

The proof that React is capable on being compiled with different library such as react-dom, react-native, or even react-vr, for me, open such tremendous chance for React to improve, both on each platform, and multi platform on multiple services.

My point is, by learning React itself, it’s not going to caged us into an understanding about only 1 point of knowledge on a specific platform, but it points to other possibilities and branches of learning docks that we can further explore. By getting how React works on web, you might found it easier to learn better and faster on how React works on other platform.

I admit my statement is highly subjective, and I myself haven’t actually tried React on other than web and mobile android platform, but just by imagining the possibilities of React’s expansion, is getting myself excited on what React is going to give us on the days to come.

And the last, the fact that everyone use it, is obviously made the technology is both popular, and advancing at the same time, this means, there will be more code base, boiler-plates, and tutorials to be learn and follow. With more documentation, it will be easier for beginner to learn and master it, thus made it more verbose and scaled for developers environment.

Where should I start?

At this point, basically everywhere. It is not that hard to find a good source or tutorials to learn React, but I recommended official react js website for standard starter.

There’s also a Discord channel for React enthusiast called Reactiflux. It’s filled with very healthy community of React developer from different country. They have great Q&A rooms which invite experts each month for open Q&A session and discussion about React. Very recommended.

State, props? What’s that? And what react have to do with any of them?

This might be good to be introduced in another chapter, but state and props is basically how we going to communicate with the data inside and outside the component, and how to communicate between each component.

You can consider state as the internal component leader, and props as the human relation division.

State will only care about what happen inside the component where it declared.

Props will only care on how each component talk to each other, and care nothing about the mutation or changes of each data inside each component.

Of course, this limitation only apply on a simple case, there might be another complex case that require another rule to be applied.

Any useful links for starters?

The past 10 month, I can’t actually focused on React itself, but on the contrary, I found lots of helpful source, link, library, and dependency might help learning React to be easier.

React JS docs : Official React JS documentation site.

Reactiflux : Official React Discord Channel

Graphql : A query language developed by Facebook, mainly used to minimize API request round-trip.

Apollo Graphql Client : Helps data binding on graphql on React

Let me know what you think about this piece below.