Почему не работает React?

Question

lancehokage @lancehokage

React

Почему не работает React?

Начал изучать реакт, код index.js:

import React from 'react'
import {render} from 'react-dom'
import App from './components/App'

function jo () {
  return(
    <div>
      <h1>jojojojo</h1>
    </div>
  )
}
render(<jo />, document.getElementById('root'))

Код index.html

<!doctype html>
<html lang="en">
  <head>
    <title>React App</title>

    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script type="text/babel" src="../src/index.js"></script>


  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Babel установил. Если что, запускаю не на сервере. Возможно в этом проблема, но говорят и без него работает

Вопрос задан более трёх лет назад
1005 просмотров

12 комментариев

Подписаться 1 Средний 12 комментариев

lancehokage @lancehokage Автор вопроса

Артём Петренков, я так и сделал)

Написано более трёх лет назад
lancehokage @lancehokage Автор вопроса

Артём Петренков, в том что не работает нихрена

Написано более трёх лет назад
lancehokage @lancehokage Автор вопроса

Артём Петренков, чтобы заработало. Ибо что так что так - результат один

Написано более трёх лет назад
alvvi @alvvi

lancehokage, в create-react-app все изначально работает, если вы запускали верные команды в консоли.

Написано более трёх лет назад
lancehokage @lancehokage Автор вопроса
Артём Петренков,

Хорошо. Я переустановил приложение через create-react-app

Вот код:

<script type="text/babel"> function jo() { return ( <h1>142</h1> ) } ReactDOM.render(<jo />, document.getElementById('root')) </script> <div id="root"></div>

Почему то не работает
Написано более трёх лет назад
Decadal @Decadal

lancehokage, вы в курсе что если даже обычный js подключить выше чем элемент, с которым он должен работать, то код не сработает без обертки window load или document ready ?
просто
опустите
скрипт
вниз

Написано более трёх лет назад
lancehokage @lancehokage Автор вопроса

Decadal, вы в курсе что я ничего не подключал и заново установил через create-react-app?

Написано более трёх лет назад
lancehokage @lancehokage Автор вопроса

Decadal, да не работает это!

Написано более трёх лет назад
lancehokage @lancehokage Автор вопроса

Артём Петренков, с большой буквы написал. Тоже самое

Написано более трёх лет назад
lancehokage @lancehokage Автор вопроса

Что я не так делаю?(

Написано более трёх лет назад
lancehokage @lancehokage Автор вопроса

Артём Петренков, ничего не работаееееет((9((((

Написано более трёх лет назад

lancehokage @lancehokage Автор вопроса

Артём Петренков,
app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

function Block() {
  return (
    <h1>142</h1>
  )
}

export default Block;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Block />, document.getElementById('root'));
serviceWorker.unregister();

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

React

Простой
React (Класс расширяет значение undefined не является конструктором или null)?
- 1 подписчик
- вчера
- 44 просмотра
1

ответ
React

Простой
Почему не обновляется значение в useState?
- 1 подписчик
- вчера
- 63 просмотра
1

ответ
React

Средний
Выделение ядра у фронта на реакте, какие есть варианты реализации?
- 1 подписчик
- вчера
- 42 просмотра
0

ответов
React

+2 ещё

Средний
Как загружать данные перед серверным рендерингом в React?
- 2 подписчика
- 26 апр.
- 154 просмотра
1

ответ
React

Простой
В чем заключается суть оптимизации скорости обновления компонентов через useReducer?
- 1 подписчик
- 24 апр.
- 109 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 23 апр.
- 99 просмотров
0

ответов
React

Простой
Почему Vite/Rollup не может зарезолвить абсолютные импорты?
- 1 подписчик
- 23 апр.
- 55 просмотров
1

ответ
React

Простой
Как решить проблему с манифестом в CRA-приложении?
- 1 подписчик
- 22 апр.
- 46 просмотров
0

ответов
React

+2 ещё

Средний
Какие есть WYSIWYG редакторы для мини-приложений ВК?
- 1 подписчик
- 22 апр.
- 52 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как получить актуальные данные в state при использовании server side event (в момент срабатывания события) в компоненте React?
- 1 подписчик
- 20 апр.
- 83 просмотра
1

ответ
Показать ещё Загружается…

React разработчик

Uptrade

от 150 000 до 200 000 ₽

JS|React Native разработчик

Венста • Киров

от 60 000 до 120 000 ₽

Senior React Developer

DARS • Москва

от 200 000 до 300 000 ₽

Разработка Telegrm-бота с WebApp

28 апр. 2024, в 13:15

80000 руб./за проект

Написать бэк часть (API Эквайринг Тинькофф, VK API, API Cloudpayments)

28 апр. 2024, в 13:02

500000 руб./за проект

NodeJS реализация интерации двух сервисов с RestAPI

28 апр. 2024, в 13:01

10000 руб./за проект

Артём Петренков, в том что не работает нихрена
Артём Петренков, чтобы заработало. Ибо что так что так - результат один
lancehokage, в create-react-app все изначально работает, если вы запускали верные команды в консоли.
Артём Петренков,

Хорошо. Я переустановил приложение через create-react-app

Вот код:

<script type="text/babel"> function jo() { return ( <h1>142</h1> ) } ReactDOM.render(<jo />, document.getElementById('root')) </script> <div id="root"></div>

Почему то не работает
lancehokage, вы в курсе что если даже обычный js подключить выше чем элемент, с которым он должен работать, то код не сработает без обертки window load или document ready ?
просто
опустите
скрипт
вниз
Decadal, вы в курсе что я ничего не подключал и заново установил через create-react-app?
Артём Петренков, с большой буквы написал. Тоже самое
Артём Петренков, ничего не работаееееет((9((((
Артём Петренков,
app.js
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; function Block() { return ( <h1>142</h1> ) } export default Block;

index.js

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(<Block />, document.getElementById('root')); serviceWorker.unregister();

Answer 1 · 2019-02-09 19:17:10

Имя функции, описывающей компонент, должно быть с большой буквы, иначе при транспиляции из JSX не будет создана ссылка на компонент

function Jo () {
  return(
    <div>
      <h1>jojojojo</h1>
    </div>
  )
}
render(<Jo />, document.getElementById('root'))

Почему не работает React?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт