React - 安装 react-table

Question

我正在尝试安装 react-table，但我在设置 CDN 时遇到问题。我目前的index.html文件如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Code_LMS</title>
        <link rel="stylesheet" href="/css/bootstrap.css" />
        <link rel="stylesheet" href="/css/style.css" />
        <!-- change this up! http://www.bootstrapcdn.com/bootswatch/ -->
        <!-- <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/> -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    </head>

    <body background="EasyMed.png">
        <div id="app"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="bundle.js"></script>
    </body>
</html>

任何人都可以告诉我应该将 CDN 中提到的 links/script 放在我的 index.html 文件中的什么位置，而不是弄乱我的依赖项？谢谢！

Answer 1

class App extends React.Component {

  render() {
    return ( <
      div >
      <
      ReactTable columns = {
        [{
            Header: "Name",
            columns: [{
                Header: "First Name",
                accessor: "firstName"
              },
              {
                Header: "Last Name",
                id: "lastName",
              }
            ]
          },
          {
            Header: "Info",
            columns: [{
                Header: "Age",
                accessor: "age"
              },
              {
                Header: "Status",
                accessor: "status"
              }
            ]
          },
          {
            Header: 'Stats',
            columns: [{
              Header: "Visits",
              accessor: "visits"
            }]
          }
        ]
      }
      defaultPageSize = {
        10
      }
      className = "-striped -highlight" /
      >
      <
      br / >
      <
      /div>
    );
  }
}



ReactDOM.render( <
  App / > ,
  document.getElementById('app')
);

<meta charset="utf-8">
<title>Code_LMS</title>
<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/style.css" />
<!-- change this up! http://www.bootstrapcdn.com/bootswatch/ -->
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body background="EasyMed.png">
  <div id="app"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="bundle.js"></script>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">

  <!-- JS -->
  <script src="https://unpkg.com/react-table@latest/react-table.js"></script>
  <script src="https://unpkg.com/react-table@latest/react-table.min.js"></script>

  <script>
    var ReactTable = window.ReactTable.default
  </script>
</body>

React - 安装 react-table

React - install react-table

javascript

css

reactjs

cdn

react-table