学习react框架推荐

网友投稿 759 2022-10-18

学习react框架推荐

学习react框架推荐

learn-react

前言

react全家桶 尽可能集成一些好玩的东西

github地址：https://github.com/lmr520/learn-react.git

脚手架

generator-react-webpack

Installation

npm install -g yonpm install -g generator-react-webpack

Setting up projects

# Create a new directory, and `cd` into it:mkdir my-new-project && cd my-new-project # Run the generatoryo react-webpack

技术栈

react+react-router+redux+ webpack + ES6 + fetch+antd + uppy + bizCharts

项目结构

│ .babelrc│ .editorconfig│ .eslintrc│ .gitignore│ .yo-rc.json│ karma.conf.js│ package.json│ prod.server.js│ server.js│ shop.json│ tree.txt│ webpack.config.js│ ├─cfg│ base.js│ defaults.js│ dev.js│ dist.js│ test.js│ ├─dist│ ├─src│ │ favicon.ico│ │ index.html│ │ index.js│ │ routes.js│ │ │ ├─actions│ │ index.js│ │ README.md│ │ │ ├─api│ │ shop.json│ │ │ ├─components│ │ Destination.js│ │ Detail.js│ │ Index.js│ │ Main.js│ │ Plan.js│ │ │ ├─config│ │ base.js│ │ dev.js│ │ dist.js│ │ README.md│ │ test.js│ │ │ ├─constants│ │ ActionTypes.js│ │ │ ├─images│ │ │ ├─reducers│ │ cart.js│ │ count.js│ │ history.js│ │ index.js│ │ │ ├─sources│ │ │ ├─stores│ │ │ └─styles│ App.css│ └─test

目标功能

商品浏览页面 -- 完成 商品详细页面-- 完成 购物车页面-- 完成 历史记录页面 -- 完成

项目运行

注意：由于涉及大量的 ES6 等新属性，nodejs 必须是 6.0 以上版本 。

git clone https://github.com/hua1995116/react-shopping.git cd react-shoppingnpm installnpm run start //运行npm run dist //打包

说明

如果本项目对于你有帮助，请顺手进github点个star

该项目已经在windows 7和mac进行测试。

推荐一个vue2 的实战项目（仿网易云音乐） http://blog.csdn-/blueblueskyhua/article/details/68156734

另外推荐一个 vue2 + vuex 的实战项目（实时聊天系统，有后台代码）。http://blog.csdn-/blueblueskyhua/article/details/70807847

如果有什么更好的建议或者问题，请及时再下方评论留言。

效果演示

改天放服务器

核心代码说明

"react": "^15.0.0" 原本的 react package 被拆分为 react 及 react-dom 两个 package 详细看官方api： https://facebook.github.io/react/

"react-router": "^4.1.1" React Router V4 基于 Lerna 管理多个 Repository。在此代码库包括：

react-router React Router 核心react-router-dom 用于 DOM 绑定的 React Routerreact-router-native 用于 React Native 的 React Routerreact-router-redux React Router 和 Redux 的集成react-router-config 静态路由配置帮助助手 api ：https://reacttraining.com/react-router/web/guides/quick-start

src/index.js

import 'core-js/fn/object/assign'import React from 'react'import ReactDOM from 'react-dom' // 14.0版本后拆分成react和react-demoimport { createStore ,applyMiddleware } from 'redux'import { Provider } from 'react-redux'import Main from './components/Main'import { createLogger } from 'redux-logger'import thunk from 'redux-thunk'import reducer from './reducers'import 'antd/dist/antd.css'import './styles/App.css'import { getAllProducts } from './actions'const middleware = [ thunk ] // redux-thunk解决异步回调if (process.env.NODE_ENV !== 'production') { middleware.push(createLogger())}const store = createStore(reducer, applyMiddleware(...middleware) // 中间件)store.dispatch(getAllProducts()) //获取全部商品// Render the main component into the domReactDOM.render(

,document.getElementById('app'))

主要定义了一些依赖。以及主入口模版文件Main.js

src/components/Main.js

import React from 'react'import { BrowserRouter as Router, Route, Link} from 'react-router-dom'import {connect} from 'react-redux'import Index from './index'import Destination from './Destination'import Plan from './Plan'import Detail from './Detail'import {Menu, Icon} from 'antd'const SubMenu = Menu.SubMenuconst Basic = () => (

操作}> 主页 购物车 购买记录
)export default connect()(Basic)

效果图

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：js
上一篇:UDP通讯程序设计
下一篇:基于SSM的高校运动会管理网站-计算机毕业设计源码
相关文章

 发表评论

暂时没有评论，来抢沙发吧~