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

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

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

+1 ещё

Простой
Браузер не обрабатывает запрос get?
- 1 подписчик
- 21 дек.
- 81 просмотр
0

ответов
React

+1 ещё

Простой
Как типизировать хук useState, если в качестве возвращаемым значений у нас ключи объекта?
- 1 подписчик
- 21 дек.
- 95 просмотров
3

ответа
JavaScript

+2 ещё

Простой
Как настроить CORS .NET 8?
- 1 подписчик
- 18 дек.
- 84 просмотра
2

ответа
React

+1 ещё

Простой
Как убрать 404, которая возникает при обновлении любой страницы, кроме главной в Telegram Mini App?
- 1 подписчик
- 17 дек.
- 60 просмотров
1

ответ
React

+1 ещё

Простой
Как проверять токен при каждом запросе в rtk query?
- 1 подписчик
- 11 дек.
- 64 просмотра
2

ответа
React

Средний
Как исправить проблему с созданием react проекта?
- 2 подписчика
- 11 дек.
- 357 просмотров
1

ответ
React

Средний
Как обновлять дочерние элементы которые принимают значение функции?
- 1 подписчик
- 10 дек.
- 79 просмотров
3

ответа
React

+1 ещё

Простой
Почему глобальные стили для body сбрасываются после перезагрузки страницы?
- 1 подписчик
- 09 дек.
- 66 просмотров
0

ответов
React

Простой
Почему не работает условная валидация zod в react-hook-form?
- 1 подписчик
- 08 дек.
- 32 просмотра
0

ответов
JavaScript

+3 ещё

Простой
Как сделать сохранение скролла в vk mini app?
- 1 подписчик
- 04 дек.
- 67 просмотров
0

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

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

Boomerangme 🎫

от 150 000 до 250 000 ₽

React Native Developer

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

До 300 000 ₽

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

Бюро Цифровых Технологий • Санкт-Петербург

от 140 000 до 160 000 ₽

Написать код для мобильного редактора видео, записываемого с камер

23 дек. 2024, в 23:22

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

UI/UX-дизайнер для разработки кликабельного интерфейса в Figma

23 дек. 2024, в 23:09

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

Доработать backend для платформы Full-time, Mid+/Senior

23 дек. 2024, в 23:04

1500 руб./в час

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

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

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

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