React basics

ES6
npm or yarn
bundler : webpack
Babel + presets : translator
Development server

Basic React

className 不是class

JSX

render()
一定要return什么东西
JSX code只是伪html代码， 不是HTML。

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hi, I am a react App </h1>
      </div>
    );
  }
}

JSX restrictions

1. class name can't be used in css. need to use className.
2. JSX must have one root element per component.
3. return 后面有 括号

Functional component

component分两种一种是Functional component，这种没有状态，stateless
另一种是class component
自已写的component最好用首字母大写。

import React from 'react';

const person = () => {
    return <p> I am a person!</p>
};
export default person;

用花括号

  return <p> I am {Math.floor(Math.random() * 30)} years old!</p>
};

Working with props
props.children特指尖括号中间的。
props里面可以放任何key value pair

<Person name="Alvin" age="28"/>
<Person name="Alice" age="22"> My hobby: Dance</Person>

return (
    <div> 
        <p> I am {props.name} and I am {props.age} years old!</p>
        <p> {props.children} </p>
    </div>
    )

state

Component class 里面可以 有state
state 是个保留字
state和props的改变会让react重新render