Рубрика «react.js» - 11

React.js на русском языке. Часть пятая - 1

Перевод официальной документации библиотеки React.js на русском языке.

Оглавление:

1 — Часть первая
2 — Часть вторая
3 — Часть третья
4 — Часть четвертая
5 — Часть пятая
6 — Часть шестая (скоро)

Состояние и жизненный цикл

На данный момент, мы знаем только один способ как обновить пользовательский интерфейс.
Мы отправляем сигнал в ReactDOM.render() чтобы изменить выводимые данные:

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

setInterval(tick, 1000);

Попробуйте повторить этот пример в CodePen.
Читать полностью »

Сегодня делаем настольное приложение с графическим интерфейсом для управления роботом на Ардуине через последовательный порт. На языке JavaScript на платформе Electron с виджетами ReactJS+MaterialUI.

image

Теперь пульт управления для своего станочка с ЧПУ сделать не сложнее, чем написать сайтик.

Читать полностью »

React.js State of the art (интервью с Max Stoiber) - 1

Современная разработка веб-интерфейсов сосредоточена вокруг нескольких больших сообществ. На протяжении последних пяти лет React завоевывал симпатии программистов из самых разных отраслей. React – это одна-единственная библиотека, сделавшая MVC рудиментарным в программировании веб-интерфейсов. Сегодня React используется крупнейшими компаниями для разработки самых разнообразных продуктов — Facebook, Airbnb, BBC, Coursera, eBay, Expedia, IMDB, список можно продолжать.

Одной из уникальных особенностей мира React является крупнейшее и очень активное сообщество опенсорс-разработчиков вокруг него. Max Stoiber — один из людей, благодаря которым React стал тем, чем он является на сегодня как проект. На протяжении последних нескольких лет он работал над популярнейшим boilerplate проектом в сообществе и внедрял новейшие и лучшие технологии в массовое использование.

Мы поговорили с Максом о новых веяниях в сообществе, о статической типизации для разработки с React, о новом подходе стилизации компонентов и о snapshot-тестировании.

К секретам разработки на React можно приобщиться ниже в интервью.
Читать полностью »

React.js на русском языке. Часть третья - 1

Перевод официальной документации библиотеки React.js на русском языке.

Оглавление:

1 — Часть первая
2 — Часть вторая
3 — Часть третья

Отрисовка элементов

Элементы являются самыми мелкими компонентами приложения. Элемент описывает то, что вы хотите увидеть на экране:

const element = <h1>Hello, world</h1>;

В отличие от DOM-элементов браузера, элементы React являются простыми объектами, которые создаются проще. React DOM постоянно следит за обновлением элементов в DOM.

Примечание:

Элементы можно перепутать с более широким понятием, таким как «компоненты». В следующем разделе мы изучим компоненты. Элементы являются строительным материалом для компонентов и прежде, чем двигаться дальше, мы советуем вам ознакомиться с этим разделом.

Читать полностью »

React.js на русском языке. Часть вторая - 1

Перевод официальной документации библиотеки React.js на русском языке.

Оглавление:

1 — Часть первая
2 — Часть вторая

Внедрение JSX

Ознакомьтесь с этим объявлением переменных:

const element = <h1>Hello, world!</h1>;

Этот забавный синтаксис тега не представляет собой ни строку, ни HTML. Он называется JSX и представляет собой расширение языка в JavaScript. Мы рекомендуем использовать его при работе с React, чтобы описать как должен выглядеть UI. JSX может напоминать вам HTML разметку, но он полноценно работает в JavaScript.

JSX производит «элементы» React. В следующем разделе мы будем изучать их.
Читать полностью »

image

Мне очень нравиться концепция и подход React.js, что решил сделать перевод официальной документации React.js на русский язык. В одном посте все конечно не поместиться, так что это будет цикл постов.

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

Установка

React представляет собой многофункциональную библиотеку, которой можно пользоваться при создании различных проектов, новых приложений, а также, библиотеку можно внедрять в созданные ранее проекты.

Знакомство с React

Если вы хотите просто ознакомиться с библиотекой, вы можете использовать онлайн-инструмент CodePen. Попробуйте начать с легкого примера кода «Hello World». При этом, не нужно ничего устанавливать, вы можете просто модифицировать код и наблюдать, как работает программа.

Создание одностраничного приложения

Create React App – это лучший инструмент для создания нового одностраничного приложения.
Читать полностью »

Сколько нужно времени, чтобы просто вывести на экран большой список, используя современные фреймворки?

Список на 2000 строк ReactJS AngularJS Raw HTML SAPUI5 $mol
Появление списка 170 ms 420 ms 260 ms 1200 ms 50 ms
Обновление всех его данных 75 ms 75 ms 260 ms 1200 ms 10 ms

Напишем нехитрое приложение — личный список задач. Какие у него будут характеристики?

ToDoMVC ReactJS AngularJS PolymerJS VanillaJS $mol
Размер ( html + js + css + templates ) * gzip 322 KB 326 KB 56 KB 20 KB 23 KB
Время загрузки 1.4 s 1.5 s 1.0 s 1.7 s 0.7 s
Время создания и удаления 100 задач 1.3 s 1.7 s 1.4 s 1.6 s 0.5s

Небольшая головоломка: перед вами синхронный код, загружающий и обрабатывающий содержимое 4 файлов, но с сервера они грузятся параллельно. Как такое может быть?

Синхронная параллельная загрузка ресурсов

А теперь прошу за мной в кроличью нору, настало время удивительных историй...

Читать полностью »

Довольно часто приходится слышать, что React и особенно JSX-шаблоны – это плохо, и хороший разработчик так не делает. Однако нечасто объясняется, чем именно вредит смешивание верстки и шаблонов в одном файле. И с этим мы попробуем сегодня разобраться.

Подход "каждой технологии свой файл" использовался с начала существования веба, поэтому неудивительно, что слом этого шаблона вызывает отторжение некоторых разработчиков. Но перед тем, как заявлять "нет, мы так делать не будем никогда", будет полезно разобраться истории и понять, почему JSX пользоваться можно, а смешивать скрипты и html – нет.

Читать полностью »

React.js: собираем с нуля изоморфное - универсальное приложение. Часть 2: добавляем bootstrap, страницы и роутинг - 1

Разработка изоморфного приложения глазами моей жены

Это продолжение статьи про разработку изоморфного приложения с нуля на React.js. В этой части мы добавим несколько страниц, bootstrap, роутинг, концепцию Flux и ее популярную реализацию Redux.

Читать полностью »

image

Лицо моей жены, когда она вычитывала эту статью

Я решил написать цикл статей, который и сам был бы счастлив найти где-то полгода назад. Он будет интересен в первую очередь тем, кто хотел бы начать разрабатывать классные приложения на React.js, но не знает, как подступиться к зоопарку разных технологий и инструментов, которые необходимо знать для полноценной front-end разработки в наши дни.

Я хочу с нуля реализовать, пожалуй, наиболее востребованный сценарий: у нас есть серверная часть, которая предоставляет REST API. Часть его методов требует, чтобы пользователь веб-приложения был авторизован.

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js