Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » React

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Hamepage: https://reactjs.org/
https://reactjs.org/docs/faq-internals.html
A JavaScript library for building user interfaces
 

Код:
<!DOCTYPE html>
<html>
<head>
    <!-- Тег meta для указания кодировки -->
      <meta charset="utf-8">
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--
<script crossorigin src="react.production.min.js"></script>
<script crossorigin src="react-dom.production.min.js"></script>
-->
</head>
<body>
<br />
<br />
<br />
<div id="root"></div>
<br />
<br />
<script>
"use strict"
//import React from 'react';
//import ReactDOM from 'react-dom';
 
// https://www.youtube.com/watch?v=BwAakF_VUV8
 
ReactDOM.render(
  React.createElement(
      'h1',
      null,
      'Hello World!'
  ),
  document.getElementById('root')
);
</script>
</body>
<html>


Код:
<!DOCTYPE html>
<html>
<head>
    <!-- Тег meta для указания кодировки -->
      <meta charset="utf-8">
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--
<script crossorigin src="react.production.min.js"></script>
<script crossorigin src="react-dom.production.min.js"></script>
-->
</head>
<body>
<br />
<br />
<br />
<div id="root" name="root"></div>
<br />
<br />
<script>
"use strict"
//import React from 'react';
//import ReactDOM from 'react-dom';
 
// https://www.youtube.com/watch?v=BwAakF_VUV8
 
function tick() {
  const element = (
      React.createElement(
          'h2',
          null,
          'It is: '+new Date().toLocaleTimeString()+' Hour'
      )
  );
  ReactDOM.render(element, document.getElementById('root'));
}
 
setInterval(tick, 1000);
 
</script>
</body>
<html>


Код:
<!DOCTYPE html>
<html>
<head>
    <!-- Тег meta для указания кодировки -->
      <meta charset="utf-8">
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--
<script crossorigin src="react.production.min.js"></script>
<script crossorigin src="react-dom.production.min.js"></script>
-->
</head>
<body>
<br />
<br />
<br />
<div id="root" name="root"></div>
<br />
<br />
<script type="text/babel">
//"use strict"
//import React from 'react';
//import ReactDOM from 'react-dom';
 
// https://www.youtube.com/watch?v=BwAakF_VUV8
 
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  // highlight-next-line
  ReactDOM.render(element, document.getElementById('root'));
}
 
setInterval(tick, 1000);
 
 
</script>
</body>
<html>

саздал первые примеры
но у меня вопрос: как всегда использовать VDOM? (те. чтобы он всегда по умолчанию on был бы)
 
спасибо
 
Добавлено:
вернее как пользоваться VDOM'ом. нужны азы

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 23:18 03-03-2018 | Исправлено: vs6262, 02:19 04-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
если по 3х примеру VDOM поддерживается, то это наверное скоростное написание динамического кода с пом. React и Babel. не знаю может я ерунду пока несу, я в этих технологиях пока начинающий

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 02:56 04-03-2018 | Исправлено: vs6262, 03:03 04-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
вот мой 4х пример. но мои вопросы остаются в силе

Код:
<!DOCTYPE html>
<html>
<head>
    <!-- Тег meta для указания кодировки -->
      <meta charset="utf-8">
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--
<script crossorigin src="react.production.min.js"></script>
<script crossorigin src="react-dom.production.min.js"></script>
-->
</head>
<body>
<br />
<br />
<br />
<div id="root" name="root"></div>
<br />
<br />
<style>
    #zz{
        position:absolute;
        left:200px;
        top:200px;
    }
</style>
<script type="text/babel">
//"use strict"
//import React from 'react';
//import ReactDOM from 'react-dom';
 
// https://www.youtube.com/watch?v=BwAakF_VUV8
var ii=200;
function tick() {
  const element = (
    <div id="zz">
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  // highlight-next-line
  ReactDOM.render(element, document.getElementById('root'));
  ii=ii+3;
  document.getElementById("zz").style.top=ii+"px";
}
 
setInterval(tick, 30);
 
 
</script>
</body>
<html>

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 12:13 04-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
попробую сам проверить. завяжу в сайт картинок 20х и понаблюдаю за скоростью изменений

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 23:00 06-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
кто знает как в React с дуплицировать объект с другими значениями к примеру left и top?
 
что то я зациклился, не разберусь
 
спасибо
 
Добавлено:
те. мне нужно чтобы в объект добавлять и добавлять объекты одинаковые с разными параметрами
 
Добавлено:
те. вызвать к примеру один и тот же объект в разных местах в браузере с разными параметрами поочереди добавляя эти объекты

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 04:54 23-03-2018
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
дуплицировать объект с другими значениями к примеру left и top


Код:
var obj  = {
 left: 0,
 top: 0
}

об этом речь?

Всего записей: 6817 | Зарегистр. 20-09-2014 | Отправлено: 06:48 23-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
конкретнее чтобы я мог такой объект одновременно выдавать в разных местах браузера несколько раз

Код:
function tick() {  
   const element = (  
     <div>  
       <h1>Hello, world!</h1>  
       <h2>It is {new Date().toLocaleTimeString()}.</h2>  
     </div>  
   );  
   // highlight-next-line  
   ReactDOM.render(element, document.getElementById('root'));  
 }  

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 07:06 23-03-2018
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262

Цитата:
чтобы я мог такой объект одновременно выдавать в разных местах браузера несколько раз

какой именно "объект"? приведена функция.

Всего записей: 6817 | Зарегистр. 20-09-2014 | Отправлено: 07:09 23-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
<div>  
        <h1>Hello, world!</h1>  
        <h2>It is {new Date().toLocaleTimeString()}.</h2>  
      </div>  

 
Добавлено:
я думаю html код это тоже объект
 
Добавлено:
что то вроде push

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 07:10 23-03-2018
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262

Цитата:
что то вроде push

об этом речь?
https://codepen.io/anon/pen/OvgzWK?editors=0010
+ https://stackoverflow.com/questions/32577886/is-there-a-way-to-render-multiple-react-components-in-the-react-render-functio

Всего записей: 6817 | Зарегистр. 20-09-2014 | Отправлено: 07:29 23-03-2018 | Исправлено: Mavrikii, 07:29 23-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
да  
пасибки
 
Добавлено:

Код:
render(_id) {
  return [
    <li key="one" id={_id}>First item</li>,
    <li key="two">Second item</li>,
    <li key="three">Third item</li>,
    <li key="four">Fourth item</li>,
  ];
}

 
и если можно ещё вопрос: будет ли это статически держать  _id ?
 
Добавлено:
-------------
https://codepen.io/anon/pen/OvgzWK?editors=0010
сохранил в файле и не работает?

Код:
<!DOCTYPE html>
<html>
<head>
    <!-- Тег meta для указания кодировки -->
      <meta charset="utf-8">
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-->
<!--
<script crossorigin src="react.production.min.js"></script>
<script crossorigin src="react-dom.production.min.js"></script>
-->
 
<script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script>
</head>
<body>
<br />
<br />
<br />
<div id="root"></div>
<br />
<br />
<style>
 
</style>
<script type="text/babel">
//"use strict"
//import React from 'react';
//import ReactDOM from 'react-dom';
 
// https://www.youtube.com/watch?v=BwAakF_VUV8
 
 
function tick() {
  const element = (
    <div key="k-1">
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  el2 = React.cloneElement(element, {key: "k-2", style: {left: 10, top: 100, position: 'absolute'}});
  // highlight-next-line
  ReactDOM.render([element, el2], document.getElementById('root'));  
}
 
setInterval(tick, 1000);
 
 
 
</script>
</body>
<html>

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 07:31 23-03-2018
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
будет ли это статически держать  _id

попробовать и узнать, смотря что имеется в виду под этим
 

Цитата:
сохранил в файле и не работает?

посмотреть и подумать
Цитата:
<script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script>  
<script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script>  

ничто не смущает?

Всего записей: 6817 | Зарегистр. 20-09-2014 | Отправлено: 08:09 23-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
https://reactjs.org/docs/optimizing-performance.html#use-the-production-build

Код:
Single-File Builds
 
We offer production-ready versions of React and React DOM as single files:
 
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

вот так тоже не рамотает

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 08:22 23-03-2018
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
F12 и смотрим сообщения об ошибках. все работает - https://jsfiddle.net/4gpfop04/1/

Цитата:
</script>  
</body>  
<html>

Всего записей: 6817 | Зарегистр. 20-09-2014 | Отправлено: 08:27 23-03-2018 | Исправлено: Mavrikii, 08:27 23-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ReferenceError: assignment to undeclared variable el2[Weitere Informationen]
уже подправил, работает
пасибки

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 08:33 23-03-2018 | Исправлено: vs6262, 08:38 23-03-2018
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
assignment to undeclared variable el2

убрать
Цитата:
"use strict"  

или сделать var el2 = ...

Всего записей: 6817 | Зарегистр. 20-09-2014 | Отправлено: 08:34 23-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
рабочий код

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 08:39 23-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
пример показывающий что в id={var_id}  var_id статический
код

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 14:14 23-03-2018
Mavrikii

Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262

Цитата:
 в id={var_id}  var_id статический

не совсем понятно что пытались показать и зачем. и, тем более, при чем тут статика (может не то понятие вкладывается)

Всего записей: 6817 | Зарегистр. 20-09-2014 | Отправлено: 21:01 23-03-2018 | Исправлено: Mavrikii, 21:03 23-03-2018
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
я имел ввиду что для конечных html элементов переменные статические
код fix

Всего записей: 1623 | Зарегистр. 25-02-2013 | Отправлено: 00:48 24-03-2018
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » Web-программирование » React

Имя:
Пароль:
Сообщение

Для вставки имени, кликните на нем.

Опции сообщенияДобавить свою подпись
Подписаться на получение ответов по e-mail
Добавить тему в личные закладки
Разрешить смайлики?
Запретить коды


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2018

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru