Привет, друзья-разработчики, я работаю с React Native уже несколько месяцев, и я хотел бы поделиться своим опытом о том, как мне удалось начать свое путешествие в React Native. Эта статья НЕ является кратким руководством по настройке среды разработки и началу разработки, а скорее представляет собой исчерпывающее руководство / справочник по шагам, которые необходимо выполнить, чтобы стать разработчиком React Native. Это нацелено на начинающих, поэтому любой, кто хоть немного разбирается хотя бы в одном языке программирования, сможет следовать :)
Я расскажу вам шаг за шагом в упорядоченной манере, как вы можете встать на путь и начать разработку отличных мобильных приложений с помощью React Native.
Шаг 1. Отточите основы
Прежде чем вы начнете разрабатывать какое-либо программное обеспечение с использованием любого языка программирования или фреймворка, вы должны хорошо разбираться в приведенных ниже темах, чтобы сделать вашу базу кода чистой, легко читаемой и оптимизированной по производительности.
- Следующие стандарты кодирования и лучшие практики: https://code.tutsplus.com/tutorials/top-15-best-practices-for-writing-super-readable-code--net-8118
- Алгоритмы и структуры данных: https://www.tutorialspoint.com/data_structures_algorithms/data_structures_basics.htm (Совет: задавайте вопросы из Hackerrank)
- Концепции объектно-ориентированного программирования (ООП): https://dev.to/charanrajgolla/beginners-guide---object-oriated-programming
Шаг 2. Научитесь создавать статические веб-страницы (HTML, CSS)
Если у вас есть опыт веб-разработки, вы можете пропустить этот шаг
Вам может быть интересно прямо сейчас, почему вы должны изучать веб-разработку, чтобы стать мобильным разработчиком. React native не использует HTML или CSS, но он использует что-то очень похожее для создания пользовательских интерфейсов. Если вы знаете, как хорошо использовать HTML и CSS, научиться создавать красивые пользовательские интерфейсы с помощью React Native будет совсем несложно. (Совет: уделите больше внимания свойству CSS flex-box)
Учебный ресурс: https://www.w3schools.com/
Шаг 3. Изучите Javascript (JS) и ES6 / ES7 / ES8
Javascript - это язык программирования, который используется для разработки приложений React Native, поэтому необходимо глубокое понимание концепций Javascript. Кроме того, изучение новых синтаксисов ES6 / 7/8 поможет вам легко выполнять сложные задачи.
Образовательные ресурсы :
- Базовый Javascript: https://www.w3schools.com/js/
- Расширенный Javascript: https://javascript.info/
- Es6: https://www.tutorialspoint.com/es6/
- Es7: https://medium.freecodecamp.org/ecmascript-2016-es7-features-86903c5cab70
Шаг 4. Изучите основы Nodejs и Npm
Когда вы попытаетесь создать приложение «Hello world» с помощью React Native, вы поймете, что установка Node Js на вашем компьютере является обязательным условием. В основном это связано с тем, что React Native использует NodeJs для создания вашего кода JavaScript, а также используется диспетчер пакетов узлов (NPM) для установки сторонних пакетов. Поэтому предварительное представление о NodeJs и NPM обязательно поможет вам.
Образовательные ресурсы :
- Документация по Node Js: https://nodejs.org/en/docs/
- Документация по Npm: https://docs.npmjs.com/
Шаг 5. Изучите основы React Js
Прежде чем погрузиться в React Native, я рекомендую изучить основы React Js. Изучив сначала React Js, вы, несомненно, получите представление о жизненном цикле компонента, которому следуют React Js, который также присутствует в React Native. Вы также узнаете, что такое JSX, и на этом этапе, поскольку вы уже знаете HTML и CSS, вы сможете быстро их догнать. Однако вам не следует тратить слишком много времени на этот шаг, как только вы получите базовое понимание, вы должны перейти к следующему шагу.
Образовательные ресурсы :
- Документация по React Js: https://reactjs.org/docs/getting-started.html
- Ускоренный курс React Js: https://www.youtube.com/watch?v=Ke90Tje7VS0
Шаг 6. Изучите Redux
Изучив React Js, вы будете знать, что такое состояние компонента, и поймете, что им сложно управлять. Redux - это библиотека управления состоянием, используемая с React и другими приложениями javascript для помощи в обработке состояния приложения. Redux используется одинаково как в React Js, так и в React Native, поэтому важно иметь хорошее представление о том, как его использовать.
Образовательные ресурсы :
- Основы Redux: https://redux.js.org/basics
- Использование Redux с React: https://redux.js.org/basics/usagewithreact
Шаг 7. Погрузитесь в React Native
На этом этапе у вас будет прочная основа, и вы готовы начать работу с React Native :)
Лучший способ начать - прочитать официальную документацию и следовать ей. Поскольку вы уже работали с React Js, многие концепции React Native будут вам знакомы, поэтому вы сможете быстро их понять.
(Совет: не забудьте узнать, как на самом деле работает React Native)
Образовательные ресурсы :
- Документация по React Native: https://facebook.github.io/react-native/docs/getting-started
- Ускоренный курс React Native: https://www.youtube.com/watch?v=6ZnfsJ6mM5c
- Рекомендуемый курс Udemy: https://www.udemy.com/the-complete-react-native-and-redux-course/
- Как работает React Native: https://wetalkit.xyz/react-native-what-it-is-and-how-it-works-e2182d008f5e
Для легкой отладки приложения вы можете использовать отладчик React Native: https://github.com/jhen0409/react-native-debugger
Шаг 8. Изучите React Navigation
Навигация - это то, что необходимо в любом мобильном приложении. React Navigation - это библиотека, которая помогает включить эффективную навигацию в приложения React Native. Есть и другие альтернативы этому, но я рекомендую использовать это, так как с ним действительно легко начать работу и есть хорошая документация.
Образовательные ресурсы :
- Документация по React Navigation: https://reactnavigation.org/docs/en/getting-started.html
- Альтернативы: https://reactnavigation.org/docs/en/alternatives.html
- Дополнительная литература: https://www.toptal.com/react#hiring-guide
Отличная работа!
Если вы успешно достигли этой точки, вы сможете разработать базовое приложение React Native. Теперь вам нужно изучить и выйти за рамки основ. Спасибо, что подписались на эту статью, и надеюсь, что она вам хоть немного помогла :)
Если вам нужна помощь, напишите мне: [email protected]