7、React项目开发：从基础组件到Webpack构建

React项目开发：从基础组件到Webpack构建

1. JSX与食谱应用

在React开发中，JSX为我们提供了一种简洁、直观的方式来表达React元素。不过，JSX无法直接被浏览器读取，需要先转换为JavaScript代码。

以下是一个包含两个食谱的数据数组，它代表了应用的当前状态：

const data = [ 
  { 
    name: "Baked Salmon", 
    ingredients: [ 
      { name: "Salmon", amount: 1, measurement: "l lb" }, 
      { name: "Pine Nuts", amount: 1, measurement: "cup" }, 
      { name: "Butter Lettuce", amount: 2, measurement: "cups" }, 
      { name: "Yellow Squash", amount: 1, measurement: "med" }, 
      { name: "Olive Oil", amount: 0.5, measurement: "cup" }, 
      { name: "Garlic", amount: 3, measurement: "cloves" } 
    ], 
    steps: [ 
      "Preheat the oven to 350 degrees.", 
      "Spread the olive oil around a glass baking dish.",