ECMAScript 2015 or commonly called as ES6 specification of JavaScript introduced let and const

let

let is the new var. let could be used to declare variables, just like var.

Differences between let and var are

• let variables are block scoped.
• Global let variables are not properties on the global object.
• Loops of the form for (let x...) create a fresh binding for x in each iteration.
• It’s an to try to use a let variable before its declaration is reached.
• Redeclaring a variable with let is a SyntaxError.

const

Variables declared with const are like let except you can’t assign to them, except at the point where they are declared. The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

References

• ES6 In Depth: let and const
• let
• const

Arrow functions are a more concise syntax for writing function expressions. They were introduced in ECMAScript 2015 (ES6). They are also called as lambda functions in other programming languages.

Advantages of Arrow functions

• More concise
• Arrow functions do not create its own this context. so this has it original meaning from the enclosing context.

Things to watch out for when using Arrow functions

• call, apply, bind do not change the value of this in Arrow functions.
• Arrow functions cannot be used as constructors
• Arrow functions cannot be used as generators.
• Arrow functions do not have the local variable arguments as do other functions.

References

• Arrow function expressions
• ES6 Arrow Functions: Fat and Concise Syntax in JavaScript

Props

Props are read only. Whether a component is defined as a function or a class, it must never modify its own props. All react component must act like pure functions with respect to their props.

function TitleComponent(props) {
    return <h1>{props.title}</h1>;
}

State

State is similar to props, but its private and fully controlled by the component. State is local or encapsulated and its not accessible to any component other than the one that owns it. State is changeable. Do not modify state directly, Instead use setState() function. State updates may be asynchronous, to fix it, use second form of setState() that accepts a function rather than a object. React calls render method after state is changed to learn what should be on the screen.

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: "Hello World"};
    }

    render() {
        return (
            <form>
                <input type="text" 
                    value={this.state.name} 
                    onChange={this.handleOnChange.bind(this)}/>
            </form>
        )       
    }

    handleOnChange(e) {
        this.setState({
            name: e.target.value
        })
    }
}

References

• Components and Props
• State and Lifecycle
• ReactJS: Props vs. State

• Store

The state of your whole application is stored in an Object tree within a single store. This object is like a ‘model’ except there are no setters. This is so that different parts of the code can’t change the state arbitrarily, causing hard to reproduce bugs.

• Action

The only way to change the state is to emit an action, an object describing what happened. Enforcing that every change is described as an action lets us have a clear understanding of what’s going on in the app.

• Reducer

To specify how a state tree is transformed by actions, you write pure reducers. Its just a function which takes state and action as arguments, and returns the next state of the app.

• References

http://redux.js.org/docs/introduction/CoreConcepts.html

http://redux.js.org/docs/introduction/ThreePrinciples.html

The simplest way to define a component is to write a JavaScript function. The function accepts a single “props” object and returns a React element. Such components are called Functional components because the are literally JavaScript functions.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// A function component using an ES2015 (ES6) arrow function:
var Aquarium = (props) => {
  var fish = getFish(props.species);
  return <Tank>{fish}</Tank>;
};

// Or with destructuring and an implicit return, simply:
var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);

// Then use: <Aquarium species="rainbowfish" />

These components behave just like a React class with only a render method defined. Since no component instance is created for a function component, any ref added to one will evaluate to null. Function components do not have lifecycle methods, but you can set .propTypes and .defaultProps as properties on the function.

Advantage of Functional components is that they are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks. This pattern is designed to encourage the creation of these simple components that should comprise large portions of apps.

Reference:

• Components and Props
• Functional vs Class-Components in React
• Stateless function components