react 打包android react 打包后配置怎么改

注意事项（报错）

npm install -g cnpm --registry=https://registry.npm.taobao.org
'react-scripts' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

    // 有时在安装完其他组件后，再次运行 npm start 命令时会报以上错误，
    ## 解决方案1：
    npm install react-scripts
    安装完成后再次运行 npm start 即可
    ## 解决方案2：
    删除modules 文件
    npm install
    安装完成后再次运行 npm start 即可

安装的单词缩写

==> i = install （安装）
> -g = global (全局)

> -S = --save (发布到开发环境)

> -D = --save-dev (发布到生产环境)

引入了三个库文件

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

安装公共仓库

###### npm i redux -S

创建 store -> index.js  reducer.js  actionCreators.js  actionTypes.js

// index.js (调试工具>安装 REDUX_DEVTOOLS)

import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;

// actionTypes.js  
export const CHANGE_INPUT_VALUE = 'change-inpue-value';

// actionCreators.js      
import { CHANGE_INPUT_VALUE } from './actionTypes';
export const getInputChangeAction = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
});

//  reducer.js
import { CHANGE_INPUT_VALUE } from './actionTypes';
const defaultState = {
    inputValue: '222',
    list: ['ewewee','ewewe']
};
export default (state = defaultState, action) => {
    if (action.type === CHANGE_INPUT_VALUE) {
        const NewState = JSON.parse(JSON.stringify(state));
        NewState.inputValue = action.value;
        return NewState;
    }
    return state;
}


// 组件调用

import store from './store/index'
import { getInputChangeAction } from './store/actionCreators';

constructor(props) {
    super(props);
    console.log(store.getState())
    this.state = {

    }
    this.chageget = this.chageget.bind(this)
    store.subscribe(this.chageget) // 数据改变是更新
}

chageget() {
    console.log(store.getState())
}

// 获取数据

store.getState()

 // 添加数据

handleInputValue(event) {
<!--const action = {-->
<!--  type: 'change_input_value',-->
<!--  value: event.target.value-->
<!--}-->
const action = getInputChangeAction(event.target.value);
store.dispatch(action);
};

缓存

数据放入缓存
localStorage.setItem('user',values.username);

缓存中取数据
localStorage.getItem('user');

插件

npm i react-redux -S

中间件

npm i redux-thunk -S

// index.js (调试工具>安装 REDUX_DEVTOOLS)
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const composeEnhancers =  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
    applyMiddleware(thunk),
)
const store = createStore(reducer,enhancer);
export default store;

// actionCreators.js
import { CHANGE_INPUT_VALUE } from './actionTypes';
import axios from 'axios';  
export const getInputChangeAction = (value) => ({
type: CHANGE_INPUT_VALUE,
value
});
export const getList = () => {
return (dispatch) => {
    axios.get(url ,{page: 1, limit: 10, token:token}).then((res)=>{
        const data = res.data.data.list;
        const action = getInputChangeAction(data);
        dispatch(action);
    })
}
}

 // 组件调用
import store from './store/index';
import { getInputChangeAction, getList } from './store/actionCreators';

getList() {
const action = getList();
store.dispatch(action);
}


npm i redux-sage -S

安装路由 react-router-dom

npm i react-router-dom -S

// index.js 入口文件
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';   // 框架样式
import './index.css';       // 自定义样式
import Index from './view/common/index';  // 首页的路径
import { BrowserRouter } from 'react-router-dom'; // 路由文件
// HashRouter 和 BrowserRouter 都能实现跳转  HashRouter 前多个 #

ReactDOM.render(
    // 必须要包住路径才能实现跳转
    <BrowserRouter> 
        <Index />
    </BrowserRouter>
, document.getElementById('root'));


// 新建 router ->index.js
import React from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import Index from '../view/index/index';

export default class Routers extends React.Component{
    render() {
        return(
            <Switch>
                <Route path="/" exact render={()=>(<Redirect to="/index" />)}/>
                <Route path="/index" component={Index}/>
            </Switch>
        )
    }
}

方法跳转：

this.props.history.push('/download')
跳转到外链：

window.location.href = 'https://你的url'

数据获取 axios

npm i axios  -S

在package.json中
  "proxy": "http://service.n.co"


import React from 'react';
import { Table } from 'antd'; // antd UL
import axios from 'axios';  

export default class User extends React.Component{
  constructor(props){
    super(props)
    this.state={
      data: []

    }
  };
    componentWillReceiveProps(){
        this.getData();
    }
    getData(){
      let that = this;
      axios.get('/backend/account/index',{page: 1, limit: 10, token:token})
      .then((res)=>{
          that.setState({data:res.data.data.list})
      })
      .catch((error)=>{
      });
    };

    render() {
        return(
            <Table dataSource={this.state.data} rowKey="id" />
        )
    }
}

antd ul 安装

npm i antd  -S

https://ant.design/docs/react/use-with-create-react-app-cn

安装：开发环境

修改配置环境,以适应antd(官网参考)

npm i react-app-rewired -D

npm i babel-plugin-import -D  // 按需加载

语法：

//站位符可以替代最外围标签

    <Fragment>

//构造函数

    constructor(props) {
    super(props); //调用方法
    this.state = { // 组件状态
        }
    }

// 展开运算符

    this.setState({
                list: [...this.state.list, this.state.inputVal ],
                inputVal: ''
            })

// immutable
// state 不予许我们做任何改变

// 转意
dangerouslySetInnerHTML={{__html: item }}

//  lable 标签

    <label htmlFor="inp">输入类容</label>
                <input id="inp" className="input" value={this.state.inputVal} onChange={this.changInput.bind(this)} />
                <button onClick={this.btnClick.bind(this)}>提交</button>

代码优化

// 绑定事件
this.btnClick = this.btnClick.bind(this);

// 循环渲染封装方法

getList() {
    return this.state.list.map((item, index) => {
        return (
            <List 
                key={index}
                content={item}  // 向子组件传值
                index={index}
                del={this.del}// 向子组件传方法
            />
        )
    })
}
// 子组件调用
render() {
    const { content } = this.props;
    return(
        <div onClick={this.leClick}>
            {content}
        </div>
    )
}

leClick() {
    const { del, index } = this.props;
    del(index);
}

// es6改变状态值方法

this.setState((prevState) => ({
        list: [...prevState.list, prevState.inputVal ],
        inputVal: ''
    }));

    del(index) {
    this.setState((prevState) => {
        let list = [...prevState.list];
        list.splice(index, 1);
        return {list}
    });
}

// 传值类型

npm install --save prop-types
    import PropTypes from 'prop-types';
    List.propTypes = {
        test: PropTypes.string.isRequired, //必须传
        test: PropTypes.arrayOf(PropTypes.string, PropTypes.number), // 或者
        content: PropTypes.string,
        del: PropTypes.func,
        index: PropTypes.number
    }
    // 默认值
    List.defaultProps = {
    test: 'hello'
}

调试工具

Reactdevelopertools  REDUX_DEVTOOLS
安装及使用

谷歌浏览器 => 更多工具 => 扩展程序 => 打开谷歌应用商店 => 搜索 react => 安装
=> 浏览器中打开开发者工具 => react

tiryLi