Props and State in Component React - Tuong-Nguyen/JavaScript-Structure GitHub Wiki

Components let we split the UI into independent, reusable pieces. They are like JavaScript functions which accept inputs (called "props") and return elements describing what should appear on the screen.

Define a component using ES6 class:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Rendering a component

In order to render a component, we use ReactDom.render(content, container) method.

• content: component with passing inputs.
• container: the element contains the content of component.

const content = <Welcome name="Sara" />;
ReactDOM.render(
  content,
  document.getElementById('root')
);

In the content variable, Welcome is name of component and input is "Sara" assigned to name property.

And in the Welcome component, value of input will be got by {this.props.name}.

Our Welcome component returns a <h1>Hello, Sara</h1> element as the result and put it into root element.

React strict rule: All React components must act like pure functions which don't change their inputs with respect to their props. So, React components would always render the same outputs for the same inputs.

Props is short for "properties". They are passed to component (Props are read-only), similar to how an argument is passed to a function.

For example: pass a property name with value "Sara" to Welcome component.

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

const element = <Welcome name="Sara" />;

Also, a component can have default props.

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

// default values for Props
Welcome.defaultProps = {
  name: "world",
};

If Welcome is called without a name like this : const element = <Welcome />

it will simply render <h1> Hello world</h1> using default props.

Define the type of Properties. If the Props' values are not correct, an warning is displayed on console.

Welcome.propTypes = {
    name: PropTypes.string
};

For React 15.5, please uses this package https://www.npmjs.com/package/prop-types instead of React.PropTypes

React prefers Composition over Inheritance (Inheritance is never required). Component Props can be passed arbitrary values (primitive values, React component, function, ...).

this.props.children: are components inside the component.

Because React has a single strict rule: All React components must act like pure functions which don't change their inputs with respect to their props. So, React components would always render the same outputs for the same inputs. State allows React components to change their output over time in response to user actions.

Initialization

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allSkiDays: [
        {
          resort: "Squaw Valley",
          date: "2016-01-02",
          powder: true,
          backcountry: false
        }
      ]
    };
  }

Set state

addDay(newDay){
    this.setState({
        allSkiDays: [
          ...this.state.allSkiDays,
          newDay
        ]
    });
  }

Using setState() method to set new value for state, this method would trigger render() to update UI with new state.