09.11.2018 10:19
eduardtkachuk 22 2100 Источник

image


Предисловие


Для начала представлюсь, меня зовут Эдик, я Full Stack Web Developer. Основные направления Laravel & React.js, Vue.js. Изучаю GoLang и Swift.


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


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


Я пишу эти нотатки для себя и решил поделится ими со всем миром. Так что не будьте суровы. И так, поехали!


Глава 1. Добро пожаловать в React


React — популярная библиотека, используемая для создания пользовательских интерфейсов. Она была создана в Facebook чтобы решить ряд проблем, связанных с крупномаштабными сайтами.


React как библиотека


Стоит заметить, что библиотека не велика по размеру и используется только для одной части всей работы. Основные решения о том, какими средствами экосистемы воспользоваться, принимают разработчики. React — это только «V» в мире "MVC".


Новый синтаксис ECMAScript


React использует новые возможности ECMAScript. Если вы не знакомы с последней спецификацией, то просмотр кода React может вызвать неуверенность в своих силах.


Популярность функционально JavaScript


JavaScript скрипт не является функциональным языком, но в его коде могут быть использованы функциональные методы. В React придается особое значение приоритеру функционального программирования над объектно-ориентированным. Этот сдвиг в мышлении может привести к существенным преимуществам в таких областях, как пригодится к тестированию и повышению производительности.


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

Утомительный JavaScript


Чтобы работать с React вам нужно освоить основы Webpack. Webpack позволит тестировать код, разбивать на модули, сжимать его для продакшена и т.д.


Будущее библиотеки React


В следующей версии библиотеки будет включена средство Fiber — новая реализация основного алгоритма React, целью которого является увеличение скорости выдачи изображения на экран. Многие изменения связаны с целевыми устройствами. Не нужно забывать, что React ещё используется в React Native.


Работа с файлами


Инструменты React-разработчика


Существует несколько инструментов, которые могут быть установлены в качестве расширений или дополнительных модулей браузера и представлять для нас определенный интерес:


react-detector — расширение браузера Chrome, позволяет узнать какие сайты используют React.


show-me-the-react — ещё одно средство обнаруживающее React.


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


React Developer Tools — отличный инструмент который экономит очень много времени при отладке. Если вы хотите профессионально писать с помощью React этот модуль Вам очень пригодится.

Установка Node.js


Node.js — JavaScript-язык без браузера (серверный JS). Это среда исполнения, применяемая для создания JavaScript-приложений на стороне как клиента, так и сервера. Может быть установлена на Windows, MacOS, Linux и другие платформы.


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

Чтобы использовать React, Node не нужен. Но при работе с React для установки зависимостей необходимо будет задействовать диспетчер пакетов под названием NPM. Он устанавливается автоматически с Node.


Чтобы проверить установлен ли Node в терминале введите node -v. Вы дожны увидеть версию вашего Node.


$ node -v

v.10.13.0

Альтернатива NPM


Дополнительной альтернативой NPM является Yarn. Этот инструмент был выпущен Facebook в сотрудничестве с Exponent, Google & Tilde. Он помогает надежнее управлять зависимостями приложения. При работе с Yarn, можно заметить, что он работает быстрее NPM.


Установить Yarn очень легко. После установки Node введите:


$ npm install -g yarn

Подробности установки вы можете найти на официальном сайте Yarn.

И после этого всё будет готово к установке пакетов. При установке зависимостей из packege.json вместо npm install можно запустить команду yarn.


Добавление пакета с помощью Yarn:


$ yarn add [имя_пакета]

Удаление пакета с помощью Yarn:


$ yarn remove [имя_пакета]

Комментарии (22)


  1. Carduelis
    09.11.2018 13:42
    #19344436
    -1

    React — это только «V» в мире «MVC».

    I'm not sure about this statement. With Context API, new Hooks API (useReducer) it becomes more complex than «just a view».
    Use of useReducer()
    const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'reset':
      return initialState;
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, {count: initialCount});
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'reset'})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}


    1. eduardtkachuk Автор
      09.11.2018 15:47
      #19345122

      I'm not sure ...
      Автор вашей цитаты сам не уверен в этом. Да, могут появится сомнения, но сам Facebook говорит нам об этом "A JavaScript library for building user interfaces". И самое интересное то, что в приведённом Вами примере используется redux, а это уже сторонняя библиотека дополняющая React.


      1. Carduelis
        09.11.2018 16:20
        #19345310
        -1

        используется redux

        Nope. They put reducers into basic hooks
        reactjs.org/docs/hooks-reference.html#usereducer


        1. eduardtkachuk Автор
          09.11.2018 16:37
          #19345422

          Перешёл по ссылке и нашел вот такую вот фразу "If you’re familiar with Redux, you already know how this works". Это альтернатива useState.


          1. Carduelis
            09.11.2018 19:09
            #19346150
            -1

            Yes. It is an alternative. Dan Abramov is also co-maintainer of Redux.
            But this reducer and dispatching mechanism are a part of React core: ReactHooks.js


  1. Tantrido
    09.11.2018 13:48
    #19344484

    Краткая выжимка из книги React и Redux функциональная веб-разработка:
    А где сама книга?

    P.S. Нашёл на гитхабе, но и там книги ещё нет — только выжимка :)


    1. eduardtkachuk Автор
      09.11.2018 15:50
      #19345138

      Книгу можно легко найти по названию "React и Redux функциональная веб-разработка".


      1. Tantrido
        09.11.2018 16:00
        #19345192

        React и Redux. Функциональная веб-разработка — Видеоуроки
        [Alex Banks, Eve Porcello] Functional Web Development with React and Redux
        Вот что нашёл. А при чём здесь Вы? :)


        1. eduardtkachuk Автор
          09.11.2018 16:03
          #19345208

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


  1. staticlab
    09.11.2018 14:49
    #19344806
    +1

    Какие-то отрывочные факты. Опытным это уже не нужно, а новички не погрузятся.


    1. eduardtkachuk Автор
      09.11.2018 15:58
      #19345180

      Спасибо. Именно эти отрывочные факты и есть основа статьи. Я думаю как раз опытные специалисты оценят то что им не придётся обрабатывать море воды (писателям платят чаще всего за количество строк, а не за качество). А молодым я бы не советовал сразу браться за книгу. Для начала изучить основы JS, понять что такое функциональное программирование, попробовать чистый React, а дальше расширять его по мере необходимости.


      1. staticlab
        09.11.2018 16:37
        #19345428

        Тогда это уже не совсем новичок во фронтенде. Тогда вопрос: почему такой джун, который разобрался, что такое node.js, npm, webpack, не сможет прочитать инструкцию по установке и работе с yarn с официального сайта? Можно было бы просто ограничиться фразой, что yarn — более быстрый и удобный инструмент, чем npm.


        1. eduardtkachuk Автор
          09.11.2018 18:22
          #19345966

          Я думаю разумный человек не будет изучать React без знаний в основах JS. Вы со мной согласны?


          1. staticlab
            09.11.2018 18:26
            #19345986

            Мой вопрос был в том, что если это разумный человек со знаниями основ JS и даже с базовыми знаниями о сборочном пайплайне, то зачем ему настолько подробно рассказывать, как работать с yarn?


            1. eduardtkachuk Автор
              09.11.2018 19:09
              #19346152

              Я Вас понял, чтобы в кратце показать плюсы Yarn и ту легкость которую он даёт при работе с ним. В примере всего пару комманд для работы с Yarn. Те кто работали с NPM заметят что особых отличий нету, но Yarn даст хороший прирост в скорости. Спасибо, у Вас интересные вопросы.


  1. justboris
    09.11.2018 23:42
    #19347066

    React — это только «V» в мире "MVC".

    Под этим слоганом реакт продавался в своих первых версиях. Сейчас парадигма поменялась, натягивание на MVC только усложняет понимание.


    Чтобы работать с React вам нужно освоить основы Webpack

    Разработчики реакта показывают в документации как работать React без сборки. Можно начать с голыми скриптами, а бандлеры притащить сильно позже.


    Вот тут есть хорошая последовательность шагов обучения.


    В следующей версии библиотеки будет включена средство Fiber

    "Следующая" версия это 16, которая вышла больше года назад.


    В целом, статья – хорошая иллюстрация, почему лучше не учить фреймворки по книжкам. Информация устаревает и искажается.


    1. eduardtkachuk Автор
      10.11.2018 00:43
      #19347208

      … лучше не учить фреймворки по книжкам.
      Тут я не могу не согласиться, но ядро React осталось. Книги это классика, не знаю как передать это чувство, но я как будто испытываю эйфорию после прочтения книги. Это всего лишь выжимка из книги, так что не судите строго, спасибо.


  1. DRVTiny
    10.11.2018 14:17
    #19348352
    +1

    Недавно на Хабре была очень душевная и понятная даже мне, человеку очень далёкому от фронтенда, статья о React для начинающих. Написана хорошим русским языком, содержательная.
    Здесь же я вижу косноязычный (и содержащий глупые ошибки недоредактированного google-перевода типа "JavaScript скрипт") перевод первой главы какой-то книги, которую после такого перевода я лично не захотел бы читать и в оригинале. Зачем было так делать? Например, когда я переводил документацию для Privoxy, у меня получался текст, превышающий по объёму и качеству оригинал, дополненный к тому же курсивными уточнениями переводчика. Не повод хвалиться, но я хотя бы знаю, что старался.
    Подобные же Вашему переводу вещи, как мне кажется, попахивают халтурой и уж точно не делают React более популярным.
    Коль скоро первый блин всё равно живёт в песочнице, мне кажется, ещё не поздно перевести дополнительные, более содержательные главы книги, поработав над качеством русского языка.
    Прошу извинить меня за резкость, я не со зла, а в надежде на то, что хороших статей о Реакте будет больше.


    1. eduardtkachuk Автор
      10.11.2018 19:14
      #19349198

      … превышающий по объёму и качеству оригинал ...
      Во-первых качество !== количество. Да и ещё тексты в английском языке не настолько длинные. Я рад что у Вас там всё хорошо, но сейчас мы говорим об этой статье.
      … недоредактированного google-перевода ...
      Во-вторых никто не говорил о переводе, это короткие вырезки из книги, напишите им в редакцию чтобы они поправили.

      А в общем спасибо, всегда есть куда стремится!


      1. DRVTiny
        11.11.2018 03:24
        #19350248

        По существу: когда я читаю такое:

        Утомительный JavaScript

        Чтобы работать с React вам нужно освоить основы Webpack. Webpack позволит тестировать код, разбивать на модули, сжимать его для продакшена и т.д.

        — у меня возникает только один вопрос: кто здесь? (переформулирую: «кто все эти люди?» или «куда я попал?»).
        Зачем так много заголовков, да ещё столь странных? Почему такое количество текста выделено, для чего? Всё это попахивает каким-то лютым трешем в духе книг по маркетингу для домохозяек.
        Я понимаю, что нам приходится читать подобное регулярно, потому что слишком большое количество авторов в ой же Америке «подсели» на подобный стиль изложения в духе «доклад-презентация на крутой конференции», но дело в том, что при переводе легко подобные вещи сгладить, а не выдать в гипертрофированном виде.
        Если это что-то вроде краткого содержания — тем более логичнее наверное вовсе пересказать собственными словами…
        В итоге для меня навязчивый вопрос «что это вообще было?» так и повис в смысловом вакууме. Не проникся, честно, хотя идея наверняка была хорошая.


        1. eduardtkachuk Автор
          11.11.2018 14:50
          #19351310
          -1

          Если у Вас возникает эти странные вопросы советую пройти путь новичка в Web. HTML -> CSS -> JS. А потом научится внятно читать и понимать, выделенный текст в статье для того чтобы обратить внимание, заголовки это основная идея следующего, так сказать, модуля.

          Утомительный JavaScript

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

          Расскажу Вам маленькую историю. Разговор об утомительном JS превратился уже в некое клише, но такое мнение сложилось только из-за сложности сборки программного продукта. В прошлом файлы JS просто добавлялись к Вашей странице. Теперь же они должны пройти процесс транспиляции (JSX -> JS), тестирования и сборки. Это если коротко, я думаю Ваш вопрос исчерпан, спасибо.


  1. Nookie-Grey
    12.11.2018 19:36
    #19357068

    А что yarn действительно быстрее npm?