ailiu6134
ailiu6134

React笔记

React JS Tutorials for Beginners - 1 - Getting Started  https://www.youtube.com/watch?v=-AbaV3nrw6E&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA 
Downloads: https://facebook.github.io/react/downloads.html
Sample code:https://github.com/buckyroberts/React-Boilerplate

browser.min.js: Convert jsx into javascript, jsx转换网站https://babeljs.io/repl/

React JS Tutorials for Beginners - 2 - Simple Demo  https://www.youtube.com/watch?v=2NLgQMs2hOw&index=2&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA
Sample Demo:





3.
Components:





4. Props (Property)





5. Event Handling





6. State





7. Adding State to Components






8. Multiple Child Components (在一个容器内排序多个Components)




---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
constructor(){
    super();
    this.state={name: "Will"};
}

this.setState({name:"Bob"});

changeTitle={
     this.changeTitle.bind(this)}  //changeTitle方法在当前js文件中需要用.bind(this)

REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS   https://www.youtube.com/watch?v=1iAG6h9ff5s&index=6&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b

Bootstrap模版: startbootstrap.com
安装react router的命令: npm install -S react-router

Store类似于Angularjs中的Service.

componentWillMount(){
      //Component的构造函数
    TodoStore.on("change",this.getTodos);
}
componentWillUnmount(){ //必须卸载这个方法,不然会导致内存泄露.
    TodoStore.removeListener("change",this.getTodos);
}

npm install -S flux

Actions -> Dispatcher -> Stores -> Components -> Actions.

import * as TodoAcions from "../action/TodoAcions";  //表示TodoActions中的所有方法.

Ajax: axios("http://someurl.com/somedataendpoint").then((data)=>{
    console.log("got the data!",data);
});

Redux核心概念有三个：actions,store,reducers.

Immutable JS - Redux Tutorial #2 - React.js Tutorial  https://www.youtube.com/watch?v=9M-r8p9ey8U&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b&index=16
var a={name:"Will", things:[0,1,2]}
var b=Object.assign({},a,{name:"Fred"})
b.things=a.things.concat(3)

state={...state,age:action.payload}

Redux Middleware Tutorial - Redux Tutorial #5   https://www.youtube.com/watch?v=DJ8fR0mZM44&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b&index=19
中间件: import {applyMiddleware,createStore} from "redux";
const logger=(store)=>(next)=>(action)=>{
    console.log("action fired",action);
    next(action);
}
const store=createStore(reducer,1,middleware)

Connecting React & Redux - Redux Tutorial #7     https://www.youtube.com/watch?v=nrg7zhgJd4w&index=21&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b
import {connect} from "react-redux"

@connect((store)=>{
    return{
        user:store.user.user,
        userFetched:store.user.fetched,
        tweets:store.tweets.tweets,
    };
})
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ReactJS / Redux Tutorial - #1 Introduction     https://www.youtube.com/watch?v=qrsle5quS7A&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_     
npm install redux -save //安装redux

js中的对象:
const initialState = {
    result:1,  
    lastValues:[]
}

state = {
    ...state,  //ES6语法,包括state对象的所有属性
    result: state.result + action.payload,
    lastValues: [...state.lastValues,action.payload]
}

ReactJS / Redux Tutorial - #5 Multiple Reducers     https://www.youtube.com/watch?v=BVvBa18o8Es&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_&index=5
import {createStore, combineReducers} from "redux"
const store = createStore(combineReducers({mathReducer,userReducer}));

ReactJS / Redux Tutorial - #6 Redux Middleware   https://www.youtube.com/watch?v=AgO7YcJeBh4&index=6&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_
import {createStore, combineReducers, applyMiddleware} from "redux"
const myLogger = (store) => (next) => (action) => {
    console.log("Logged Action",action);
    next(action);
}
const store = createStore(combineReducers({mathReducer,userReducer}), {}, applyMiddleware(myLogger));

npm install redux-logger --save
import logger from "redux-logger";
const store = createStore(combineReducers({mathReducer,userReducer}), {}, applyMiddleware(logger()));


ReactJS / Redux Tutorial - #7 Connect ReactJS and Redux  https://www.youtube.com/watch?v=tfuZ7uZmVyg&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_&index=7
npm install react-redux --save
import {connect} from "react-redux";
import {Provider} from "react-redux";

    


const mapStateToProps = (state) => {
    return {
        user: state.userReducer,
        math: state.mathReducer
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        setName:(name)=>{
            dispatch({
                type:"SET_NAME",
                payload: name
            });
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(app);


this.props.setName("Anna")} />
this.props.user.name} />

ReactJS / Redux Tutorial - #8 Containers & Components (Smart & Dumb Components)   https://www.youtube.com/watch?v=m2q3Dyr6To4&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_&index=8
Dumb Components 只是方法不是类, 只需要return html不需要render.
Smart Components放在containers文件夹下, Dumb Components放在components下.

ReactJS / Redux Tutorial - #9 A better Project Structure    https://www.youtube.com/watch?v=YmGm-qwbJdc&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_&index=9
app 
    actions, components, containers(app.js), reducers
index.js
store.js

ReactJS / Redux Tutorial - #10 Async Actions   https://www.youtube.com/watch?v=h892pHdLQtM&index=10&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_
npm install redux-thunk --save
import thunk from "redux-thunk";
applyMiddleware(logger(),thunk)

npm install redux-promise-middleware --save
import promise from "redux-promise-middleware";
applyMiddleware(logger(),thunk,promise())
return {
    type:"SET_NAME",
    payload:new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve(name);
        },2000);
    })
}
Reducer.js中 case "SET_NAME_FULFILLED" //因为这个promise中间件,需要加上_FULFILLED
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Learning React.js [1] - An Overview  https://www.youtube.com/watch?v=vYldnghykaU&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO
when a state is changed, the component is re-rendered and markup will be updated. This makes React very dynamic.

Lifecycle Methods:
render - Renders a component. The only one that is required.
getInitialState - You can set default values for your states.
getDefaultProps - Set defaults for properties.
componentWillMount - Invoked once on client & server before render.
componentDidMount - Invoked after the first render.

React Addons:
Collection of modules that aid in developing React.js applications
Animation Addons
2 Way Data Binding Addons - React Link
Testing Addons

Learning React.js [2] - Your First Component   https://www.youtube.com/watch?v=mDz4HXZHo9g&index=3&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO
React网址: https://facebook.github.io/react/docs/getting-started.html







Learning React.js [3] - Adding Properties    https://www.youtube.com/watch?v=euSbXxCf88I&index=2&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO
propTypes:{
    title:React.PropTypes.string.isRequired
},
getDefaultProps: function(){
    return {
        title: "111",
        text: "222",
        link:"333"
    }
}

Learning React.js [4] - Events  https://www.youtube.com/watch?v=CVigtRUxj2I&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO&index=4
this.OnClick.bind(this, 'Hello','Goodbye')}>  //带参数的function
onClick: function(msg,msg2){
    alert(msg2);  //弹出Goodbye
}

Learning React.js [5] - State and Nesting Components   https://www.youtube.com/watch?v=_o9NTYfbkR0&index=6&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO
getInitialState: function(){
    return {
        text: 'Hello World'
    }
}


{
     this.state.text}


this.changeText} value={
     this.state.text} />
changeText: function(e){
    this.setState({text: e.target.value});   //setState, e.target.value
}

Learning React.js [6] - Mapping Data   https://www.youtube.com/watch?v=499IaPWLHKU&index=5&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO
React中的循环: