Мой мир hello React не появляется

user10047208 спросил: 13 июня 2018 в 05:10 в: reactjs

Я новичок в React. Я прочитал официальный учебник "Реакт", и я пытаюсь создать базовое приветственное приложение для реагирования на мир, но я не преуспеваю. Я посмотрел в Интернете, а также здесь для ответа, и я не нашел его. Можете ли вы рассказать мне, что мне не хватает, Что мне нужно сделать? Ниже приведены файлы html и javascript:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, World</h1>,
    document.getElementById('root')
  );

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script type="text/jsx" src="inputPhoneNumber.js"></script>
</head>
<body>
    <div class="jumbotron jumbotron-fluid">
        <div id="root" class="container">           
        </div>
    </div> 
</body>
</html>

1 ответ

Tholle ответил: 13 июня 2018 в 07:57

Все, что вам нужно, это скрипты react и react-dom, которые у вас уже есть, корневой элемент, такой как div с идентификатором root и файл, который использует ReactDOM, чтобы отобразить самый верхний компонент в корневом элементе.

Пример

ReactDOM.render(
  React.createElement('h1', {}, 'Hello, World'),
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
user10047208 ответил: 13 июня 2018 в 08:23
Он все еще не работает, когда я попробовал его в своем коде Visual Studio

Дополнительное видео по вопросу: Мой мир hello React не появляется

Урок 2. React JS. Основы. Подключение React

34. Уроки React JS - Вынос мозга (FLUX-круговорот на каждый символ)

ReactJS Tutorial - 2 - Hello World