使用引入react文件的方式 使用bootstrap模板 构建react订餐网站项目单个页面入门教程

这个是我react的入门项目, 因为使用了bootstrap模板, 若使用create-react-app 或者webpack等构建服务器项目就比较复杂, 所以本项目只使用了最简单的 在HTML页面引入react 的方式 构建项目. 

教程使用的模板页面如下: 

项目已传到git上，上链接~ 

该链接默认会在原窗口打开，建议右键新窗口打开~

第一步:

引入react. (为了避免忘记, 我在head中引入)

<!-- react -->
<script src="../build/react.development.js"></script>
<script src="../build/react-dom.development.js"></script>
<script src="../build/babel.min.js"></script>

第二步:

将应该作为组件的部分划分出来. 本页面需要抠出2个组件, 一是GoodList, 二是GoodItem. GoodList用来接收服务器传回的菜品数组. GoodItem 用来显示单个菜品. 这一步是思考, 先不用删改代码. 需注意: 组件的html必须只有一个根元素, 所有组件的首字母要大写, 为的是和其他HTML元素区分开 ! 

GoodList: ( 该组件是一个table.  这里有使用GoodItem组件,  其他的我们下面再讲 )

            <table id="demo-foo-addrow" className="table m-t-30 table-hover contact-list"
              data-page-size="10">
              <thead>
                <tr>
                  <th>当前：菜单</th>
                </tr>
              </thead>
              <tbody>
                {
                  this.state.goods.map(item => 
                    <GoodItem 
                      good = {item}
                      key = {item.id}
                    />
                  )
                }
              </tbody>
              <tfoot>
                  <tr>
                      <div id="add-contact" className="modal fade in" tabIndex="-1" role="dialog"
                          aria-labelledby="myModalLabel" aria-hidden="true">
                          <div className="modal-dialog">
                              <div className="modal-content">
                                  <div className="modal-header">
                                      <