How to use React

React

React since has been making noise recently, 
Do not know well Reactjs tutorial tried a little doing the.

The React

Google and mizchi's blog entry of come out.

I tried the Facebook made ​​reactive programming library React + impressions

I like using a technique called VirtualDOM.

I looked a little bit about the [JavaScript] provides a virtual DOM "React"

There are also artifacts that were cut only VirutalDOM.

https://github.com/Matt-Esch/virtual-dom 
Story you read the code of virtual-dom and want to know Virtual DOM algorithms

Installation of the react-tools

React, it seems to go get in the XHR for type = "text / jsx" content. 
Often developed in Chrome, or Developer to put tool that, 
I wonder if the good that'll stand something in development server, and I thought 
It easier likely to compile in js the JSX.

There seems to be intended to pre-compile the JSX. 
It is kind of one by one come out in console.log.

  npm install -g react-tools

Command-line tool is installed that jsx.

jsx command

What it was written in jsx compiled as java script. 
File written in jsx format in the src directory, 
The compiled file in javascript format is to be discharged to the dest directory.

  jsx --watch src / dest /

The rudiments

As rudimentary, it was in such a form.

  
     charset = "UTF-8" / > 
    
      
      
      
   

id = "content">

• main.js are as follows.

main.js

  var CommentBox = React.createClass ({
   render: function () {
     return (
      

  className = "commentBox">
         Hello, world! I am a CommentBox.
      
 );
   }
 });

 React.render (
      />, 
      document.getElementById ( 'content') 
  ); 
 

• Rendering the results.

It is of the contents to expand the contents of the CommentBox (instance of React), 
It's DOM is built.

Let's go underway this remains.

  var Comment = React.createClass ({
   render: function () {
     return (
      

  className = "comment">
        

  className = "commentAuthor">
           {This.props.author}
        
 {This.props.children}
      
 );
   }
 });

 var CommentList = React.createClass ({
   render: function () {
     return (
      

  className = "commentList">
          author = "Pete Hunt"> This is one comment  
          author = "Jordan Walke"> This is * another * comment  
      
 );
   }
 });

 var CommentForm = React.createClass ({
   render: function () {
     return (
      

  className = "commentForm">
         Hello, world! I am a CommentForm.
      
 );
   }
 });

 var CommentBox = React.createClass ({
   render: function () {
     return (
      

  className = "commentBox">
        


 Comments 

/> /> );}}); React.render ( />, Document.getElementById ( 'content' ));

In CommentList, we are using the Comment. 
Definition of Comment is made as follows.

  var Comment = React.createClass ({
   render: function () {
     return (
      

  className = "comment">
        

  className = "commentAuthor">
           {This.props.author}
        
 {This.props.children}
      
 );
   }
 });

  return (
  

  className = "commentList">
      author = "Pete Hunt"> This is one comment  
      author = "Jordan Walke"> This is * another * comment  
  
 );

In CommentList, but are building a Comment, 
author Attribute and This is one comment, etc. 
Do so that pull in this.props.author and this.props.children.

props of this.props is abbreviation of properties in, seems to use if you want to call wrapped in Component (enclosing a) the contents of the Component.

To use the data expressed in JSON format in the Component

It can also be used data of JSON format within Component. 
Utilizing Showdown.js, the section which is in the form to do the parsing of Markdown format , but there is, 
There was worrisome.

  
     charset = "UTF-8" / > 
    
      
      
      
      
   

id = "content">

  var converter = new Showdown.converter ();

 var data = [
   {Author: "Pete Hunt", text: "This is one comment"},
   {Author: "Jordan Walke", text: "This is * another * comment"}
 ];

 var Comment = React.createClass ({
   render: function () {
     var rawMarkUp = converter.makeHtml (this.props.children.toString ())
     return (
      

  className = "comment">
        

  className = "commentAuthor">
           {This.props.author}
        
 dangerouslySetInnerHTML = {{__html: rawMarkUp} } /> 
       
 );
   }
 });

 var CommentList = React.createClass ({
   render: function () {
     var commentNodes = this.props.data.map (function (comment) {
       return (
          author = {comment.author}> 
            {comment.text} 
         
         );
     });
     return (
      

  className = "commentList">
         {CommentNodes}
      
 );
   }
 });

 var CommentForm = React.createClass ({
   render: function () {
     return (
      

  className = "commentForm">
         Hello, world! I am a CommentForm.
      
 );
   }
 });

 var CommentBox = React.createClass ({
   render: function () {
     return (
      

  className = "commentBox">
        


 Comments 

data = {this.props.data} /> /> );}}); React.render ( data = {data} />,document.getElementById ( 'content'));

The contents of the data Object deployed in CommentBox Component, 
It was found to render.

To communicate with the server side, to save the comment

To save the contents of the data to comments.json file

And proceed with more Tutorial 
Become what you want to add a comment to comments.son. 
Because it must deliver comments.json on the server side, 
We decided to bring on hand from the react-tutorial repository git clone a set of server and sample files.

https://github.com/reactjs/react-tutorial

  > Git clone git@github.com: reactjs / react-tutorial.git
 > Cd react-tutorial
 > Python server.py
 > Open http: // localhost: 3000 / index.html

Continue to add Your name and Say something ...

It has been updated. 
There, that's server.py in the react-tutorial, 
Since the update to the _comments.json file is not included, the little bit remodeling

  diff --git server.py server.py
 index 7edb6f6..7ffda64 100644
 --- Server.py
 +++ Server.py
 @@ -47,6 +47,8 @@ Class MyHandler (SimpleHTTPRequestHandler ):

              # Save the data
              comments.append ({u "author": form.getfirst ( "author"), u "text": form.getfirst ( "text")})
 + With open ( '_ comments.json' , 'w') as f:
 + F.write (json.dumps (comments))
              sendJSON (self)
          else:
              SimpleHTTPRequestHandler.do_POST (self)

File is try to form that is stored in the _comments.json.

  > Python server.py
 > Open http: // localhost: 3000 / index.html

After you open the page, repeat the save,

To stop the server, and restart. 
The _comments.json, what you type is stored

  [{ "Text": "! Hey there", "author": "Pete Hunt"}, { "text": "fufafuga", "author": "hogehoge"}, { "text": "uooo", " author ":" mogemoge "}]

Concepts and the JSX, use of React.js, have somehow found.