ReactJS Components

ReactJS Components

Stateless Example

In the example below our first component is App. Header and Content is owner of this component. We build Header and Content separately, and simply add it to our App component within JSX tree. Only the component of the App requires exportation.

import React from 'react';

class App extends React.Component 
{
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component 
{
   render() {
      return (
         <div>
            <h2>Hello World</h2>
         </div>
      );
   }
}
class Content extends React.Component 
{
   render() {
      return (
         <div>
            <h3>Welcome to Phptpoint</h3>
            <p>This is a Paragraph!!!</p>
         </div>
      );
   }
}
export default App;

We need to import this into main.js file and call reactDOM.render() to be able to render this on the page. We've already done that when we built the setting.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));

Stateful Example

In this example we'll set the owner component (App) state. Just like in the last case, the Header component is added, because it does not need any state. We are creating table and tbody elements instead of the content tag, where we will dynamically insert TableRow from the data array for every object.

It can be seen that we use the arrow syntax (= >) for EcmaScript 2015, which looks much better than the old syntax for JavaScript. This will help us generate fewer lines of code in our elements. It is especially useful when creating a list with lots of items is needed.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"One",
               "age":"13"
            },
            {
               "id":2,
               "name":"Two",
               "age":"15"
            },
            {
               "id":3,
               "name":"Three",
               "age":"25"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((det, i) => <TableRow key = {i} 
                     data = {det} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h2>Phptpoint</h2>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Note − Notice that within map()function we are using key = I This will help React to update only the required elements, rather than re-rendering the entire list when something changes. For a greater number of dynamically generated elements it is a major performance boost.