Как я изучил React | Кодементор

Обо мне

Я Frontend-разработчик, в настоящее время работаю в стартапе Fiskkit, основанном на научной фантастике. Мы упрощаем оценивание и контроль заданий для учителей.

Почему я хотел изучить React

Потому что в настоящее время мы переводим наш сайт с AngularJS на ReactJS.

Как я подошел к изучению React

Привет народ! Я разработчик Angular с более чем 2-летним опытом работы с миром ReactJS. Думал о документировании моего путешествия, пока я гребу.

Прежде всего, познакомьтесь с функциями JavaScript следующего поколения. Эти знания сделают вашу жизнь более гладкой, когда вы начнете создавать новое приложение в React (или, что важно, в любой среде на основе JS).

Проблемы, с которыми я столкнулся

Как мне начать?

Основные функции, необходимые для начала создания приложения React:

Инструмент управления зависимостями (npm/yarn) — для управления зависимостями и пакетами, такими как React и ReactDOM.
Bundler (Webpack) — для связывания различных компонентов React в компактную файловую структуру. Это уменьшает количество запросов к серверу для различных компонентов, которые мы создаем в React. Webpack также помогает подключить Babel и пресеты, чтобы он мог быть частью процесса объединения и оптимизации.
Компилятор (Babel + Presets) — для компиляции JS Next-gen и обеспечения его доступности во всех браузерах. По сути, он преобразует функции JS следующего поколения в обходные пути для старых браузеров, которые до сих пор не принимают новейшие функции JS. Теперь код принят и отображается для лучшего взаимодействия с пользовательским интерфейсом, а на экране светит солнце для всех и каждого!
Сервер разработки — для запуска приложения React на нашем локальном компьютере.

Звучит сложно? Не беспокойтесь, создайте-реагируйте-приложение, чтобы спасти! Это репозиторий Github, разработанный и поддерживаемый Facebook.

Основные выводы

Это помогает установить все элементы, необходимые для настройки приложения React на вашем компьютере, с помощью одной единственной команды — npm install create-react-app my-app.

Проверьте ссылку на репозиторий Github здесь:

Просто перейдите в папку с моим приложением, опубликуйте это и введите — npm start и вуаля! Ваше первое приложение React развернуто и готово к разработке.

Советы и советы

Пришло время изучить различные файлы, созданные приложением. Внесите изменения в JSX app.js, чтобы увидеть изменение содержимого в локальном браузере. Преимущество приложения в том, что оно автоматически принимает изменения и отображает вывод в браузере. Больше, чтобы следовать в моем следующем блоге этого путешествия. Тудлс!

Заключительные мысли и следующие шаги

PS Ресурс, которым я следую, чтобы изучить ReactJS, — это отличный курс Максимилиана Шварцмюллера по Udemy под названием React 16.6 — Полное руководство.