react -- 项目搭建(Cordova+React)

目录

使用官方脚手架creact-react-app

使用webpack、babel、react来创建React项目

Cordova+React+Ant.design项目搭建

---

使用官方脚手架creact-react-app

1. 首先通过npm全局安装create-react-app

npm install -g create-react-app

2. 然后使用create-react-app命令来创建项目

create-react-app <项目名>

3. 启动项目

npm start

删除不必要的文件后梳理需要安装那些依赖

1.react-router-dom路由

2.axios

3.js-cookie

4.redux、react-redux状态管理

5.swiper  轮播图插件

6.node-sass sass-loader sass编译

7.react-transition-group  动画

使用命令进行安装

cnpm i react-router-dom axios js-cookie redux react-redux swiper node-sass sass-loader react-transition-group -D

安装完成后在main.js逐个引入

import {Provider} from 'react-redux';
import axios from 'axios';
import jsCookie from 'js-cookie';
import store from './store/store.js'  //redux需要一个仓库进行存储


React.Component.prototype.$axios = axios;
React.Component.prototype.$cookie = jsCookie;

ReactDOM.render(<Provider store={store}></Provider> ,document.getElementById('root'));

稍后创建store仓库，首先创建路由文件

在src下创建Router.js文件，写入

import React from 'react';
 2 import { BrowserRouter,Route,Switch } from 'react-router-dom'; //BrowserRouter 用来保持UI和URL的同步   Route负责匹配url的ui Switch只渲染一个路由
 3 
 4 import Header from ./components/Header     //引入一个普通页面
 5 import Page from './pages/page'    //引入一个需要路由的页面
 6 
 7 const BasicRoute = (props)=>{
 8     return (
 9        <BrowserRouter>
10             <div className="box">
11             <Header></Header>
12                  <Switch>
13                      <Route path='/' component={page}></Route>
14                  </Switch>
15             </div>  
16        </BrowserRouter>  
17     )
18 }
19 export default BasicRoute
20 
21//在main.js引入Router.js文件
22 import BasicRoute from './Router.js'
23 ReactDOM.render(<Provider stoer={store}> <BasicRoute></BasicRoute> </Provider>, document.getElementById('root'));

接着我们创建store仓库，首先在src下创建一个store的文件夹，创建store.js文件写入

import { createStore } from 'redux';
import reducers from './reducers.js';   //用来存放store仓库的逻辑代码和state数据

const store = createStore(reducers);

export defualt store;

创建reducers.js文件

const stateDefualt = {
    
}     //存放数据

const reducers = function(state=stateDefualt,action){

}   //用来存放逻辑代码
export defualt reducers;

创建两个文件夹components用来存放主要的组件，pages用来存放路由组件或者子组件，一般创建组件可以创建一个文件夹，里面存放两个文件Index.js和Header.js UI页面

//index.js  用来和redux进行联动
import { connect } from 'react-redux';
import Header from 'Header.js'   //引入UI页面

//用来获取redux的state的数据
const mapStateToProps = (state,props)=>({

})

//用来绑定时间修改state数据
const mapDispatchToProps = (dispatch)=>({

})

export default connect(mapStateToProps,mapDispatchToProps)(Header)

//Header.js用来写入UI代码
import React,{Component} from 'react';
class Header extends Component{
  constructor(){
     super();
     this.state = {      //定义数据
       
     }  
  }
   render(){
      return (
         <div>
         </div>
      )
   }
}
export default Header

参考：https://www.cnblogs.com/wayaoyao/p/11178604.html

 

使用webpack、babel、react来创建React项目

初始化项目

npm init -y

安装webpack

npm install webpack webpack-cli --save-dev

安装Babel

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

处理html

npm install html-webpack-plugin html-loader --save-dev

webpack.config.js文件内容如下：

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      titel: 'react app',
      filename: 'index.html',
      template: './src/index.html'
    })
  ]
};

 

Cordova+React+Ant.design项目搭建

1. 安装

npm install -g create-react-app cordova

2. 新建cordova项目

cordova create web

3. 在cordova项目根目录创建react项目

create-react-app src

安装ant.design mobile，引入 react-app-rewired 并修改 package.json 里的启动配置，由于新的 react-app-rewired@2.x 版本的关系还需要安装 customize-cra。

npm install antd-mobile --save
npm install react-app-rewired customize-cra --save-dev

4. 进入src目录，修改package.json

"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build && ((robocopy .\\build ..\\www /MIR) & exit 0)",,
   "test": "react-app-rewired test --env=jsdom",
}

5. 再src目录下，新建config-overrides.js

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
  return config;
};

// 或者
const { override, fixBabelImports } = require('customize-cra');
 module.exports = override(
       fixBabelImports('import', {
         libraryName: 'antd-mobile',
         style: 'css',//或者css, true代表运用less
       }),
     );

6. 安装Redux

npm install --save prop-types
npm install --save react-redux
npm install --save redux

7. 安装路由

npm install --save react-router-dom
npm install --save react-router-config

6. 开发时，使用

npm start

8. 手机调试使用
在src目录下

npm build 

在cordova项目根目录下 - 卡在gradle的话，网速问题

cordova platform add android
$ cordova run android