Recap

review

• React: component
• ReactDOM and JSX
• DOM and Virtual DOM
• React functional components
• React props
• ES6 basics

react stateful component

• React class component
• Closure* and Scope
  (function->varibale)
  (function->scope,const->scope, let->scope
  js memory:能用let，不用var)
• React state
• Component lifecycle
• Implement a stateful component

Event list

• Event handling in React
• Rendering list in React
• Forms handling in React

async/await

A special syntax to work with promise in a more comfortable fashion

Redux+React

1. Single source of truth
2. State is read-only (UI-action-redux-redux store-UI)
3. Changes are made with pure functions

项目练习

npx create-react-app redux
npm install redux react-redux
(npm install --save redux
npm install --save react-redux)

action文件夹
--index.js

export * from "./user";

--user.js

export function changeUserName({ userName }) {
    return {
        type: "CHANGE_USER_NAME", //compulsory key!
        userName
    };
}

reducers文件夹
--index.js

import { combineReducers } from "redux";
import user from "./user";

export default combineReducers({
    user
});

--user.js
···
export const user = (state = {}, action) => {
switch (action.type) {
case "CHANGE_USER_NAME":
return {
...state,
username:action.userName
}
default:
return state;
}
};
export default user;
···
..
index,js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
let initialStore = {
};
const store = createStore(rootReducer, initialStore);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

app.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

import {connect} from 'react-redux'
import {changeUserName} from './actions'


class App extends React.Component {
  changeUserName = () => {
    this.props.changeUserName({
    userName: "Mao Zedong"
    });
  };
  render() {
    return (
      <div>
         Hi! {this.props.userName}
        <button onClick={this.changeUserName}>Click to change username</button>
      </div>
    );
    }
  }
function mapStateToProps(state) {
    const { user } = state;
    return {
      userName: user.userName,
      status: user.status
    };
}
export default connect(
    mapStateToProps,
    { changeUserName }
)(App);