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

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

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

	JS React Router Redux 03.05.2017, 10:48. Показов 1341. Ответов 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