Tips while doing ReactJS programming

To create a component, use the following syntax:

const React = require('react')
const HelloWorld = React.createClass({})

or

const React = require('react')
class HelloWorld extends React.Component({})

or

const React = require('require')
const HelloWorld = (props) => {}
// this is a stateless functional component - no state or lifecycle methods
Read more about stateless functional components


If you notice, while using the React class or component, you pass an object with bunch of key value pairs to React's createClass or Component, and viola, the component is ready.

So, for example...

const HelloWorld = React.createClass({

     // in a non es6 world
     render : function(){
          return <h1>Hello World</h1>
     }

     // or in es6 world
     render : function(){
          return <h1>Hello World</h1>;
    }

})

What to provide in the bundle's pipeline entry point js file:

import statement to import React
import statement to import ReactDOM
References to all the React components that you developed and using
Tell ReactDOM to render your react stuff at a particular DOM element
Read more about bundling React application