React.js или просто React е популярна JavaScript библиотека за създаване на front-end или графичен потребителски интерфейс за онлайн приложения. За Java инженерите с full-stack това е и една от най-важните способности. React JS, понякога известен като просто React, се е развил със скокове и граници през последните години, превръщайки се в де-факто инструментариума за разработване на GUI, базирано на компоненти. Той е подкрепен от Facebook. Въпреки че има алтернативни предни рамки като Angular и Vue.js, React се откроява, тъй като се концентрира само върху базирана на компоненти разработка на GUI и не се отклонява в други области.
Например, Angular е пълна рамка, която включва система за инжектиране на зависимост, система за маршрутизиране, обработка на формуляри, HTTP заявки, анимации, поддръжка на i18n и мощна модулна структура с просто мързеливо зареждане.
React е чудесна опция, ако вече имате библиотеки за изпълнение на тези неща или ако не се нуждаете от всички наведнъж. Разбирането на React обаче не е лесно, особено ако сте нов в уеб разработката.
Нека разгледаме пътоводната карта стъпка по стъпка, за да видим как можете да придобиете способностите, които ще ви трябват, за да станете React Developer през 2022 г.:
1. Основите
Трябва да знаете основите, независимо от каквато и да е рамка или библиотека, която изучавате за уеб програмиране, и под основи имам предвид HTML, CSS и JavaScript, които са трите основи на уеб разработката.
HTML
Тъй като осигурява рамката за уеб страница, тя е един от основните стълбове и най-важният талант за уеб разработчиците. Ако се интересувате от изучаване на HTML, разгледайте нашата колекция от безплатни HTML уроци.
CSS
Това е вторият стълб на уеб разработката и се използва, за да изглежда онлайн страниците хубави. Ако искате да изучавате CSS, нашият списък с безплатни курсове за уеб разработка включва шепа безплатни CSS уроци.
JavaScript
Това е третият стълб на уеб разработката и това ви позволява да направите сайтовете си интерактивни. Това е и причината да съществува рамката React; в резултат на това трябва да сте запознати с JavaScript и да го разбирате добре, преди да се опитате да овладеете React JS. Погледнете моя избор от безплатни курсове по JavaScript, за да започнете.
2. Умения за развитие като цяло
Независимо дали сте frontend разработчик, backend разработчик или софтуерен инженер с full-stack, няма значение. За да го направите в програмната индустрия, ще трябва да развиете няколко основни таланта за развитие и ето списък с някои от тях.
Запознайте се с GIT
През 2022 г. трябва да имате задълбочено разбиране на Git. Създайте няколко хранилища в GitHub, споделете кода си с други и открийте как да получите код на Github в избраната от вас IDE. Git Complete: Пълното ръководство стъпка по стъпка за Git е прекрасен курс, ако искате да научите.
Разберете протокола HTTP(S).
Ако искате да работите като уеб разработчик, трябва да имате задълбочено разбиране на HTTP. Не очакваме да изучавате спецификацията, но трябва да знаете как да използвате типични методи за HTTP заявка като GET, POST, PUT, PATCH, DELETE и OPTIONS, както и как работи HTTP/HTTPS като цяло.
Запознайте се с терминала
Въпреки че не се изисква frontend разработчик да познава Linux или терминала, силно ви съветвам да се запознаете с терминала и да настроите своята обвивка (bash, zsh, csh), наред с други неща. Ако искате да научите как да използвате терминала и bash, препоръчвам да вземете този курс по Udemy Shell Scripting.
Структури и алгоритми от данни
Това е още една от общите способности за програмиране, която не е необходима, за да станете разработчик на React, но е от съществено значение, за да станете програмист като цяло.
Запознайте се с моделите на дизайн и архитектурата на софтуера.
Разбирането на модели на проектиране, като алгоритми за изучаване и структури от данни, не е необходимо, за да станете React Developer, но ще ви е от голяма полза. Дизайнерските модели са изпитани решения на проблеми, които възникват при разработването на софтуер редовно.
3. Запознайте се с React.js
Това е същественият момент. За да станете разработчик на React, първо трябва да изучите React и да го овладеете. Официалният уебсайт е най-доброто място за изучаване на React, но като начинаещ може да е малко плашещо.
4. Разберете как да използвате структурните инструменти
Ако искате да работите като професионален разработчик на React, трябва да се запознаете с инструментите, които ще използвате като уеб разработчик, като инструменти за изграждане, инструменти за тестване на модули и инструменти за отстраняване на грешки.
За да започнете, ето няколко от инструментите за разработка, посочени в тази пътна карта:
Мениджъри на пакети
- npm
- yarn
- npm
Runners of Tasks
- програми, написани с помощта на npm
- gulp
- Webpack
- Rollup
- Parcel
Освен това разбирането на всички тези технологии не е необходимо; за начинаещи просто изучаването на npm и webpack трябва да е достатъчно. Можете да преминете към допълнителни технологии, след като сте придобили по-добро разбиране за уеб разработката и екосистемата React.
5. Дизайн
Познаването на малко стил няма да навреди, ако искате да бъдете front end разработчик като разработчик на React. Въпреки факта, че пътната карта определя CSS препроцесори, CSS Frameworks, CSS архитектура и CSS в JS,
Препоръчвам ви поне да разберете Bootstrap, най-важната CSS рамка, която може да срещнете от време на време.
Можете също да изучавате Materialize или Material UI, ако искате да направите крачка по-далеч и да разберете bootstrap.
6. Държавна администрация
Друга важна тема, върху която разработчикът на React да се съсредоточи, е това. Следват идеите и рамките, които трябва да се схванете, според пътната карта:
- API за състояние и контекст на компонента
- Redux
- Действия, които са асинхронни (странични ефекти)
- Помислете за Redux
- По-добър Promise Redux
- Сага за Redux
- Наблюдаем редукс
- Помощници
- Реванш
- Изберете отново
- Постоянство на данните
- Постоянство в редукс
- Феникс възкръсна
- Формуляр Redux
- MobX
- Куки в React
Ако всичко това е твърде много за вас, препоръчвам да се съсредоточите върху Redux.
7. Тип пулове
Тъй като JavaScript не е силно интегриран език, няма да можете да използвате компилатор за откриване на проблеми, свързани с типа.
Проверката на типа може да ви помогне да откриете много грешки, докато приложението ви се разширява, особено ако използвате разширения на JavaScript като Flow или TypeScript, за да проверите типа на целия си проект.
Дори и да не ги използвате, React има вградени възможности за проверка на типа и знанието как да ги използвате може да ви помогне да откриете грешки рано.
Тъй като Angular също използва TypeScript, смятам, че си струва да изучавате TypeScript в допълнение към JavaScript и ако сте съгласни, можете да се запишете в курса Ultimate TypeScript на Udemy.
8. Помощници на формуляра
Освен средствата за проверка на типа, полезни са и помощите за формуляри като Redux Form, които предлагат най-добрия подход за управление на състоянието на формуляра в Redux. Можете също да разгледате Formik, Formsy и Final Form в допълнение към Redux Form.
9. Планиране
Компонентите за начертаване на план са важна характеристика на всяко приложение, тъй като те са в основата на силния подход на декларативно програмиране на React.
React Router е набор от навигационни компоненти, които можете да използвате, за да изградите приложението си декларативно.
React Router работи навсякъде, където React изобразява, независимо дали искате URL адреси с възможност за отметка за вашето уеб приложение или композируем метод за сърфиране в React Native.
Можете също да разгледате Router 5, Redux-First Router и React Router в допълнение към React-Router.
10. API клиенти
Рядко ще намерите изолиран GUI в днешния свят. Вместо това е по-вероятно да проектирате нещо, което използва API като REST и GraphQL за свързване с други приложения. За щастие, разработчиците на React имат достъп до различни API клиенти; ето списък на някои от тях:
- REST
- Fetch
- SuperAgent
- Axios
- GraphQL
- Apollo
- Relay
- urql
Apollo Client е любимят ни, тъй като улеснява разработването на клиентски приложения с помощта на GraphQL. Клиентът има за цел да ви помогне в бързото създаване на GraphQL-базиран потребителски интерфейс, който може да се използва с всеки интерфейс на JavaScript.
11. Помощни библиотеки
Това са библиотеките, които ви улесняват да вършите работата си. Има множество полезни библиотеки за разработчиците на React, както е илюстрирано по-долу:
Lodash
Moment
classnames
Numeral
RxJS
Ramda
Не препоръчваме да изучавате всички тях, нито RoadMap. Могат да се научат само на Lodash, Moment и Classname.
12. Проверка
Сега, това е едно от най-важните умения за React Developers, което понякога се пренебрегва, но ако искате да останете пред пакета, трябва да се концентрирате върху изучаването на библиотеки, които ще ви помогнат при тестването. Тук също ще намерите библиотеки за модулно тестване, интеграционно тестване и тестване от край до край.
Списък с библиотеки, изброени в пътната карта, можете да намерите тук:
Тестване на ниво единица
- Jest
- Enzyme
- Sinon
- Mocha
- Chai
- AVA
- Tape
Тестване от началото до края
- Webdriver, Selenium
- Cypress
- Puppeteer
- Cucumber.js
- Nightwatch.js
- Integrity Checking
- Karma
Можете да научите всяка библиотека, която желаете, но Jest и Enzyme са две, които се препоръчват силно.
13. Интернационализация
Друг важен проблем за проектиране на front end, който се използва по целия свят, е това. За Япония, Китай, Испания и други европейски държави може да се наложи да поддържате локалната версия на GUI.
Следните технологии се препоръчват от RoadMap, въпреки че всички те е полезно да знаете:
- Intl. React
- i18Next React
И двете библиотеки включват компоненти на React и API за форматиране на дати, цели числа и низове, както и поддръжка за множествено число и превод.
14. Рендериране на сървъра
Може би се чудите каква е разликата между изобразяването от страна на сървъра и изобразяването от страна на клиента, така че нека да премахнем това, преди да обсъдим библиотеката, която позволява изобразяването от страна на сървъра с React.
Вашият браузър изтегля основна HTML страница при изобразяване от страна на клиента. След това JavaScript се изобразява и съдържанието се добавя към него.
Компонентите на React се изобразяват на сървъра и полученото HTML съдържание се предоставя на клиента или браузъра в случай на изобразяване от страна на сървъра.
Следното изобразяване от страна на сървъра се препоръчва от пътната карта:
- Next.js
- After.js
- Rogue
Въпреки това препоръчвам да научите само Next.
15. Генератор на сайтове (статичен)
Генераторът на статичен сайт Gatsby.js е съвременен генератор на статичен сайт. Gatsby може да се използва за разработване на уебсайт с персонализирани изживявания, влезли в системата. Те използват JavaScript, за да интегрират вашия вход и да генерират добре оформен HTML изход.
16. Интегриране на Backend Framework
React on Rails съчетава Rails с Front-end рамката React на Facebook (сървърно изобразяване). Той предлага сървърно изобразяване, което е полезно за обхождане на SEO обхождане и скорост на UX и не е налично в rails/webpacker.
17. Мобилно приложение
React Native бързо се превръща в предпочитания подход за изграждане на мобилно приложение в JavaScript с естествен външен вид и усещане, което е друга област, в която овладяването на React може да бъде наистина изгодно.
Препоръчват се следните библиотеки:
- Native React
- Cordova/PhoneGap
Въпреки това вярваме, че само изучаването на React Native е достатъчно.
18. Работна станция
Има и други базирани на React рамки за разработване на графични интерфейси на работния плот, като React Native Windows, който ви позволява да създавате собствени UWP и WPF програми с помощта на React.
Препоръчват се следните библиотеки:
- Native to Proton
- Electron
- Windows using React Native
Всички те обаче са за напреднали изследвания. Можете да ги разгледате, ако вече сте усвоили React. Ако търсите някои класове, съставихме списък с 10 безплатни React курса, които ще ви научат на всичко, което трябва да знаете за React, включително куките.
19. Виртуална реалност
Ако искате да създавате приложения за виртуална реалност, можете да използвате рамки като React 360, което ви позволява да създавате интересни 360 и VR изживявания с React. Можете да научите повече за React 360, ако се интересувате от тази област.
Въпреки че е много обширен, има значителна вероятност вече да знаете голяма част от информацията. Няма нужда да се плашите или претоварвате от тази пътна карта, ако не знаете какво правите; можете да започнете с малко и да продължите напред.
За да станете React Developer, можете да поемете по различни маршрути. И ако вече познавате React, почти сигурно ще можете да откриете някои нови инструменти и технологии, които да добавите към вашия инструментариум през 2022 г., което ще ви позволи да станете още по-добър разработчик на React.
