A Bite Of React(1)

react:

component and views : produce html abd add them on a page( in the dom)

<import React from 'react'> // core react library, know how to work with component. Create or manage a Dom
<import ReactDOM from 'react-dom'> //render component to dom

const App = function(){
    return <div>HI!</div>
}; // this is a component class, could produce a lot of instance.

• ES6

const: ES6 syntax, declare a variable. And which means it won't change because it is constant
JSX:

1. subset of javascript which looks like html but cannot be interpreted by browser.
2. JSX could produce HTML
3. JSX could be compiled into vanilla javascript( which means plain JS without any additional libraries)

ReactDOM.render(<App />, document.querySelector('.container')); //render component into dom
// transpire would translate JSX into javascript
// <App />is a simple instance of component App

•  functional based component: take in some info and give out some JSX(can contain some class based component)

const App1 = () => {
    return (
　　　　<div>
　　　　　　<SearchBar />
　　　　</div>;
　　);
}
// => equals to keyword:this

•  class based component: react user events, keep track of state from render pass to render pass.

每一个class based component 都有一个state object，state is a plain javascript object that used to record and react to user events.

如果state发生了改变，则这个component会将这个改变render到dom中。

我们把不同的component放在不同的文件中，由于文件之间彼此独立，所以我们需要declare the relationships between files.

• event handeler：每当事件触发时就会被triggered

on+element+event（onChange）

class SearchBar extends React.Component {
    constructor(props) {//constructor初始化
        super(props);//super调用react.component中的初始化方法
        this.state = {term: ''}; //create a new object and pass it to state(只有在)
        //functional components dose't have;
    }
    render() { //render function must return some JSX
        return (
            <div>
            <input onChange={event => this.setState({ term: event.target.value})}/>//event handler, 用this.setState来改变state
            Value of the input: {this.state.term}//通过{}来引用值
            </div>
            );
        //event

• controlled components

state tell the input what it should be

1 render instance of search bar 2 constructor called to new a instance 3 the component renders, the initial value of the input is the is the term.

4 wait for the event, eventhandler changed the state is changed.But the input value hasn't changed. 5 when the render method is used again , then the value has changed by the state.

render() { //render function must return some JSX
        return (
                <div>
            <input
                value = {this.state.term} //controlled component value set by state
                onChange={event => this.setState({ term: event.target.value})}/>
            </div>
            );
        //eventHandeler would be triggered whenever the event occurs
    }

 

•  downward data flow: most parent component responsible for fetching data

so index.js App should be responsible for fetching data. And all the other 

use state to