JS React Router Redux

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

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

Всем доброго времени суток.
Я программист 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").innerHTML = "";
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").innerHTML = 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','abc123','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

@влад74 102 / 20 / 0 Регистрация: 02.07.2012 Сообщений: 149
		1
	JS React Router Redux 03.05.2017, 10:48. Показов 1159. Ответов 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	2
	Тут вроде все и даже больше, поиск отключили? 0

@влад74 102 / 20 / 0 Регистрация: 02.07.2012 Сообщений: 149
	03.05.2017, 17:14 [ТС]	3
	поиск не отключал. Но на этот материал не выходил. 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").innerHTML = ""; 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").innerHTML = 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','abc123','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

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	03.05.2017, 17:39	4
	Сообщение от влад74 ответ от Similar А вы авторизуйтесь и он пропадет. Добавлено через 2 минуты Сообщение от влад74 Теория и ссылки нахер не нужны. По ссылке полностью описана разработка полноценного приложения, что вам не нравится? 0

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

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	04.05.2017, 15:36	6
	влад74, посмотрите пример Reddit API, созданным автором Redux. Там описано, как получать данные, выводить их и обрабатывать события. Сообщение от влад74 получить данные от MySql - какие основные моменты? Основной момент, который нужно понять, что для SPA-библиотек и фреймворков не важно, что используется на сервере - БД (MySQL, MongoDB и пр. ) и язык (PHP, C#, Java, Node.js или др.). В таких случаях сервер обычно отдает данные в формате json, а не html-разметку. 1

@влад74 102 / 20 / 0 Регистрация: 02.07.2012 Сообщений: 149
	05.05.2017, 02:11 [ТС]	7
	Спасибо Про получение в формате 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