Diary of a Developer

Saturday, February 11, 2017

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

Thursday, February 9, 2017

How in the world I can create a React application??

https://www.tutorialspoint.com/reactjs/index.htm has the basic steps in creating a basic react application.

Also have patience to read this article entirely that gives an overall picture of moving parts used in react application setup: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html. See an excerpt from this web site below: