Приложение 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;
Большое спасибо!
можешь объяснить, как это сделать, братан?
Вам нужно установить node в вашей системе, затем npm, а затем другие зависимости через npm для вашего реагирующего приложения, которое включает, например, babel для преобразования es6.
Ждать. Позвольте мне найти ссылку, по которой вы это лучше объясните.
Вот так: codeburst.io/…
Большое спасибо, AndrewL!
Добро пожаловать, Брюс. Ваше здоровье.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Похоже, вы не включаете свой js (и css тоже) в свой html. Кроме того, предоставленный вами js, похоже, написан на es6 с импортом. Он не будет работать непосредственно в браузере.
Я предлагаю вам использовать такой инструмент, как webpack, чтобы скомпилировать все ваши js и css с зависимостями в один пакет (файл javascript, который включает в себя весь ваш импорт), а затем включить этот пакет в свой html с помощью <script></script>
Вы не можете напрямую писать код реакции в свои файлы javascript.
Вам необходимо импортировать ссылки CDN, если вы не используете какие-либо строительные библиотеки, такие как webpack. Для справки вы можете проверить здесь.
Если вам нужно начать использовать React с webpack, вы можете установить узел на свой компьютер и настроить базовый проект react с CRA.
Вам необходимо загрузить сайт, используя локальный сервер, чтобы отобразить js в файле index.html.