React — first impressions from the noob

React.js

React is the one of most famous JavaScript-frameworks. A lot of developers uses it in everyday development. Since its release, I saw a lot of different posts and articles about it. Different people leave theirs reviews and impressions. So, I tried to learn this framework and give to it some respect or discontent. In this article, I’ll look at React as a noob because I really the noob and doesn’t know this framework. You can say “Yet another article about React”, but it’s not. Let’s go!

Firstly, React is different from others frameworks like Angular or Backbone. It has its ideology, idea and style of development. Great example — mixing JavaScript and HTML markup inside one source file. Do you know others examples with this innovation? I’m not. React uses a brand new architecture — Flux which consists of following components — action, dispatcher, store and controller view. Do you remember that I’m the novice (yeah, noob) in React so I’ll dive into Flux soon.

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”.

What do you need when working with React? You can start with this little starter kit or this JSFiddle. It contains JSX transformer that can help you turn JSX into valid JavaScript that can be used everywhere.

I created this HTML file and include all necessary scripts:

Sample Code
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
// React Code Goes Here
</script>

</body>
</html>

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:

Sample Code
1
2
3
4
5
6
7
<script type="text/jsx">
/** @jsx React.DOM */
React.render(
<h1>Hello, world!</h1>,
document.body // or even document.getElementById('my-react-div')
);
</script>

It’s easy, isn’t it?

If you would like clear JavaScript way, you can:

Sample Code
1
2
3
4
React.render(
React.DOM.h1(null, 'Hello, world!'),
document.getElementById('myDiv')
);

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:

Sample Code
1
2
3
4
5
6
7
var MyComponent = React.createClass({
render: function(){
return (
<h1>Hello, world!</h1>
);

}
});

And now we can use this component:

Sample Code
1
2
3
4
React.render(
<MyComponent/>,
document.body
);

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:

Sample Code
1
2
3
4
5
6
7
8
9
10
11
12
var MyComponent = React.createClass({
getInitialState: function(){
return {
count: 5
}
},
render: function(){
return (
<h1>Count: {this.state.count}</h1>
)

}
});

We can update state with setState() function:

Sample Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var MyComponent = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
update: function(ev) {
this.setState({text: ev.target.value});
},
render: function(){
return (
<div>
<input type='text' onChange={this.update} />
<h1>Result: {this.state.text}</h1>
</div>
)

}
});

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.

Instead of states you can use props and pass some data into component outside itself:

Sample Code
1
2
3
4
5
6
7
8
9
var MyComponent = React.createClass({
render: function(){
return (
<h1>Prop: {this.props.value}</h1>
)

}
});
// ...
React.render(<MyComponent value='this is prop'/>, document.body);

Not sure that I should go deeper because it’s just review from the developer who never working with React.

Conclusion

React is great, although it’s UI framework, it can give huge abilities for a developer (fake DOM, components etc). React can work both on server and client, so you can preprocess JSX on server and then to give ready-to-work JavaScript to client.

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.