Разное

Про reactJS (заметка носит черновичный характер)


React - это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов (UI). Она позволяет вам создавать сложные UI из небольших и изолированных частей кода, называемых «компонентами».

JSX is an XML-like syntax extension to ECMAScript without any defined semantics. (О jsx)
JSX — это компромисс, который позволяет нам разрабатывать компоненты React используя HTML-подобный синтаксис (Внутри JSX можно использовать только выражения).

Начало работы с react:

1. В командной строке Установка с помощью npm**: npm install -g create-react-app (устанавливаем create react app, который включает в себя babel и webpack)
2. Создание собственного приложения (проекта) в консоли: create-react-app app (если надо создать проект в папке "D", к примеру, то пишем команду: d: и уже потом создаем проект)
3. Очистим папку src:
cd app
cd src
 # Если вы используете Mac или Linux:
 rm -f *
 # Или, если вы на Windows:
 del *
 # Затем переключитесь обратно на папку проекта
 cd ..
4. Открываем проект по пути (указан в консоли) - обычно это C://Users/User/app*
*название приложения
5. Чтобы запустить dev-сервер (в браузере откроется localhost:3000 с отрендереной страницей) нужно прописать код в Terminal idea: npm start
6. Установить bootstrap в Terminal idea: npm add bootstrap@next
7. Подключить bootstrap в компоненте:
import 'bootstrap/dist/css/bootstrap.css'

**npm (аббр. node package manager) — это стандартный менеджер пакетов, автоматически устанавливающийся вместе с Node.js. Он используется для скачивания пакетов из облачного сервера npm, либо для загрузки пакетов на эти сервера.

Нюансы работы:

1. Импортировать один компонент в другой:
import Article from './Article' (где Article - это файл Article.js)
Причем в импортируемом файле должно быть внизу прописано:
export default Article;
либо прямо так, если это функциональный компонент, хотя и для class сойдет:
export default function ArticleList({articles}) {

2. Для того, чтобы работать с событиями (то есть добавить и менять состояние компонента в зависимости от действия) в компонентах, нужно в компоненте:
import React, {Component} from 'react',
затем объявить компонент классом с расширением класса Component: 
class Article extends Component { .... 
Внутри реализуем: 
render(){...здесь логика компонента, где свойства уже не передаются в качестве аргумента в function Article(props), а просто this.props}

3. Итерация массива и превращение элементов в реактовские элементы:
const articleElements = articles.map(article =>
        <li key={article.id}><Article article={article}/></li>
    )

В результате в articleElements будет список (li) статей массива articles

4. Аттрибут key нужен для того, чтобы react мог точно знать к какому элементу ему обращаться, то есть он связывает реактовские элементы с теми данными, которые он отображает. Благодаря key уменьшается кол-во операций, выполняемое программой, а соответственно и время выполнения. Лучше всего для key подходят id.

5. Один из Lifecycle methods: componentWillReceiveProps - компонент получает новые props. Этот метод не вызывается в момент первого render'a. В этот момент, старые props доступны как this.props, а новые props доступны в виде nextProps аргумента функции componentWillReceiveProps(nextProps){...}. Этот метод вызывается только в том случае, если поменялся родитель И поменялся state.

6. Чтобы react зря не обновлял компонент (если в нем нет никаких изменений), то лучше расширять не Component, а PureComponent:
import React, {PureComponent} from 'react'
class Article extends PureComponent {
...
}
Поскольку PureComponent уже имеет в себе реализованный метод shouldComponentUpdate, который сравнивает все nextProps и nextState.

7. Передать состояние из дочернего в родительский можно с помощью обратного потока данных - reverseDataFlow. Пример:
В родителе описываем проперти: <Article onButtonClick = {this.handleOnClick.bind(this, article.id)}/>
И сам метод: handleOnClick = openArticleId => this.setState({openArticleId })
В дочернем получаем проперти:  const {onButtonClick} = this.props
И назначаем его событию:  <button onClick={onButtonClick} className="btn btn-primary btn-lg float-right">...</button>

8. Для примитивной анимации загрузить пакет: 
npm install react-addons-css-transition-group --save
Использовать его: import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
<div>    
    <ReactCSSTransitionGroup transitionName="anim" transitionAppear={true} transitionAppearTimeout={5000} transitionEnter={false} transitionLeave={false}>
        <h2>{'TutsPlus - Welcome to React Animations'}</h2>
    </ReactCSSTransitionGroup>
</div>
При этом добавит и импортировать стили:
.anim-appear {
opacity: 
0.01;
}
.anim-appear.anim-appear-active{
  opacity: 2;
  transition: opacity 5s ease-in;
}

ОСОБЕННОСТИ REACT:

- Работает на основе компонентов
- Компоненты могут быть представлены функциями, либо классами
- Если имеет место изменение локального состояния, то нужно использовать класс
- Можно передавать состояние (подъем состояния) из дочернего элемента в родительский
- В компонентах присутствуют props и state
- В props можно передавать как примитивы, так и объекты, функции
- Контекст разработан для совместного использования данных, которые можно рассматривать «глобальными» для дерева React компонентов, например таких как текущий аутентифицированный пользователь, тема или предпочтительный язык.

Подробнее здесь

 - Фрагмент - компонент, возвращающий несколько элементов. Фрагменты позволяют группировать список потомков без добавления дополнительных узлов в DOM:
 class Columns extends React.Component {
    render() {
      return (
        <React.Fragment>
          <td>Hello</td>
          <td>World</td>
        </React.Fragment>
      );
    }
  }

- Порталы предоставляют первоклассный способ отображения дочерних элементов в узел DOM, который существует вне иерархии DOM родительского компонента. Пример тому модальное окно (modalRoot - реальный узел в DOM - const modalRoot = document.getElementById('modal-root')):
class Modal extends React.Component {
  constructor(props) {
    super(props);
    // Create a div that we'll render the modal into. Because each
    // Modal component has its own element, we can render multiple
    // modal components into the modal container.
    this.el = document.createElement('div');
  }
  componentDidMount() {
    // Append the element into the DOM on mount. We'll render
    // into the modal container element (see the HTML tab).
    modalRoot.appendChild(this.el);
  }
  componentWillUnmount() {
    // Remove the element from the DOM when we unmount
    modalRoot.removeChild(this.el);
  }
  render() {
    // Use a portal to render the children into the element
    return ReactDOM.createPortal(
      // Any valid React child: JSX, strings, arrays, etc.
      this.props.children,
      // A DOM element
      this.el,
    );
  }
}
Термин «свойство render» (в оригинале «render prop») относится к простой методике совместного использования кода между компонентами React, принимающими свойство prop, значение которого является функцией
Компонент со свойством render принимает функцию, которая возвращает элемент React, и вызывает её вместо реализации своей собственной логики отрисовки.

- this.props.children - это то, что передается между тегами компонента (JSX, strings, arrays, etc). В примере ниже это div с классом modal: 
      <Modal>
         <div className="modal">
           <div>
             With a portal...
           </div>
           This is being rendered inside the #modal-container div.
           <button onClick={this.handleHide}>Hide modal</button>
         </div>
       </Modal>
Компонент более высокого порядка (в документации Higher-Order Components – сокращенно HOC) или старший компонент - это функция, которая принимает компонент и возвращает новый компонент. Принимаемый (оригинальный) компонент ни в коем случае нельзя изменять, вместо этого надо использовать композицию, обертывая входной компонент в компонент-контейнер:
 function addErrorMessage(TargetComponent) { 
return class extends React.Component { showErrorMessage(text) { this.setState({errorMessage: {isShowed: true, text: text}); } render() { // Обертывает исходный компонент в контейнер без изменения - правильно! return <TargetComponent {...this.props} />; } } }
 - UI - user interface (пользовательский интерфейс)

- Совет! Мы рекомендуем именовать props с точки зрения компонента, а не контекста, в котором он будет использован.

- Золотое правило: если какая-то часть вашего UI используется неоднократно (Button, Panel, Avatar), или довольно сложная (составная) (App, FeedStory, Comment) – она хороший кандидат на то, чтобы стать переиспользуемым компонентом

- Все React-компоненты должны работать как чистые функции в отношении своих свойств “props” (чистые функции не меняют свои аргументы)

- Локальное состояние является возможностью, доступной только для классов.

- Если вы не используете что-то в render(), оно не должно находиться в состоянии state.

- Вы можете назначить this.state только в конструкторе!

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

- В HTML-элементы форм, такие как <input>, <textarea> и <select> как правило хранят свое собственное состояние и обновляют его на основании пользовательского ввода. В React модифицируемое состояние как правило является собственностью компонентов и обновляется только с помощью setState().

- Элемент ввода формы (например, input), значение которого контролируется React, в этом случае называется «контролируемый компонент».

- React вместо использования атрибута selected, использует атрибут value на корневом теге select. Это удобнее в контролируемом компоненте, потому что вам необходимо обновлять его только в одном месте. 

- С массивами (state, к примеру) надо работать осторожно и не менять сами объекты, а менять их копии

- Начиная с 16 версии React компонент может возвращать также и массив элементов:

render() { // Больше нет необходимости оборачивать список элементов в дополнительный элемент! return [ // Не забывайте про ключи "key" :) <li key="A">Первый элемент</li>, <li key="B">Второй элемент</li>, <li key="C">Третий элемент</li>, ]; }

- Вы должны преобразовать компонент в класс, если хотите ссылаться на него (ref). Точно так же вы делаете, когда вам необходимо наделить компонент методами жизненного цикла и состоянием.
Вы, тем не менее, можете использовать атрибут ref внутри функционального компонента, так как вы ссылаетесь на DOM-элемент или класс компонента.


 function CustomTextInput(props) {
// textInput должен быть объявлен здесь, чтобы ref мог ссылаться на него let textInput = React.createRef(); function handleClick() { textInput.current.focus(); } return ( <div> <input type="text" ref={textInput} /> <input type="button" value="Focus the text input" onClick={handleClick} /> </div> ); }
- Создание ключа для списка на основе переданного в функцию параметра (например имя пользователя, тайтл статьи):
function getKey(str){
let key = 0; for (let i = 0; i < str.length; i++) { key += str.charCodeAt(i); } return key.toString(); }



Материалы взяты отсюда: https://learn-reactjs.ru и отсюда: https://learn.javascript.ru/screencast/react


сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей