Prerequesite

  • node
  • javascript
  • html
  • css
  • es6
  • code editor

create-react-app

npm install -g create-react-app

create-react-app app-name

React component

state

class component里面管理状态使用state

class Counter extends Component {
  state = {
    counter: 10,
    title: "this is demo",
    products: [
      {
        id: 1,
        name: "ok",
      },
      {
        id: 2,
        name: "bad",
      },
    ],
  };
  // ..... other
}

render

jsx

expression

attributes

list/array

conditional rendering

handle events

binding event handlers

updating state

event arguments

passing data to component

passing children

debug react app

props vs state

raising and handle events

multiple component in sync

lifting state up

functional component

destructure arguments

lifecycle hooks