Building our first component

"So Shawn, we are all set to begin. Let's build our very first React App. Go ahead and add the following code to the JavaScript section of JSBin:"

var App = React.createClass({
  render: function(){
    return(React.createElement("div", null, "Welcome to Adequate, Mike!"));
  }
});

React.render(React.createElement(App), document.body);

"Here it is. You should see the output section of the page showing something similar to the following:"

   Welcome to Adequate, Mike!

"Nice Mike. I see that we are making use of this React object to create classes?"

"That's right. We are creating, what are called as Components in React."

"The entry point to the ReactJS library is the React object. Once the react.js library is included, it is made available to us in the global JavaScript namespace."

"React.createClass creates a component with the given specification. The component must implement the render method that returns a single child element as follows:"

var App = React.createClass({
  render: function(){
    return(React.createElement("div", null, "Welcome to Adequate, Mike!"));
  }
});

React will take care of calling the render method of the component to generate the HTML."

Note

Even if the render method needs to return a single child, that single child can have an arbitrarily deep structure to contain full-fledged HTML page parts.

"Here, we are making use of React.createElement to create our content. It's a singleton method that allows us to create a div element with the "Welcome to Adequate, Mike! contents. React.createElement creates a ReactElement, which is an internal representation of the DOM element used by React. We are passing null as the second argument. This is used to pass and specify attributes for the element. Right now, we are leaving it as blank to create a simple div."

"The type of ReactElement can be either a valid HTML tag name like span, div, h1 and so on or a component created by React.createClass itself."

"Once we are done creating the component, it can be displayed using the React.render method as follows:"

React.render(React.createElement(App), document.body);

"Here, a new ReactElement is created for the App component that we have created previously and it is then rendered into the HTML element—document.body. This is called the mountNode, or mount point for our component, and acts as the root node. Instead of passing document.body directly as a container for the component, any other DOM element can also be passed."

"Mike, go ahead and change the text passed to the div as Hello React World!. We should start seeing the change and it should look something similar to the following:"

Hello React World!

"Nice."

"Mike, while constructing the first component, we also got an overview of React's top-level API, that is, making use of React.createClass, React.createElement, and React.render."

"Now, the component that we just built to display this hello message is pretty simple and straightforward. However, the syntax can get challenging and it keeps growing when building complex things. Here's where JSX comes in handy."

"JSX?"

"JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It has a concise and familiar syntax with plain HTML and it's familiar for designers or non-programmers. It can also be used directly from our JavaScript file!"

"What? Isn't it bad?"

"Well, time to rethink the best practices. That's right, we will be bringing our view and its HTML in the JavaScript file!"

"Let's see how to start using it. Go ahead and change the contents of our JavaScript file as follows:"

var App = React.createClass({
  render: function(){
    return <div>
     Hello, from Shawn!
    </div>;
  }
});

React.render(React.createElement(App), document.body);

"As you can see, what we did here was that instead of using createElement, we directly wrote the div tag. This is very similar to writing HTML markup directly. It also works right out of the JavaScript file."

"Mike, the code is throwing some errors on JSBin."

"Oh, right. We need to make use of the JSX transformer library so that React and the browser can understand the syntax. In our case, we need to change the type of JavaScript, which we are using, to be used to interpret this code. What we need to do is change from JavaScript to JSX (React), from the dropdown on the JavaScript frame header, as follows:"

"That should do it."

"Looks good, Mike. It's working."

"Now you will see something similar to the following:"

Hello, from Shawn!