Question

所以我使用react创建一个网页，但是当我点击index.html它没有显示任何内容。任何人对它可能是什么都有任何想法？我很漂亮，所以它应该是非常简单的东西。它没有显示任何错误或任何东西，只是标题和页面都是空白的。该页面应该非常简单，基于我在网上看到的，但它不起作用。任何帮助都会受到很大的影响。

我顺便使用ubuntu，不确定它是否有用。

index.html:

    <!DOCTYPE html>
    <html lang="pt">
      <head>
        <meta charset="utf-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>React Bruce</title>
      </head>
      <body>
        <div id="root"></div>
      </body>
    </html>

...............................
index.css

    body {
      background-color: #FFCC00;
      padding: 20px;
      margin: 0;
    }
    h1, h2, p, ul, li {
      font-family: sans-serif;
    }
    ul.header li {
      display: inline;
      list-style-type: none;
      margin: 0;
    }
    ul.header {
      background-color: #111;
      padding: 0;
    }
    ul.header li a {
      color: #FFF;
      font-weight: bold;
      text-decoration: none;
      padding: 20px;
      display: inline-block;
    }
    .content {
      background-color: #FFF;
      padding: 20px;
    }
    .content h2 {
      padding: 0;
      margin: 0;
    }
    .content li {
      margin-bottom: 10px;
    }

.........................
index.js

    import React from "react";
    import ReactDOM from "react-dom";
    import Main from "./Main";
    import "./index.css";

    ReactDOM.render(
      <Main/>, 
      document.getElementById("root")
    );

    .active {
      background-color: #0099FF;
    }

..................................
Main.js

    import React, { Component } from "react";
    import {
      Route,
      NavLink,
      HashRouter
    } from "react-router-dom";
    import Home from "./Home";
    import Stuff from "./Stuff";
    import Contact from "./Contact";

    class Main extends Component {
      render() {
        return (
             <HashRouter>
            <div>
              <h1>Simple SPA</h1>
              <ul className="header">
               <li><NavLink to="/">Home</NavLink></li>
                <li><NavLink to="/stuff">Stuff</NavLink></li>
                <li><NavLink to="/contact">Contact</NavLink></li>
              </ul>
              <div className="content">
              <Route path="/" component={Home}/>
                <Route path="/stuff" component={Stuff}/>
                <Route path="/contact" component={Contact}/>

              </div>
            </div>
               <HashRouter>
        );
      }
    }


    export default Main;

...............................
Home.js

import React, { Component } from "react";

class Home extends Component {
  render() {
    return (
      <div>
        <h2>HELLO</h2>
        <p>Cras facilisis urna ornare ex volutpat, et
        convallis erat elementum. Ut aliquam, ipsum vitae
        gravida suscipit, metus dui bibendum est, eget rhoncus nibh
        metus nec massa. Maecenas hendrerit laoreet augue
        nec molestie. Cum sociis natoque penatibus et magnis
        dis parturient montes, nascetur ridiculus mus.</p>

        <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
      </div>
    );
  }
}

export default Home;
........................
Stuff.js

import React, { Component } from "react";

class Stuff extends Component {
  render() {
    return (
      <div>
        <h2>STUFF</h2>
        <p>Mauris sem velit, vehicula eget sodales vitae,
        rhoncus eget sapien:</p>
        <ol>
          <li>Nulla pulvinar diam</li>
          <li>Facilisis bibendum</li>
          <li>Vestibulum vulputate</li>
          <li>Eget erat</li>
          <li>Id porttitor</li>
        </ol>
      </div>
    );
  }
}

export default Stuff;
.....................
Contact.js

import React, { Component } from "react";

class Contact extends Component {
  render() {
    return (
      <div>
        <h2>GOT QUESTIONS?</h2>
        <p>The easiest thing to do is post on
        our <a href="http://forum.kirupa.com">forums</a>.
        </p>
      </div>
    );
  }
}

export default Contact;

非常感谢你！

Answer 1

您似乎不会在js中加入css（以及html）。此外，您提供的js似乎是使用导入的es6编写的。它不会直接在浏览器中运行。

我建议您使用像webpack这样的工具将整个js和css与依赖项编译成一个包（一个包含所有导入的javascript文件），然后用{{{{{{ 1}}

Answer 2

您无法直接将反应代码写入javascript文件。如果您没有使用webpack之类的任何构建库，则需要导入CDN链接。作为参考，您可以查看here.

如果您需要开始使用webpack使用React，可以将node安装到您的计算机中并使用CRA.

设置基本的react项目

反应应用程序显示空白页

2 个答案: