Raw React

Trying to answer few questions through some codebase examples while learning Reactjs.

• How to use Raw React?
• Why use React?
• What's virtual DOM?
• How React is different from Angularjs in term of how they updates the view?
• ES5 or ES6 for React?
• What's flux and how to incorporate with React?
• Redux? Reflux? what's going on?
• Best Practices?
• How to TDD with react?

Following example projects are built progressively as we move further down.

Simple React

This is to show how simply you can extends the html using just react. The directives are written in JSX and transformed to js in browser using babel.

React rendering view when data changes

This demonstrates, how you can change the value in the input and gets the updated data printed in the screen(re-render), just like how ng-model in angularjs does. The concept is very similar to classic HTML where you bind the event listener in your input tag, like onChange event, which triggle and execute the function that updates the value. In vanilla js, you find the dom and update the text, but in React the value is bind to state of the component, so when state value changes, it re-renders the view.

Not using jsx in client side

This demonstrates how to transcompile your jsx into js and browser doesn't deal with jsx at runtime.

Transcompiling from commandline (offline Transformation)

In production, You may better want to just load transcompiled js and handle all transcompiling in server. Simple way without using any build system is just using babel-cli.

• you have jsx file to transform

  //App component: app.jsx
  var App = React.createClass({
  render:function(){
    return (<h1>Hello world!!</h2>)
  }
  });

• you have installed react, react-dom, babel-preset-react and babel-cli
  npm install react react-dom babel-preset-react babel-cli
• Run command:
  babel --presets react app.jsx

This should transform the jsx into javascript and show you the result on console. If you want to dump the trasformed file into folder or into file, please check out the link:babel-cli

to be continued...