Топ-5 навыков, которые вы должны знать, прежде чем изучать ReactJS

изучать ReactJS Программирование и разработка

Знаете ли вы достаточно javascript, прежде чем переходить к React?

Вы знаете, как использовать метод map () для перебора массива в javascript или ReactJS?

Если вы изучаете React и застреваете на подобных вопросах, значит, вы определённо делаете ошибки в процессе обучения. Нет сомнений в том, что ReactJS — самая популярная библиотека среди фронтенд-разработчиков, и её популярность постоянно растёт с каждым днём. Веб-сайт, работающий на ReactJS, выглядит красиво, и большинство новичков в разработке также привлекаются к ReactJs (разработанным Facebook), но распространённая ошибка, которую допускают многие разработчики и опытные люди, — это прыгать прямо в ReactJS (или другую библиотеку и фреймворк), не зная предварительных условий. Если вы сразу перейдёте к React, вы столкнётесь с множеством проблем при изучении этой библиотеки, а также на собеседованиях.

изучать ReactJS

Вы застрянете во время собеседования, если вам зададут несколько вопросов, связанных с ES6, JSX, Babel, менеджером пакетов, базовым javascript или некоторыми другими фундаментальными концепциями. Мы собираемся обсудить некоторые предварительные условия и некоторые основные концепции, которые вы должны знать, прежде чем переходить к React. Эти базовые концепции также помогут вам в будущем подобрать другие фреймворки и библиотеки javascript.

HTMLи CSS

Каждый фронтенд-разработчик начинает свой путь с HTML и CSS. Итак, прежде чем вы начнёте учиться реагировать, вы должны хорошо разбираться в написании HTML и CSS. Вы должны знать, как писать семантические HTML-теги, как писать селекторы CSS, как использовать классы, как реализовать сброс CSS, блочную модель, как выполнить сброс до border-box, flexbox, как писать отзывчивые веб-приложения, включая медиа-запросы и как создать интерфейсное приложение с использованием HTML и CSS.

JSX (Javascript XML) и Babel

В React вы будете работать с JSX, который выглядит как HTML, и вы можете рассматривать его как JavaScript с добавлением HTML. Это самый простой способ добавить HTML-код в javascript, или вы можете сказать, что это расширение синтаксиса языка Javascript. Вы должны полностью понимать, что такое JSX, прежде чем приступить к изучению React. Просто взгляните на код ниже…

const h1 = <h1>Hello Programmers</h1>;

Когда вы впервые посмотрите на приведённый выше код, это может вас смутить. Это Javascript? или HTML? или что-то другое. Если вы запустите приведённый выше код в файле HTML, он не запустится, но код содержит тег HTML <h1> Hello world </h1>. По сути, JSX расширяет ECMAScript, так что текст, подобный XML / HTML, может сосуществовать вместе с кодом реакции JavaScript. Это можно понять по изображению и приведённому ниже коду…

var MyComponent = React.createClass({

render :function () {

return(

<h2>Hello Programmers!</h2>

);

}

});

ReactDOM.render(<MyComponent/>, document.getElementById(‘content’));

Ещё одна вещь, о которой вам следует знать

Ещё одна вещь, о которой вам следует знать, — это Вавилон. Babel — это компилятор, который преобразует HTML-текст в файлах JavaScript в стандартные объекты JavaScript. Он берёт функции из последней версии javascript или ECMAScript 2015+ (ES6 +) и сводит их к ES5 или обычному javascript. Если вы хотите использовать React, убедитесь, что ваша концепция должна чётко указывать на JSX и Babel. Посмотрите, как Babel выполняет преобразование по ссылке здесь.

Основы Javascript и ES6

Независимо от того, что… вы не сможете стать лучше в React, если ваш фундаментальный javascript неясен. Во время собеседований это один из важнейших навыков, который необходимо изучить, прежде чем приступить к реагированию. Javascript — один из самых запутанных языков для разработчиков, он игнорирует мелкие ошибки, которые могут создать проблему в вашем проекте, если вы не заметите её раньше. Поэтому убедитесь, что вы сначала прояснили своё базовое представление о javascript, а затем перешли к расширенной версии или ECMAScript5 и ECMAScript6. Некоторые из тем приведены ниже, но убедитесь, что вы изучаете как можно больше и создаёте несколько проектов, чтобы получить более глубокие знания в javascript.

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

  • Начните с переменных, числа, логических значений, строк и проясните свои концепции относительно других основных принципов. Сделайте небольшое приложение, например калькулятор, чтобы увидеть, как всё работает вместе.
  • Узнайте об операторах, условных выражениях, функциях, циклах, ключевых словах javascript, массивах, объектах и ​​других основах.
  • Обработка событий, манипуляции с DOM и то, как ключевое слово this работает в javascript, совершенно по-разному (что сбивает с толку большинство разработчиков).
  • Функция высшего порядка, функция обратного вызова, функция стрелки, состояние (как работает функция state и setState ()), область видимости, класс и конструкторы, расширение и наследование, карта, уменьшение, фильтр, обещания, модули, замыкания, const, let (разница между var, let и const) и другие особенности ES5 и ES6.

Менеджер пакетов (Node + Npm)

Когда вы будете работать с ReactJS, вам придётся установить множество программных пакетов меньшего размера. Пакет в javascript содержит все файлы, необходимые для модуля, а модули — это библиотеки javascript, которые могут быть включены в проект Node. Пакеты содержат две вещи… файлы package.json + файл js. Для установки этих пакетов вам понадобится хороший установщик, который поможет вам легко загружать и устанавливать пакеты программного обеспечения, не беспокоясь о зависимостях. Здесь NPM (диспетчер пакетов узлов) играет роль и помогает вам устанавливать и отслеживать программное обеспечение javascript. Вы можете использовать NodeJs или Yarn для управления этими программными пакетами. Вы можете установить NPM, установив Node.js. При установке Node.js NPM установится автоматически.

Читайте также:  Как создать свое мобильное приложение

Поэтому, прежде чем переходить на React, вы должны хорошо разбираться в реестре NPM (Node package manager) и в том, как устанавливать пакеты с помощью NPM. Реестр NPM отслеживает отправленный файл. Кто угодно может отправить эти файлы (пакеты или модули). Короче говоря, реестр NPM — это место, куда разработчики могут пойти и получить программное обеспечение для создания программного обеспечения.

Предположим, человек написал какой-то действительно полезный файл javascript. Он / она думает, что другие люди могут его использовать, поэтому он / она помещает его в реестр НПМ. Кто-то другой может получить его из веб-реестра NPM и загрузить для своих целей. Узнайте больше о NPM от GeeksforGeeks.

Git и CLI (интерфейс командной строки)

Git (контроль версий) — ещё один обязательный навык, который разработчик должен иметь для хранения своего проекта на GitHub, Bitbucket и GitLab (платформа для размещения кода). Это помогает разработчикам работать и сотрудничать друг с другом, а также позволяет им отслеживать и размещать различные версии файлов проекта. Вы должны хорошо знать, как работают Git и эти платформы для размещения кода. Разработчики используют команду Git для отслеживания версии ваших файлов, поэтому узнайте, как использовать все команды, такие как push, pull, add, commit и т.д. А также узнайте о слиянии, ветвлении, обработке конфликтов слияния и т.д.

Всё, что вы будете делать в React, вы будете делать с помощью CLI (интерфейса командной строки). Установка пакетов, использование NPM, создание приложения для реагирования, запуск приложения для реагирования и многое другое, поэтому вам действительно нужно выработать привычку использовать CLI. Ниже приведён пример запуска приложения реакции с использованием интерфейса командной строки.

Оцените статью
bestprogrammer.ru
Добавить комментарий