DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Ajitesh is passionate about various different technologies including programming languages such as Java/JEE, Javascript, PHP, .NET, C/C++, SCALA, mobile programming languages etc and, computing fundamentals such as application security, cloud computing, API, mobile apps, google glass, big data etc. Currently, he is exploring different Javascript frameworks including AngularJS and the likes. He is also focusing on Big Data, especially, data science aspect of Big Data. He is working as a Principal Architect with Evoke technologies based out of Hyderabad, India. Ajitesh is a DZone MVB and is not an employee of DZone and has posted 49 posts at DZone. You can read more from them at their website. View Full User Profile

Hello ReactJS

08.13.2014
| 978 views |
  • submit to reddit
<html>
  <head>
    <title>Hello React</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://fb.me/react-0.11.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="page-header">
        <h1>ReactJS Hello World - Code Example</h1>
      </div>
      <div id="sayhello"></div>  
    </div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      //
      // This is the parent component comprising of two inner components
      // One of the component is UserName which is used to allow user to enter their name
      // Other component is HelloText which displays the text such as Hello, World
      //
      var SayHello = React.createClass({
        // This is used to set the state, "data" which is 
        // accessed later in HelloText component to display the updated state
        // 
        getInitialState: function() {
          return {data: 'World'}
        },
        // It is recommended to capture events happening with any children
        // at the parent level and set the new state that updates the children appropriately
        handleNameSubmit: function(name) {
          this.setState({data: name});
        },
        // Render method which is comprised of two components such as UserName and HelloText
        //
        render: function() {
         return(
           <div>
            <UserName onNameSubmit={this.handleNameSubmit}/>
            <HelloText data={this.state.data}/>
           </div>
           );
        }
      });
      // UserName component which has following two methods:
      // handleChange: Used to capture onChange event 
      // render: Code to render the component
      //
      var UserName = React.createClass({
        handleChange: function() {
          var username = this.refs.username.getDOMNode().value.trim();
          this.props.onNameSubmit({username: username });
          this.refs.username.getDOMNode().value = '';
          return false;
        },
        render: function() {
         return(
          <form role="form" onChange={this.handleChange}>
             <div className="input-group input-group-lg">
                <input type="text" className="form-control col-md-8"  placeholder="Type Your Name" ref="username"/>
             </div>
          </form>
          );
        }
      });
      // HelloText component to display Hello World or Hello Name text
      // render: Consists of code display the HelloText component
      //
      var HelloText = React.createClass({
          render: function() {
            return (
            <div>
              <h3>Hello, {this.props.data}</h3>
            </div>
            );
          }
      });
      
      React.renderComponent(
        <SayHello />,
        document.getElementById( "sayhello" )
        );
    </script>
  </body>
</html>

The code samples represents the Hello World with ReactJS. If you are looking to get started with ReactJS in a quick manner, just copy and paste this code in an HTML file, and open the file in the browser. 

It demonstrates some of the following key concepts of ReactJS:

- Components

- Composite Components

- Event delegation

Comments

Gordon Steven replied on Sun, 2014/08/24 - 9:56am

 Thanks! I am new to this and thank you that you shared this. - ReputationAdvocate.com