Recat Project： Step1 Build A Burger

创建空react文件

npm init react-app my-app

建立burger——从上至下

最高层——App.js

layout负责控制显示header和body；
BurgerBuilder负责显示body中的burger；

import React from 'react';
import Layout from './components/Layout/Layout';
import BurgerBuilder from './containers/BurgerBuilder/BurerBuilder';

function App() {
  return (
    <div >
      <Layout>
        <BurgerBuilder/>
      </Layout>
    </div>
  );
}

export default App;

页面layout.js

用AUX方法，将div和main一起return；
main中为layout标签内的内容——即BurgerBuilder；

import React from 'react';
import Aux from '../../hoc/Auxiliary';
import classes from './Layout.module.css';

const layout=(props)=>(
  <Aux>
    <div>Toolbar, SideDrawer, Backdrop</div>
    <main className={classes.Content}>
      {props.children}
    </main>
  </Aux>
);

export default layout;

BurgerBuilder——为statecomponent

含有状态，存放各个ingredient的数量；
将ingredient传入burger component；

import React,{Component} from 'react';
import Aux from '../../hoc/Auxiliary';
import Burger from '../../components/Burger/Burger';

class BurgerBuilder extends Component{
  state ={
    ingredients:{
      salad:0,
      bacon:0,
      cheese:0,
      meat:0
    }
  }


  render(){
    return(
      <Aux>
        <Burger ingredients={this.state.ingredients}/>
        <div>Build Controls</div>
      </Aux>
    );
  }
}

export default BurgerBuilder;

Burger component——显示burger

array类型的reduce的用法array.reduce(function(total, currentValue, currentIndex, arr), initialValue)；
酱得到的ingredients（object）用object.keys转为array；
用map生成相应数量的嵌套array；
再用reduce配合concat将嵌套array展开；
最后可通过length判断是否需要加入文字信息；

import React from 'react';
import classes from './Burger.module.css';
import BurgerIngredient from './BurgerIngredient/BurgerIngredient';

const burger = (props) =>{
  let transformedIngredients = Object.keys(props.ingredients).map((igkey)=>{
    return [...Array(props.ingredients[igkey])].map((_,i)=>
        <BurgerIngredient key={igkey + i} type={igkey}/>
    );  
            //得到一个大小为igkey的空array
  }).reduce((arr,el)=>{
    return arr.concat(el)    //arr中存放concat后的array
                              //el为当前遍历的array
  },[]); 
   //得到key的array
  if(transformedIngredients.length===0){
    transformedIngredients=<p>Please start adding ingredients</p>
  }
  

  return (
    <div className={classes.Burger}>
      <BurgerIngredient type="bread-top"/>
      {transformedIngredients}
      <BurgerIngredient type="bread-bottom"/>
    </div>
  );
};


export default burger;

BurgerIngredient——返回每一个ingredient

import classes from './BurgerIngredient.module.css';
import React from 'react';
import PropTypes from 'prop-types';


const burgerIngredient =(props)=>{
  let ingredient = null;


  switch (props.type){
    case ('bread-bottom'):
      ingredient = <div className={classes.BreadBottom}></div>
      break;
    case ('bread-top'):
      ingredient = (
        <div className = {classes.BreadTop}>
          <div className={classes.Seeds1}></div>
          <div className={classes.Seeds2}></div>
        </div>
      );
      break;
    case ('meat'):
      ingredient = <div className ={classes.Meat}></div>;
      break;
    case ('cheese'):
      ingredient = <div className ={classes.Cheese}></div>;
      break;
    case ('salad'):
      ingredient = <div className ={classes.Salad}></div>;
      break;
    case ('bacon'):
      ingredient = <div className ={classes.Bacon}></div>;
      break;      
    default:
      ingredient= null;
  }
  return ingredient;
};

burgerIngredient.propTypes= {   //设置proptype， 返回一个string
  type:PropTypes.string.isRequired
};

export default burgerIngredient;