3

我是 ReactJS 的新手。我想在我的项目中使用 ReactJS-AdminLTE。任何人都可以通过逐步过程告诉如何使用它。

我遵循的步骤

1）我使用https://www.tutorialspoint.com/reactjs/教程设置 Reactjs 环境

2）然后我使用命令npm install adminlte-reactjs 安装 ReactJS-AdminLTE

我的 webpack.config 文件是

var path=require('path');
var config = {
   entry: './main.js',

   output: {
      path: path.join(__dirname, "./"),
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

应用程序.jsx

import React from 'react';
import reactjsAdminlte from 'adminlte-reactjs';

class App extends React.Component {
   render() {

      return (

            <Box 
    width = 3 
    border = true
    content = 'The body of the box'
    theme = 'box-primary'
    title = 'Collapsable'
    collapsed = true
    boxTools = ['collapse']
/>


      );
   }
}

export default App;

索引.html

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

但结果并没有消失。

4

1 回答 1

2

您是否使用 ReactDOM 将您的应用程序组件呈现为 HTML？

import ReactDOM from 'react-dom';
ReactDOM.render(
  <App />,
  document.getElementById('app')
);
于 2017-08-15T10:03:37.513 回答