Почему не работает 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 установил. Если что, запускаю не на сервере. Возможно в этом проблема, но говорят и без него работает

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

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

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

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

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

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

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

JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 30 минут назад
- 10 просмотров
0

ответов
React

Простой
Zod: Валидация select?
- 1 подписчик
- 15 часов назад
- 48 просмотров
0

ответов
React

Простой
Как, используя i18next-extract, разделять файлы переводов постранично?
- 1 подписчик
- вчера
- 20 просмотров
0

ответов
React

Простой
Почему данные не подгружаются в форму?
- 2 подписчика
- 18 нояб.
- 75 просмотров
3

ответа
React

Средний
Сборка build открывается на хостинге с ошибками в консоли, на localhost все работает, в чем может быть проблема?
- 1 подписчик
- 17 нояб.
- 131 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Почему выдает ошибку когда загружаю проект в Vercel?
- 1 подписчик
- 15 нояб.
- 93 просмотра
0

ответов
React

Средний
React Hook Form. Какие существуют лучшие практики приведения объектов полученных с бекенда к значениям формы и обратно?
- 1 подписчик
- 13 нояб.
- 65 просмотров
0

ответов
JavaScript

+4 ещё

Простой
Почему слайдер на базе Swiper с видео YouTube в iframe не двигается при свайпе?
- 2 подписчика
- 13 нояб.
- 79 просмотров
1

ответ
React

Простой
Ошибка TypeError: Cannot read properties of undefined (reading 'completedCourses') в React-компоненте?
- 1 подписчик
- 13 нояб.
- 55 просмотров
0

ответов
React

+1 ещё

Средний
Как правильно обработать запрос в rtkq?
- 1 подписчик
- 11 нояб.
- 39 просмотров
1

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

Ведущий React Native разработчик

Студия 15

от 200 000 до 250 000 ₽

React Native Developer

Wanted. • Санкт-Петербург

До 300 000 ₽

React Native developer (+Node.js)

CTRL+ • Москва

от 250 000 до 320 000 ₽

Нарисовать проект Площадки для дизайнеров интерьеров

22 нояб. 2024, в 10:19

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

Сделать верстку двух страниц из фигмы

22 нояб. 2024, в 09:58

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

Доделать проект

22 нояб. 2024, в 09:57

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

Артём Петренков, в том что не работает нихрена
Артём Петренков, чтобы заработало. Ибо что так что так - результат один
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?

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

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

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