Сайт, закодированный в React, отображает пустую страницу на страницах GitHub

#javascript #html #react-redux #github-pages

#javascript #HTML #react-redux #github-страницы

Вопрос:

Я получил код от друга, чтобы иметь возможность использовать его в качестве шаблона для моего сайта-портфолио. Веб-сайт закодирован на javascript, react, html и css.

Я загрузил код в репозиторий на GitHub, чтобы посмотреть, как он выглядит. Я опубликовал веб-сайт по адресу ruben-olmos.github.io . Однако при переходе по адресу веб-сайта все, что я вижу, это метаданные на вкладке и пустая страница. Кажется, что index.html файл прочитан, а остальное — нет. Я думаю, это может быть связано с тем фактом, что он был закодирован на javascript.

Часть кода javascript, похоже, не читается сайтом. Я просмотрел код, и, похоже, с кодом все в порядке. Вот ссылка на репозиторий. https://github.com/ruben-olmos/ruben-olmos.github.io.

Я ранее запускал веб-сайты, но они не вызывали у меня этой проблемы. Есть идеи?

Комментарии:

1. Мой ответ был обновлен некоторой новой информацией, которую вы могли бы найти полезной.

Ответ №1:

Возможно, ваш друг не оказал вам большой услуги.

Код React не может быть загружен немедленно; он должен быть обработан системой упаковки (например, webpack или parcel), где код javascript создает HTML / CSS, который затем отображается на веб-странице. Обычно он используется в паре с системой GIT (code versioning).

Преимущество React (как следует из названия) заключается в том, что эта система кодирования (предназначенная для совместного (группового / командного) кодирования) может быстро и эффективно реагировать на множественные потоки данных, происходящие в нескольких местах на веб-странице. Недостатком является то, что это не шаблон кодирования html / css / js Notepad вашей бабушки. Изучение react не является элементарным — это требует времени и усилий.

Если вы хотите стать профессиональным разработчиком и хотите изучить одну из самых популярных и передовых систем разработки, используемых в настоящее время, обязательно изучите React, Angular, Vue или etc. Но не ожидайте, что это будет быстрое изучение или что за несколько часов или дней у вас будет отличный веб-сайт с портфолио (если, конечно, рядом с вами не будет адепта React, который проведет вас через процесс обучения).

Но если вам нужен быстрый и бесплатный шаблон веб-сайта, могу я предложить вам взглянуть на гораздо более простые шаблоны начальной загрузки в W3Schools. Прохождение руководства по корпоративной теме занимает около 20 минут, и час или два на настройку в конечный продукт.

Напротив, вы могли бы потратить много дней (МНОГО дней) на изучение React.


Обновить:

Вот статья, которая может помочь вам понять некоторые концепции javascript, которые нужно освежить в памяти, прежде чем переходить к React:

https://blog.logrocket.com/javascript-concepts-before-learning-react/

Комментарии:

1. Вау, спасибо, я понятия не имел об этом, и вы меня хорошо просветили. Хорошо, это было бы сложно обработать. Я в значительной степени хочу сохранить ту же структуру, но изменить некоторые стилистические элементы, исходники и анимацию, как вы думаете, это будет сложно сделать? Я планирую поработать над этим на стороне и загрузить более простой вариант, как вы предложили.

2. Когда вы меняете файл js / jsx / css / scss, как вы его «загружаете»? Вы не можете просто скопировать измененный файл на веб-сайт — есть упаковщик, который это делает. У вас это настроено и настроено? React работает с Node.js — у вас есть Nodejs, установленный на вашей рабочей станции? Установлены ли у вас зависимости модуля узла (через npm)? Если все уже настроено, и вы можете внести желаемые изменения в файл css, а автоматизация загрузки / публикации настроена, тогда да — вы можете сделать это довольно легко. Однако, если вам нужно все это настроить … тогда нет. Сначала вам нужно все это сделать.

3. Простой ответ. Это не плагин jquery, который вы будете копировать и вставлять и надеяться, что он работает, скрестив пальцы.

4. Большое спасибо. Ранее я работал с настольным приложением GitHub. В моей командной строке есть все, что упомянуто, за исключением упаковщика, я думаю, что у меня больше шансов добиться успеха, если я разверну из командной строки. Я попробую работать из командной строки и посмотрю, смогу ли я использовать упаковщик. Я нашел некоторую полезную информацию, касающуюся того, как развернуть приложение react, как вы думаете, будет ли большая разница?

5. @lambdaepsilon Вы когда-нибудь использовали Lynda.com ? Можете ли вы войти через «Организационный портал», используя свою библиотечную карточку? (К моему удивлению, живя на острове к северу от Сиэтла, я могу — так что, возможно, вы тоже можете). В любом случае, на Lynda.com у них есть несколько видеоуроков, которые помогут вам начать работу с React. Я предлагаю вам взглянуть на один или два из них — Building Modern Projects with React автор Shaun Wassell выглядит как многообещающий курс продолжительностью 3,5 часа, который даст вам хорошее представление о том, с чем вы имеете дело. По крайней мере, это поможет вам настроить необходимую среду.

Ответ №2:

Я не думаю, что вы когда-либо включали свой index.js на index.html страница. Таким образом, react никогда не загружается, чтобы захватить DOM

Комментарии:

1. Как именно это можно было бы сделать? и после этого я должен был бы обработать его, как указано выше @cssyphus, я бы просто