React框架确实能简化代码，可以与不加框架的作对比，大家看一下
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../build/browser.min.js"></script>
<script src="../build/react.js"></script>
<script src="../build/ReactRouter.min.js"></script>
<script src="../build/react-dom.js"></script>
<script language='javascript' src="../build/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/Index.css">
<script language='javascript' src="../build/underscore-min.js"></script>
<script language='javascript' src="../build/underscore.js"></script>
<!--<script src="../REACT/build/JSXTransformer.js" type="text/jsx"></script>-->
<script type="text/babel" src="../JS/Order.js"></script>
<script type="text/babel" src="../JS/Index.js"></script>
<script type="text/babel" src="../JS/Customer.js"></script>
<script type="text/babel" src="../JS/Resaturant.js"></script>
<script type="text/babel" src="../JS/FoodList.js"></script>
<script type="text/babel" src="../JS/ViewOrder.js"></script>
</head>
<body>
<script type="text/babel" src="../JS/ReactRouter.js"></script>
<div id="root"></div>
</body>
</html>
JS：
(1)Customer.js
/**
* Created by lixuefeng on 16-1-16.
*/
window.CustomerList=React.createClass({
getInitialState:function(){
return {
customers:[]
}
},
componentDidMount:function(){
var self=this;
$.ajax({
url:"../JSON/Customers.json",
dataType:"json",
async:true,
success:function(data){
console.log(data)
self.setState({
customers: data.man
})
}
})
},
back_to_order:function(){
this.props.history.pushState(null,'/Order')
},
handleClick:function(data){
localStorage.setItem('man',data)
this.props.history.pushState(null,'/Order')
},
render: function() {
var customersHtml= _.map(this.state.customers,function(men){
return (
<li className='apper'>
<div className='css_button_style' onClick={this.handleClick.bind(this,men)}>{men}</div>
</li>
)
},this)
return (
<div>
<div className='order'>
<li className='apper'>
<button className='back' onClick={this.back_to_order}>back</button>选人</li>
</div>
<div className='distan'>
{customersHtml}
</div>
</div>
)
}
});
//ReactDOM.render(
// <CustomerList/>,
// document.getElementById("root")
//);
(2)FoodList.js
/**
* Created by lixuefeng on 16-1-17.
*/
window.FoodList=React.createClass({
getInitialState:function(){
return {
foods:[]
}
},
componentDidMount:function(){
var self=this;
$.ajax({
url:"../JSON/GoodsList.json",
dataType:"json",
async:true,
success:function(item){
console.log(item)
self.setState({
foods:item.food_lists[localStorage.getItem("shop")]
})
}
})
},
back_to_order:function(){
this.props.history.pushState(null,'/Order')
},
handleClick:function(foods,price){
localStorage.setItem("food",foods)
localStorage.setItem("mon",price)
this.props.history.pushState(null,'/Order')
},
render:function(){
var foodListHtml=_.map(this.state.foods,function(item){
return(
//console.log(item)
<li className='apper'><div className='choose-style' onClick={this.handleClick.bind(this,item.food,item.price)}>{item.food}<p className='css_font_style'><p className='same_body'>￥{item.price}</p></p></div></li>
)
},this)
return (
<div>
<div className="order">
<li className="apper">
<button className="back" onClick={this.back_to_order}>back</button>选套餐</li></div>
{foodListHtml}
</div>
)
}
})
//ReactDOM.render(
// <FoodList/>,
// document.getElementById("root")
//);
(3)Restaurant
/**
* Created by lixuefeng on 16-1-17.
*/
window.Resaturant=React.createClass({
getInitialState:function(){
return {
resaturant:[]
}
},
componentDidMount:function(){
var self=this;
$.ajax({
url:"../JSON/Rest.json",
dataType:"json",
async:true,
success:function(item){
console.log(item)
self.setState({
resaturant:item.rest
})
}
})
},
back_to_order:function(){
this.props.history.pushState(null,'/Order')
},
handleClick:function(data){
localStorage.setItem("shop",data)
this.props.history.pushState(null,'/Order')
},
render:function(){
var resaturant_list= _.map(this.state.resaturant,function(shop){
return (
<li className='apper'>
<div className='css_button_style' onClick={this.handleClick.bind(this,shop)}>{shop}</div>
</li>
)
},this)
return (
<div>
<div className='order'>
<li className='apper'>
<button className='back' onClick={this.back_to_order}>back</button>选餐厅</li>
</div>
<div className='distan'>
{resaturant_list}
</div>
</div>
)
}
})
//ReactDOM.render(
// <Resaturant/>,
// document.getElementById("example")
//);
(4)Index.js
/**
* Created by lixuefeng on 16-1-17.
*/
window.Index=React.createClass({
showOrder:function(){
this.props.history.pushState(null,'/Order')
},
viewOrder:function(){
this.props.history.pushState(null,'/ViewOrder')
},
render:function(){
return(
<div>
<div className="order">订餐</div>
<div className="choose" onClick={this.showOrder}>帮订餐
</div>
<div className="choose" onClick={this.viewOrder}>看订单
</div>
</div>
)
}
})
//ReactDOM.render(
// <Index/>,
// document.getElementById("root")
//);
(5)Order.js
/**
* Created by lixuefeng on 16-1-17.
*/
window.Order = React.createClass({
getInitialState:function(){
return {
Foods:"",
Shops:"",
Mans:""
}
},
componentDidMount:function(){
if (!(document.getElementById("rest").value != "" && document.getElementById("name").value != "" && document.getElementById("food").value != "")) {
$("#test").attr({"disabled":"disabled"})
}
else{
$("#test").removeAttr("disabled")
}
this.setState({
Foods:localStorage.getItem("food"),
Shops:localStorage.getItem("shop"),
Mans:localStorage.getItem("man")
});
},
getInfo: function() {
var all_info = {
man: localStorage.getItem("man"),
shop: localStorage.getItem("shop"),
mon: localStorage.getItem("mon"),
food: localStorage.getItem("food"),
};
var local_info=JSON.parse(localStorage.getItem("infor")) || [];
local_info.push(all_info);
localStorage.setItem("infor", JSON.stringify(local_info));
},
cleanItem:function(){
console.log("-------start-------------")
console.log(this.state.Mans)
console.log("------------------")
this.setState({
Foods:"",
Shops:"",
Mans:""
});
console.log("------------------")
console.log(this.state.Mans)
console.log("-------end------------")
localStorage.removeItem("man");
localStorage.removeItem("shop");
localStorage.removeItem("food");
localStorage.removeItem("mon")
},
handleClick:function() {
console.log("------------------")
this.getInfo();
this.cleanItem();
},
back_to_order:function(){
this.props.history.pushState(null,'/')
},
back_to_customer:function() {
this.props.history.pushState(null,'/Customer')
},
beck_to_resaturant:function () {
this.props.history.pushState(null,'/Resaturant')
},
beck_to_foodlist:function () {
this.props.history.pushState(null, '/FoodList')
},
render:function(){
return(
<div>
<div className="order">
<li className="apper">
<button className="back" onClick={this.back_to_order}>back</button>
订单显示
</li>
</div>
<div className="top_distance"> </div>
<div className="font_distance">人：</div>
<input className="input_font" id="name" value={this.state.Mans} name="input_one" type="text" disabled/>
<div id="bin_go" type="button" className="button_order" onClick={this.back_to_customer}>选人 </div>
<div className="font_distance">餐厅：</div>
<input className="input_font" id="rest" value={this.state.Shops} name="shop_input" type="text" disabled/>
<div id="bin_way" className="button_order" type="button" onClick={this.beck_to_resaturant}>选餐厅</div>
<div className="font_distance">套餐：</div>
<input className="input_font" id="food" value={this.state.Foods} name="input_food" type="text" disabled/>
<div id="bin_stop" className="button_orders" onClick={this.beck_to_foodlist}>选套餐</div>
<div id="test" className="button_ensure" onClick={this.handleClick} >确认</div>
</div>
)
}
})
(6)ViewOrder.js
/**
* Created by lixuefeng on 16-1-17.
*/
window.View=React.createClass({
getInitialState:function(){
return{
foods:[],
customers:[],
}
},
componentDidMount:function(){
this.setState({
foods:JSON.parse(localStorage.getItem("infor")||"[]")
});
var self=this;
$.ajax({
url:"../JSON/Customers.json",
dataType:"json",
async:true,
success:function(item){
self.setState({
customers:item.man
})
}
})
},
back_to_order:function(){
this.props.history.pushState(null,'/')
},
render:function(){
console.log(this.state.foods)
var order_num = [];
var order_list_html= _.map(this.state.foods,function(item){
if (order_num.indexOf(item.man) == -1) {
order_num.push(item.man);
}
console.log(order_num.length)
console.log(order_num)
var change_color=(item.mon>12.00)?"red":"black";
return (
<div>
<div className='someone'><span className='return-na'>{item.man}</span><span className='return-pr'>{item.shop+" "+item.food}</span><span className='return' id="price_num" style={{color:change_color}}>￥{item.mon}</span></div>
</div>
)
})
var no_order_array=[];
var no_order_num= _.map(this.state.customers,function(item){
if (order_num.indexOf(item) == -1) {
no_order_array.push(item);
}
});
var no_order_array_html= _.map(no_order_array,function(names){
return (
<div className='someone'><span className='per_no'>{names}</span></div>
)
})
var sum=0
var sum_price= _.map(this.state.foods,function(some){
var cost=JSON.parse(some.mon)
sum+=cost
})
return (
<div>
<div className="order">
<li className="apper">
<button className="back" onClick={this.back_to_order}>back</button>
订单显示
</li>
</div>
<div className="num"> {order_num.length}人已定
</div>
{order_list_html}
<div className="num"> {no_order_array.length}人未订
</div>
{no_order_array_html}
<div className="last">{order_num.length}人已定, {no_order_array.length}人未订, 总计{sum.toFixed(2)}元
</div>
</div>
)
},
})
//ReactDOM.render(
// <View/>,
// document.getElementById("root")
//);
//{order_list_html}
//{no_order_array_html}
//<div className="last">{order_num.length} 人已定, {no_order_array.length}人未订, 总计{sum}元
//</div>
(7)ReactRouter.js
/**
* Created by lixuefeng on 16-1-26.
*/
var ReactRouter = window.ReactRouter;
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var routes=(
<Router>
<Route path="/" component={window.Index}/>
<Route path="Order" component={window.Order}/>
<Route path="Customer" component={window.CustomerList}/>
<Route path="Resaturant" component={window.Resaturant}/>
<Route path="FoodList" component={window.FoodList}/>
<Route path="ViewOrder" component={window.View}/>
</Router>
);
ReactDOM.render(routes,document.getElementById("root"));
Json:
1.
{
"man" : [
"赵大",
"钱二",
"张三",
"李四",
"王五",
"赵六"
]
}
2.
{
"food_lists": {
"KFC": [
{
"food": "田园脆鸡堡",
"price": "10.00"
},
{
"food": "黄金咖喱猪排饭",
"price": "23.50"
}
],
"7-11": [
{
"food": "田园脆鸡堡",
"price": "10.00"
},
{
"food": "黄金咖喱猪排饭",
"price": "23.50"
},
{
"food": "意式肉酱肉丸饭",
"price": "16.00"
},
{
"food": "老北京鸡肉卷",
"price": "14.00"
}
],
"成都小吃": [
{
"food": "田园脆鸡堡",
"price": "10.00"
},
{
"food": "黄金咖喱猪排饭",
"price": "23.50"
},
{
"food": "意式肉酱肉丸饭",
"price": "16.00"
},
{
"food": "老北京鸡肉卷",
"price": "14.00"
},
{
"food": "劲脆鸡腿堡",
"price": "15.00"
}
]
}
}
3.
{
"rest": [
"KFC",
"7-11",
"成都小吃"
]
}
相关推荐
React框架 React框架 React框架
React框架：深度解析与应用场景 仅供学习交流！ 后续会持续分享相关资源，记得关注哦！ React框架：深度解析与应用场景 React框架：深度解析与应用场景 React框架：深度解析与应用场景 React框架：深度解析与应用...
react框架基础讲解，react的使用规范及react的起源和发展历程，详细介绍react的组件使用，数据传递等。
React框架是目前Web开发中最流行的JavaScript库之一，由Facebook维护并开源。它主要用来构建用户界面，特别是单页面应用程序（SPA）。React的核心理念是组件化，它允许开发者将UI拆分成独立、可重用的组件，每个组件...
基于react框架的企业后台管理开发框架基于react框架的企业后台管理开发框架基于react框架的企业后台管理开发框架基于react框架的企业后台管理开发框架基于react框架的企业后台管理开发框架基于react框架的企业后台...
React框架搭建是一个重要的前端开发步骤，它涉及到一系列的技术和工具，包括React库本身、React-Redux用于状态管理以及可能的Express.js用于后端服务。在这个过程中，开发者需要掌握如何配置项目环境，安装必要的...
React框架是目前非常流行的前端开发库，主要用于构建用户界面，尤其适合单页应用程序（SPA）。在本项目中，我们基于React、MobX状态管理和Ant Design UI库搭建了一个基础的项目框架，非常适合新手入门学习。 首先，...
【标题】：“一个基于 umi 的移动 React 框架” 在现代Web应用开发领域，React作为一款流行的JavaScript库，已经成为了构建用户界面的首选工具。然而，仅使用React进行大型项目的开发可能会变得复杂，因此出现了...
### 什么是React框架 React框架，也常被称为React.js或简称为React，是一个由Facebook开发并维护的开源JavaScript库，主要用于构建用户界面。React自2013年首次发布以来，迅速成为前端开发领域的核心工具之一，其...
React的UI框架，如Ant Design、Material-UI、Chakra UI等，都提供了预设样式和布局的幻灯片组件，但如果你需要定制特定的幻灯片样式或功能，可能会选择创建自定义的React幻灯片框架。在"react-presents-master"这个...
一个基于react框架的资源文件 练习，xiaoyoushop分支是小优后台，screen分支是大屏项目，react分支是基于react框架，使用ts语言，vite构建的一个后台管理系统项目 练习，xiaoyoushop分支是小优后台，screen分支是...
react框架搭建.xmind
### React框架课程套装知识点解析 #### 一、React框架简介 React 是一个用于构建用户界面的 JavaScript 库，尤其适用于单页应用 (SPA) 的开发。它由 Facebook 开发并维护，自 2013 年开源以来，迅速成为前端开发...
React框架学习
详细讲解React前端框架； 流行的前端框架都有哪些？详细讲解React前端框架； 流行的前端框架都有哪些？详细讲解React前端框架； 流行的前端框架都有哪些？详细讲解React前端框架； 流行的前端框架都有哪些？详细讲解...
react框架得路由最基本得案例 react框架得路由最基本得案例 react框架得路由最基本得案例 react框架得路由最基本得案例 react框架得路由最基本得案例 react框架得路由最基本得案例 react框架得路由最基本得案例 ...
在IT行业中，React框架是开发高效、高性能用户界面的首选工具之一，尤其在构建复杂的Web应用程序时。"基于React框架 仿钉钉审批流、工作流源代码"这个项目，显然是利用React的强大功能来模拟和实现类似钉钉的审批...
基于React框架实现的web端电商系统源码(课设新项目）.zip基于React框架实现的web端电商系统源码(课设新项目）.zip基于React框架实现的web端电商系统源码(课设新项目）.zip基于React框架实现的web端电商系统源码(课设...
Sortable-React在React框架下，基于TypeScript语法下的React组件，使用_sortable-react
React框架资源《word文档》 React框架资源可以大致分为以下几类： 一、官方文档与教程 React官方文档：React团队维护的官方文档是学习React框架的首选资源。最新的官方文档已经迁移到https://react.dev/。新文档...