ES6 and JSX Study Note

  1. A function can be legidmitly called without giving required arguments.

  2. The building block of a react app is react element (which is a html element with JSX sytax embedded). React element can be generated by expanding react component (which is a collection of react elements).

  3. React component take the form of either ES6 function or ES6 class. React elements or smaller react components should be returned by the parent component when implemented as a ES6 function. When implemented as a ES6 class, react elements or smaller react components should be provided in the render() method definition (via "return" keyword).

  4. React components accepts props as the container to pass data down through the component chain.

  5. In react, an event is defined as a function and passed as inline HTML event property: "onClick=function" using JSX syntax.

  6. "state" can be updated via setState function. This function assign a new object to the state of a component. "setState" function accepts a annonymous function rather than a property assignment.

  7. State and preState are predefined react properties.

  8. React.Component has setState method

  9. In react, a render(return()) mehthod can only accepts a as input, that is to say, only "one" element can be rendered. Multiple elements should be wrapped into one to be rendered. A react component can render multiple smaller components without wrapping.

  10. In react, inline css style should be put into an object definition rather than string. The naming convention is camel case.

  11. The local state of a component can only be assigned directly when initialization (in the constructor). Otherwise the only way to revise it is through setState method.