ReactJs Introduction

By: Stephen Patrick | 16 Aug 2016 | Category: ReactJs Introduction

Reactjs Introduction

ReactJs, is a little different to other JavaScript MVC Web frameworks in that it is not intended to support the full MVC spectrum. Reactjs focuses on building View components. The components contain code to render the view. The aim of Reactjs is to reduce boilerplate code and increase productivity when manipulating DOM elements.

Configuring Reactjs

Reactjs can be found here. To configure Reactjs and add it to your application.

<script src="http://fb.me/react-0.13.0.js"></script>

Reactjs Hello World

Let’s look at a couple of examples. First we will use the ReactDom.render method to render an element directly into the DOM.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>React JS HelloWorld</title>
   <script src="../app/js/lib/react.js"></script>
   <script src="../app/js/lib/react-dom.js"></script>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
   ReactDOM.render(React.createElement("h1", null, "Hello World!"),
       document.getElementById('container'));
</script>
</html>

Above we use the React.createElement to create a virtual element. Reactjs uses the idea of virtual elements to represent DOM elements. Above we render a h1 element into the div element with the id of container. The virtual element we created above is also known as a ReactElement.

ReactElement createElement(string/ReactClass type,
   [object props],[children ...]
)

The createElement provides an API to create a new ReactElement. It takes the name of the HTML tag or a Reactjs class also known as component. It also takes the element properties, and an array of element children. Let’s extend the previous example. We will change the JavaScript code to create a virtual element with some child elements.

<script type="text/javascript">
var $h1 = React.createElement("h1", {key : "h1"}, "Hello World!");
var $h2 = React.createElement("h2", { key : "h2"}, "Hello World Again!");
var $container = React.createElement('div', { className : "headings" }, 
           $h1, $h2);
ReactDOM.render($container, document.getElementById('container'));
</script>

Above we create a parent element and assign it to the variable $container. This virtual element has two child elements: $h1 and $h2. We call ReactDOM.render to render the DOM tree.

Reactjs Components

React components are created using the React.createClass function. A component is JavaScript class created using a constructor function. Components give you more power as they allow you to encapsulate, logic to render the view and the views state.

<script type="text/javascript">
var divComponent = React.createClass({render: function(){
   return(React.createElement("div", null,
        "Hello World! Components."));
}});

ReactDOM.render(React.createElement(divComponent), document.getElementById('container'));

</script>

Reactjs JSX Components

In the last example we took a look at the API provided by Reactjs to create virtual elements and components and render them into the Browser DOM tree. Reactjs also facilitates the use of JSX syntax to create elements.

JSX is an XML syntax similar to HTML syntax used to create elements.

<script type="text/babel">
var divComponent = React.createClass({render: function(){
   return <div>Hello World, Components With JSX !</div>;
} });

ReactDOM.render(React.createElement(divComponent), document.getElementById('container'));
</script>

Above we use the JSX syntax rather than the createElement API call. As we can see using JSX reduces a lot of the boilerplate code. However, in order to use JSX syntax, it must be translated to JavaScript code. We will use the Babel library to achieve this. Babel can be found [here(https://babeljs.io/). Notice above that we set the type of our script tag to text/babel this tells the babel runtime to process our script.

Render JSON

Let’s create a custom component using JSX to render a table. We will render a static JSON dataset of names.

<script type="text/babel">
var dataset = [
   {firstName: "Mark", lastName: "Stevens"},
   {firstName: "John", lastName: "Doe"},
];

var tableComponent = React.createClass({render: function() {
   var tableRows = dataset.map(function(row){
       return <tr>
           <td>{row.firstName}</td>
           <td>{row.lastName}</td>
       </tr>
   });

   return <table>
       <thead>
           <th>First Name</th>
           <th>Last Name</th>
       </thead>
       <tbody>
           {tableRows}
       </tbody>
   </table>
}});

ReactDOM.render(React.createElement(tableComponent), document.getElementById('container'));

</script>

Above we use the Array.map function to return elements created via JSX. We use the JSX syntax { and } to push dynamic content into our elements.