Gorgo.Live.ToString()

Mariusz, Gorzoch tech Blog

React.js

leave a comment »

React.js is a Facebook client-side engine to build custom components for your web site application. It is meant to be a declarative framework, so it focuses on transforming data into interface components.

React’s top features:

  • speed
  • declarative binding
  • composability.

Hello World
When working with new framework, then there is no better way to start then by trying simple hello world example. Before start please ensure that you reference react library inside your HTML page (you can download it from the project site or directly link that url: http://fb.me/react-0.11.1.js)

1: /** @jsx React.DOM */
2: var Hello = React.createClass({
3: render: function() {
4: return <div>Hello <b>{this.props.name}</b></div>;
5: }
6: });
7: React.renderComponent(<Hello name=”World” />, document.body);

line 1: this tells the browser that we will use jsx features
line 2: we declare our react component
line 3: minimum requirements for new react component is to implement “render” function
line 4: jsx statment. It get compiled before run time.
line 7: call react engine to render “Hello” component into DOM element pointed by second argument.

Rendering a component means linking it to a DOM element and populating that DOM element. Current content of the DOM element get replaced.

Components can inherit other components.
Below you can see our above example modified to explain that scenario:

1 : /** @jsx React.DOM */
2 : var Inner = React.createClass({
3 : render : function() {
4 : return <div>Message from inner commponent</div>
5 : }
6 : });
7 : var Hello = React.createClass({
8 : render: function() {
9 : return <div>Hello <b>{this.props.name}</b><br/><Inner/></div>;
10: }
11: });
12: React.renderComponent(<Hello name=”World” />, document.body);

Output:

Hello World
Message from inner commponent

Working with arrays.
Below you can find simple example how to use “map” function, with quite usefully when it comes to nesting components:

1 : /** @jsx React.DOM */
2 : var Post = React.createClass({
3 : render : function() {
4 : return <p><i>{this.props.post}</i></p>
5 : }
6 : });
7 : var Blog = React.createClass({
8 : render: function() {
9 : return <div>
10: Blog name = <b>{this.props.name}</b><br/>
11: {this.props.posts.map(function(p) {
12: return <Post post={p}/>
13: })}
14: </div>;
15: }
16: });
17: React.renderComponent(<Blog name=”Gorgo.Live.ToString()” posts={[‘post1-1’, ‘post1-2’, ‘post1-3’]} />, document.body);

In response we get:

Blog name = Gorgo.Live.ToString()
post1-1
post1-2
post1-3

State

Each component can have his own state. Once state of component change then it generated DOM is updated by regenerating it again.
Here is simple example of it usage:

1 : /** @jsx React.DOM */
2 : var Counter = React.createClass({
3 : getInitialState: function () {
4 : var state = {c : 1};
5 : setInterval(function() {
6 : this.setState({c : this.state.c +1});
7 : }.bind(this),1000);
8 : return state;
9 : },
10: render: function() {
11: return <div>Counter = {this.state.c}</div>;
12: }
13: });
14: React.renderComponent(<Counter/>, document.body);

That give us output as below:

Counter = 1

and that is updated every 1 second.

Above are the basics of React.js, but I believe it is good start or at least it can speed you up if you would like to try it quickly in your project.

More about React.js can be found on their offical web site: http://facebook.github.io/react . I’ve also recomend good course on Pluralsight : React-fundamentals

Advertisements

Written by Mariusz Gorzoch

28 July 2014 at 14:19

Posted in Bez kategorii

Tagged with

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: