index.js
// Import React when the system is web import React from 'react'; import { AppRegistry, View } from 'react-native' import { createStore } from 'redux' import { Provider } from 'react-redux' import { persistStore, autoRehydrate } from 'redux-persist' // Import the reducer and create a store import { reducer } from './todoListRedux' // Add the autoRehydrate middleware to your redux store const store = createStore(reducer, undefined, autoRehydrate()) // Enable persistence persistStore(store) // Import the App container component import App from './App' // Pass the store into the Provider const AppWithStore = () => ( <Provider store={store}> <App /> </Provider> ) AppRegistry.registerComponent('App', () => AppWithStore) // Import React when the system is web AppRegistry.runApplication('App', { initialProps: {}, rootTag: document.getElementById('react-app') })
App.js
import React, { Component } from 'react' import { AppRegistry, View } from 'react-native' import { connect } from 'react-redux' import { actionCreators } from './todoListRedux' import List from './List' import Input from './Input' import Title from './Title' const mapStateToProps = (state) => ({ todos: state.todos, }) class App extends Component { onAddTodo = (text) => { const {dispatch} = this.props dispatch(actionCreators.add(text)) } onRemoveTodo = (index) => { const {dispatch} = this.props dispatch(actionCreators.remove(index)) } render() { const {todos} = this.props return ( <View> <Title> To-Do List </Title> <Input placeholder={'Type a todo, then hit enter!'} onSubmitEditing={this.onAddTodo} /> <List list={todos} onPressItem={this.onRemoveTodo} /> </View> ) } } export default connect(mapStateToProps)(App)
webpack.config.js
var path = require('path') var webpack = require('webpack') module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { loaders: [ // { // test: /\.js$/, // loader: 'jsx-loader?harmony' // }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react', 'stage-0'] // plugins: ['transform-runtime'] } } ] }, resolve: { alias: { 'react-native': 'react-native-web' }, extensions:['','.js','.json'] } }
相关推荐
React 全栈项目:招聘网站(react+react-router-dom+redux+react-redux+redux-thunk+axios ) 项目描述: 此项目为一个前后台分离的招聘的 SPA, 包括前端应用和后端应用 包括用户注册/登陆, 大神/老板列表, 实时...
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的...基于react+react-router+redux+AntD+Echarts+es6+webpack的共享单车后台管理系统源码+项目说明.zip
搭建项目 ...3) redux+react-redux+redux-thunk 管理应用组件状态4) 学会使用 antd-mobile 组件库构建界面 5) mongoose 操作 mongodb 数据库 6) express 搭建后台路由 7) socket.io 实现实时通信 8) blue
react+redux+react-router+webpack+sass保险类项目。 完整的react全家桶架构,架构理念为减少垃圾代码,避免被action等绕晕。
react-基于ReactReduxReactRouterWebpack的前端脚手架
React + React-Router 4 + Redux + Ant Design + Webpack 4带有热重载和redux-devtools-extension入门 :warning_selector: Ant Design仍在升级到ReactJS 16.3新生命周期,因此,应用目前无法正常运行完整的Ant ...
项目react-redux-cli说明React + React-Router + TS + JS +蚂蚁设计+ webpack4.0脚手架业务介绍目录结构├── dist // 编译结果目录├── build // webpack 配置目录│ ├── webpack.base.js // 公用配置│ ├─...
3) redux+react-redux+redux-thunk 管理应用组件状态4) 学会使用 antd-mobile 组件库构建界面 5) mongoose 操作 mongodb 数据库 6) express 搭建后台路由 7) socket.io 实现实时通信 8) blueimp-md5 对密码进行 MD5 ...
react+redux+reactRouter+webpack+antd 实现的demo
像哺乳动物/ react-native-redux-webpack-example 易于复制的react-native-redux-webpack代码库示例,用于分发React组件。发展npm run dev运行示例cd example/; npm run dev打开以查看示例测验npm test执照用 :...
react全栈,redux,flux,webapck,babel整合开发,全部流程。。。
React + Redux + Redux Thunk + Redux Multi + Redux Promise + Redux表单+ Webpack + Bootstrap 4 简单和可扩展的Web应用程序样板。安装git clone ...
react-redux-rxjs-starter-kit一个集成React全家桶的脚手架,主要技术栈:react16 + routerV4 + redux + webpack3 + redux-observable + rxjs + scss + less + css modules + react-hmre + eslint + 组件异步加载 + ...
一个react模板,使用react,react-dom,webpack,打字稿,redux,react-redux,redux-logger,redux-thunk,redux-promise,connected-react-router ... 它现在有一些页面,您可以将这些页面用作其他页面的示例...
React 16.9+(Typescript)React-Router 4 + Redux + Bootstrap + Webpack 4带有热重载和redux-devtools-extension STARTER 我最好的React + redux项目入门者。 webpack尽可能简单 ReactJS是用optimization tricks...
webpack-react-redux-server-side-render-example, 带有服务器端呈现的示例 React/Redux/Webpack 项目 这里示例项目演示了一个反应/redux应用程序,其中带有与 web service绑定的可选服务器端呈现。功能反作用力...
React全栈++Redux+Flux+webpack+Babel整合开发
react-typescript-webpack 前端纱安装해야함 npm运行开始npm运行构建npm运行故事书npm --max-old-space-size = 8192运行开始