JS React Router Redux

@влад74 · Регистрация: 02.07.2012

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток.
Я программист VBA и недавно стал изучать JS. Помогите разобраться с кашей в голове после изучения React и Redux.
Я так думаю это произошло из-за того что в начале я изучал React, а затем Redux. И в процессе изучения - функционал Redux перезатирал (перемешивался) функционал React.
Можно тезисно ("на пальцах" и на примерах кода) сформулировать главные принципы взаимодействия React, Router и Redux.
И если можно сделать это на примере сайта-блога на MySql.

Т.е. например:
Стадия 1 - Получаем данные из MySql - это массив страниц сайта (динамическое многоуровневое меню), массив категорий статей (многоуровневой аккордеон), массив статей.
Я так понимаю главное здесь Ajax? Это через него реализуется - получение данных? Можно пример кода? Что тут главное?

Стадия 2 - Выводим данные (массивы) на экран - меню, аккордеон, статьи - можно поподробнее этот момент разобрать, с примером кода? Что тут главное?

Стадия 3 - "Вешаем" события на элементы (кнопки, инпуты и т.д.) - я так понимаю это нужно делать в редюскомбайне? Можно с примером кода? Что тут главное?

Разное:
1. При создании сайта - какие основные принципы (требования) структурирования папок (подпапок) и файлов? Что тут главное?

2. Можно тоже на пальцах разъяснить принципы создания "автономных компонентов"? На сколько я понял такой компонент можно использовать в нескольких местах сайта.
2.1. Основные требования при создание такого компонента в родительских и в родительско-родительских (дедовских) компонентах? Что нужно прописывать в родительских или в дедовских компонентах?

@ntlinuxnt · 03.05.2017, 13:15

Тут вроде все и даже больше, поиск отключили?

@влад74 · 03.05.2017, 17:14 **[ТС]**

поиск не отключал. Но на этот материал не выходил.

http://monsterlessons.com/project/categories/redux - это видео
http://redux.js.org/
https://egghead.io/courses/get... with-redux

Добавлено через 27 минут
Дорогие товарисчи

пожалуйста отвечайте с примерами кода.
Теория и ссылки нахер не нужны.
У меня каша из-за теории и из-за того что в JS все через жопу по сравнению с VBA.
VBA - открыл Access и вперед кодируй на одном языке без всяких конфигураций.
В WEB же задолбался прыгать с HTML на CSS затем PHP и JS, а еще react с router и redux.

еще раз.
я хочу ТОЧНО знать как работая с react-router-redux :
1. извлечь данные из SQL?
2. как эти данные отобразить на странице?
3. как повесить события на элементы (компоненты)?

ПОЖАЛУЙСТА мне нужны тупые образцы кода - для того чтобы появилась какая-то ясность. Т.е. например
1. как извлечь данные из SQL?
ПРЕДПОЛАГАЕМЫЙ ОТВЕТ (например):
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").inner HTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").inner HTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>

</body>
</html>

======================================== ======================================== =
The PHP File
The page on the server called by the JavaScript above is a PHP file called "getuser.php".

The source code in "getuser.php" runs a query against a MySQL database, and returns the result in an HTML table:

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','peter','abc1 23','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>

Добавлено через 32 минуты
ntlinuxnt я так понимаю вы имеете отношение к администрации сайта?
если так, то вопрос - почему на винде я вижу только ваш ответ, когда как на андроиде в этой теме виден еще и ответ от Similar (в ответе только ссылки). БаааааааааааааааГ?

@ntlinuxnt · 03.05.2017, 17:39

Сообщение от влад74

ответ от Similar

А вы авторизуйтесь и он пропадет.

Добавлено через 2 минуты

Сообщение от влад74

Теория и ссылки нахер не нужны.

По ссылке полностью описана разработка полноценного приложения, что вам не нравится?

@влад74 · 03.05.2017, 18:18 **[ТС]**

Как я уже сообщал - после изучения RECT - вначале реакта и затем редакса (просмотр видео и чтение некоторх сайтов) у меня образовалась каша в голове.

Причины каши:
1. функционал redux перезатирает функционал react
2. материал везде преподносится "от react-redux" (от которого каша), а я хочу "получить информацию (схему) - от функционала создания блога" - может она лучше у меня усвоится.

Т.е. как:
1. получить данные от MySql - какие основные моменты?
2. как эти данные "вывести на экран" - какие основные моменты?
3. как повесить события на элементы - какие основные моменты?

основные моменты - тезисно и наглядно (примеры кода)

Простите за наглость и спасибо за ответы

@monochromer · 04.05.2017, 15:36

влад74, посмотрите пример Reddit API, созданным автором Redux. Там описано, как получать данные, выводить их и обрабатывать события.

Сообщение от влад74

получить данные от MySql - какие основные моменты?

Основной момент, который нужно понять, что для SPA-библиотек и фреймворков не важно, что используется на сервере - БД (MySQL, MongoDB и пр. ) и язык (PHP, C#, Java, Node.js или др.). В таких случаях сервер обычно отдает данные в формате json, а не html-разметку.

@влад74 · 05.05.2017, 02:11 **[ТС]**

Спасибо
Про получение в формате json понял сразу.
У меня проблема с наглядностью (и из-за этого с пониманием) как это сделать - реализовать.
Главная проблема - я прошерстил несколько сайтов и не нашел нормально работающего исходника в связке "React-Router-Redux" и желательно с MySQL. Всегда или что-то не работает или ВСЕ не работает (с MySQL вообще ничего не нашел). Я так понял есть большая проблема со связкой Router-Redux.
Если можете поделиться исходником (с package.json на React-Router-Redux) в котором работает переход по страницам, данные берутся с MySQL и есть минимальный функционал на Redux - буду очень очень благодарен.

Танцы с бубном - море времени ушло (и пока безрезультатно) на то чтобы создать минимальную исходную конфигурацию проекта для себя (MySQL-React-Router-Redux)

p.s.
VBA - открыл ACCESS-открыл VBE - и вперед кодируй - создавай проект, все более менее интуитивно понятно.

Добавлено через 48 минут
Вариант:
1. исходник от Maxim Patsianskiy - https://github.com/maxfarseer/... _component.
2. книги от него же - https://www.gitbook.com/@maxfarseer

Скажем спасибо мужику

Добавлено через 8 часов 17 минут
Еще вариант исходника от monsterlessons - https://github.com/monsterless... uter-redux

ОБУЧАЮЩЕЕ ВИДЕО:
react - http://monsterlessons.com/project/categories/react
redux - http://monsterlessons.com/project/categories/redux

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@влад74 102 / 20 / 0 Регистрация: 02.07.2012 Сообщений: 149

	JS React Router Redux 03.05.2017, 10:48. Показов 1356. Ответов 6 Метки нет (Все метки) Всем доброго времени суток. Я программист VBA и недавно стал изучать JS. Помогите разобраться с кашей в голове после изучения React и Redux. Я так думаю это произошло из-за того что в начале я изучал React, а затем Redux. И в процессе изучения - функционал Redux перезатирал (перемешивался) функционал React. Можно тезисно ("на пальцах" и на примерах кода) сформулировать главные принципы взаимодействия React, Router и Redux. И если можно сделать это на примере сайта-блога на MySql. Т.е. например: Стадия 1 - Получаем данные из MySql - это массив страниц сайта (динамическое многоуровневое меню), массив категорий статей (многоуровневой аккордеон), массив статей. Я так понимаю главное здесь Ajax? Это через него реализуется - получение данных? Можно пример кода? Что тут главное? Стадия 2 - Выводим данные (массивы) на экран - меню, аккордеон, статьи - можно поподробнее этот момент разобрать, с примером кода? Что тут главное? Стадия 3 - "Вешаем" события на элементы (кнопки, инпуты и т.д.) - я так понимаю это нужно делать в редюскомбайне? Можно с примером кода? Что тут главное? Разное: 1. При создании сайта - какие основные принципы (требования) структурирования папок (подпапок) и файлов? Что тут главное? 2. Можно тоже на пальцах разъяснить принципы создания "автономных компонентов"? На сколько я понял такой компонент можно использовать в нескольких местах сайта. 2.1. Основные требования при создание такого компонента в родительских и в родительско-родительских (дедовских) компонентах? Что нужно прописывать в родительских или в дедовских компонентах? 0

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	03.05.2017, 13:15
	Тут вроде все и даже больше, поиск отключили? 0

@влад74 102 / 20 / 0 Регистрация: 02.07.2012 Сообщений: 149
	03.05.2017, 17:14 [ТС]
	поиск не отключал. Но на этот материал не выходил. http://monsterlessons.com/project/categories/redux - это видео http://redux.js.org/ https://egghead.io/courses/get... with-redux Добавлено через 27 минут Дорогие товарисчи пожалуйста отвечайте с примерами кода. Теория и ссылки нахер не нужны. У меня каша из-за теории и из-за того что в JS все через жопу по сравнению с VBA. VBA - открыл Access и вперед кодируй на одном языке без всяких конфигураций. В WEB же задолбался прыгать с HTML на CSS затем PHP и JS, а еще react с router и redux. еще раз. я хочу ТОЧНО знать как работая с react-router-redux : 1. извлечь данные из SQL? 2. как эти данные отобразить на странице? 3. как повесить события на элементы (компоненты)? ПОЖАЛУЙСТА мне нужны тупые образцы кода - для того чтобы появилась какая-то ясность. Т.е. например 1. как извлечь данные из SQL? ПРЕДПОЛАГАЕМЫЙ ОТВЕТ (например): <html> <head> <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").inner HTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").inner HTML = this.responseText; } }; xmlhttp.open("GET","getuser.php?q="+str, true); xmlhttp.send(); } } </script> </head> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Joseph Swanson</option> <option value="4">Glenn Quagmire</option> </select> </form> <br> <div id="txtHint"><b>Person info will be listed here...</b></div> </body> </html> ======================================== ======================================== = The PHP File The page on the server called by the JavaScript above is a PHP file called "getuser.php". The source code in "getuser.php" runs a query against a MySQL database, and returns the result in an HTML table: <!DOCTYPE html> <html> <head> <style> table { width: 100%; border-collapse: collapse; } table, td, th { border: 1px solid black; padding: 5px; } th {text-align: left;} </style> </head> <body> <?php $q = intval($_GET['q']); $con = mysqli_connect('localhost','peter','abc1 23','my_db'); if (!$con) { die('Could not connect: ' . mysqli_error($con)); } mysqli_select_db($con,"ajax_demo"); $sql="SELECT * FROM user WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo "<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> </tr>"; while($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "<td>" . $row['Hometown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?> </body> </html> Добавлено через 32 минуты ntlinuxnt я так понимаю вы имеете отношение к администрации сайта? если так, то вопрос - почему на винде я вижу только ваш ответ, когда как на андроиде в этой теме виден еще и ответ от Similar (в ответе только ссылки). БаааааааааааааааГ? 0

@влад74 102 / 20 / 0 Регистрация: 02.07.2012 Сообщений: 149
	03.05.2017, 18:18 [ТС]
	Как я уже сообщал - после изучения RECT - вначале реакта и затем редакса (просмотр видео и чтение некоторх сайтов) у меня образовалась каша в голове. Причины каши: 1. функционал redux перезатирает функционал react 2. материал везде преподносится "от react-redux" (от которого каша), а я хочу "получить информацию (схему) - от функционала создания блога" - может она лучше у меня усвоится. Т.е. как: 1. получить данные от MySql - какие основные моменты? 2. как эти данные "вывести на экран" - какие основные моменты? 3. как повесить события на элементы - какие основные моменты? основные моменты - тезисно и наглядно (примеры кода) Простите за наглость и спасибо за ответы 0

@влад74 102 / 20 / 0 Регистрация: 02.07.2012 Сообщений: 149
	05.05.2017, 02:11 [ТС]
	Спасибо Про получение в формате json понял сразу. У меня проблема с наглядностью (и из-за этого с пониманием) как это сделать - реализовать. Главная проблема - я прошерстил несколько сайтов и не нашел нормально работающего исходника в связке "React-Router-Redux" и желательно с MySQL. Всегда или что-то не работает или ВСЕ не работает (с MySQL вообще ничего не нашел). Я так понял есть большая проблема со связкой Router-Redux. Если можете поделиться исходником (с package.json на React-Router-Redux) в котором работает переход по страницам, данные берутся с MySQL и есть минимальный функционал на Redux - буду очень очень благодарен. Танцы с бубном - море времени ушло (и пока безрезультатно) на то чтобы создать минимальную исходную конфигурацию проекта для себя (MySQL-React-Router-Redux) p.s. VBA - открыл ACCESS-открыл VBE - и вперед кодируй - создавай проект, все более менее интуитивно понятно. Добавлено через 48 минут Вариант: 1. исходник от Maxim Patsianskiy - https://github.com/maxfarseer/... _component. 2. книги от него же - https://www.gitbook.com/@maxfarseer Скажем спасибо мужику Добавлено через 8 часов 17 минут Еще вариант исходника от monsterlessons - https://github.com/monsterless... uter-redux ОБУЧАЮЩЕЕ ВИДЕО: react - http://monsterlessons.com/project/categories/react redux - http://monsterlessons.com/project/categories/redux 0

Опции темы