The major advantage of the framework is the virtual DOM. Oops, I didn’t say — React is not MVC framework, the React is UI framework. Briefly, it’s use fake DOM that will be rendered only if you change something in your object (DOM element, view, component etc). I’ll show it in an example below. Virtual DOM makes React very fast and reactive, different benchmarks proves it.
Okay, it was the preface and now we can to start working with “Hello World”.
I created this HTML file and include all necessary scripts:
As you can see, the file has a script section with type “text/jsx”, so we can write all code here.
At first step, we should render “Hello World” in our HTML:
It’s easy, isn’t it?
But this way is not perfect as the JSX :)
<h1> is the built-in component. Base (or backbone) of the React is the components — headers, widgets, blocks etc. We can easily create own component:
And now we can use this component:
Cool, really cool!
Every component can have own state — it’s like a model for view in MVC. And here (I already said about it) every change of state cause re-render of the component and virtual DOM goes to real DOM:
We can update state with
Note, that in the example above I wrapped elements into
div block and use events. Events create something like two-way data binding. List of supported events you can read here.
states you can use
props and pass some data into component outside itself:
Not sure that I should go deeper because it’s just review from the developer who never working with React.
In one evening, I’ve created a small project that can manage accounts, show them in list, filter and insert them (but it’s looking too ugly so I can’t show result here). It was just one hundred lines of code and I spent about four or five hours learning the framework. When I started to reading about React, I was fully zero. I’ve reading a couple of tutorials and watched screencasts before I started to understand it (it all happened in one evening). Now I can work with it, maybe as a noob or novice, but I can.
You can say that this article is not professional and you will be right. Every developer, good developer or not, should study new things, and they should share their knowledge between each other. New knowledge gives new opportunities and lets brain thinking brand new way.
Originally, post was published at Medium.