I haven't really gotten into React.js yet, even though I have heard about it about a year ago. It was this video, about react-native and how you can build native iOS apps with Javascript, that really got me thinking.

So, I started searching around, reading the docs, reading what others think of it and playing with this amazing piece of code. But before you go too deep, let me straighten out some facts for you.

##What React isn't React is not a complete framework, kit or anything else. From the homepage:

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

You won't be able to use it on it's own. React is a library. People refer to it as the V from the MVC. But even as is, it does a hell of amazing job. Here's why.

##React Components React consists of components. You may have already heard about Web Components that allow us to create custom HTML tags and include them anywhere on the outside world as easile as we include an H1 tag. React components work just like this but can only be used inside the React ecosystem.

Furthermore, Facebook implemented a new syntax language based on XML in order to compile their new XML based Components into vanilla Javascript. By doing this, we are able to write HTML inside Javascript and not being worry about it.

What? Did I just say HTML inside Javascript? Isn't that against the whole MVC movement? Well sort of... But React's team thinks this wa,y we will be able to maintain our code more easily since it exists on fewer files. Newcomers will get their hands on our code more quickly.The new language JSX looks like this:

React.render(
	<h1>Hello, world!</h1>,
    document.getElementById('example')
);

Lets talk a little bit more about the components. A component is basically a Javascript class that only knows how to render itself. A component can also contain child components it communicates with. This can help us write more modular code.

Think of a List element. We will write a List component that will contain a ListItem component. Every time we need to display it, the List component will render a <ul/> tag with a bunch of ListItem components,, and each of these ListItems will render <li/>, each with their information.

But wait? Did you said... render... every time? Like every time someone adds something in the list we will rerender it?

##Reconciliation Enter the Virtual DOM magic, or in React's terms, the Reconciliation. The essence of React. React will not render directly to the DOM every time something changes. Instead, it will render to its own internal DOM (the Virtual DOM) and then compute diffs on the real DOM. React makes only the appropriate changes to the DOM to reflect the new changes. We never have to interact with the DOM again. We may never even have to write external stylesheets. React has you covered.

##Conclusion I would suggest getting your hands on the React's documentation as fast as possible. There are a lot of concepts you need to understand in order to grasp its full potential.

As I said, in the beginning, it was react-native that forced me to play with React. But there are a lot more goodies to explore and I haven't play with all of them yet. Until next time, take care!

Please let me know if I missed or misunderstood something, since it's my second day using React. If you liked my article please share it. :)

I have to thank Matthew Lewis for reviewing this article. Thank you Matt.