Veikart for å bli en React Native-utvikler i 2018 (for nybegynnere)
Hei, andre utviklere, jeg har jobbet med React Native i noen måneder nå, og jeg ønsker å dele mine erfaringer om hvordan jeg klarte å starte min reise med React Native. Denne artikkelen er IKKE en rask guide til å sette opp utviklingsmiljøet og starte utvikling, snarere er det en omfattende guide/referanse til trinnene man må følge for å bli en React Native-utvikler. Dette er rettet mot komplette nybegynnere, slik at alle som har bare litt forståelse av minst ett programmeringsspråk vil kunne følge den :)
Jeg vil lede deg trinn for trinn på en godt ordnet måte slik at du kan komme på sporet og begynne å utvikle fantastiske mobilapplikasjoner ved hjelp av React Native.
Trinn 1: Skjerp det grunnleggende
Før du begynner å utvikle programvare ved hjelp av programmeringsspråk eller rammeverk, bør du ha en god idé om emnene nedenfor for å gjøre grunnkoden ren, lett lesbar og gi optimal ytelse.
- Følgende kodestandarder og anbefalte fremgangsmåter: https://code.tutsplus.com/tutorials/top-15-best-practices-for-writing-super-readable-code--net-8118
- Algoritmer og datastrukturer: https://www.tutorialspoint.com/data_structures_algorithms/data_structures_basics.htm (Tips: Gå gjennom spørsmål fra Hackerrank)
- Konsepter innen objektorientert programmering (OOP): https://dev.to/charanrajgolla/beginners-guide---object-oriented-programming
Trinn 2: Lær å bygge statiske nettsider (HTML, CSS)
Hvis du har litt erfaring med webutvikling, kan du hoppe over dette trinnet
Du lurer kanskje akkurat nå på hvorfor du bør lære webutvikling for å bli en mobilutvikler? React Native bruker ikke HTML eller CSS, men det bruker noe som ligner veldig for å lage brukergrensesnitt. Hvis du vet hvordan du utnytter HTML og CSS godt, vil det å lage vakre brukergrensesnitt med React Native være lett. (Tips: Fokuser litt mer på CSSflex-boxproperty)
Læringsressurs: https://www.w3schools.com/
Trinn 3: Lær JavaScript (JS) og ES6/ES7/ES8
JavaScript er programmeringsspråket som brukes til å utvikle React Native applikasjoner, derfor er det viktig med en dyp forståelse av JavaScript-konsepter. Videre vil det å lære de nye Es6/7/8-syntaksene hjelpe deg med å utføre komplekse oppgaver uten problemer.
Læringsressurser :
- Grunnleggende JavaScript: https://www.w3schools.com/js/
- Avansert JavaScript: https://javascript.info/
- Es6: https://www.tutorialspoint.com/es6/
- Es7: https://medium.freecodecamp.org/ecmascript-2016-es7-features-86903c5cab70
Trinn 4: Lær grunnleggende Nodejs og NPM
Når du prøver å skape en «Hello World»-applikasjon med React Native, vil du oppdage at å ha Node JS installert på maskinen er en forutsetning. Dette er hovedsakelig fordi React Native bruker NodeJs til å bygge JavaScript-koden din, og også fordi nodepakkestyringen (NPM) brukes til å installere tredjeparts pakker. Derfor vil det å ha grunnleggende kunnskap om NodeJs og NPM på forhånd definitivt hjelpe deg.
Læringsressurser:
- Node JS-dokumentasjon: https://nodejs.org/en/docs/
- Npm documentation: https://docs.npmjs.com/
Trinn 5: Lær grunnleggende React JS
Før du stuper inn i React Native, anbefaler jeg at du lærer det grunnleggende i React JS. Ved å lære React JS først, vil du utvilsomt få en forståelse av komponentlivssyklusen som React JS følger, og som også er til stede i React Native. Du vil også bli kjent med hva JSX er og på dette tidspunktet, siden du allerede kjenner HTML og CSS, vil du være i stand til å ta dette raskt. Men du bør ikke bruke for mye tid på dette trinnet. Når du får en grunnleggende forståelse, bør du hoppe til neste trinn.
Læringsressurser:
- React Js documentation: https://reactjs.org/docs/getting-started.html
- React JS hurtigkurs: https://www.youtube.com/watch?v=Ke90Tje7VS0
Trinn 6: Lær Redux
Så snart du har lært React JS, vet du hva en komponenttilstand er og vil innse at den er vanskelig å styre. Redux er et tilstandsstyringsbibliotek som brukes med React og andre javascript-programmer for å håndtere tilstanden til et program. Redux brukes på samme måte både i React JS og React Native, så det er viktig å ha et godt begrep om hvordan du bruker det.
Læringsressurser:
- Grunnleggende om Redux: https://redux.js.org/basics
- Redux brukt med React: https://redux.js.org/basics/usagewithreact
Trinn 7: Dykk ned i React Native
På dette punktet har du et solid grunnlag, og du er klar til å komme i gang med React Native :)
Den beste måten å komme i gang på er å lese og følge den offisielle dokumentasjonen. Siden du allerede har brukt React JS, vil mange av konseptene i React Native være kjent for deg, slik at du kan forstå det raskt.
(Tips: Ikke glem å lære hvordan React Native faktisk fungerer)
Læringsressurser:
- React Native-dokumentasjon: https://facebook.github.io/react-native/docs/getting-started
- React Native hurtigkurs: https://www.youtube.com/watch?v=6ZnfsJ6mM5c
- Anbefalt Udemy-kurs: https://www.udemy.com/the-complete-react-native-and-redux-course/
- Hvordan React Native fungerer: https://wetalkit.xyz/react-native-what-it-is-and-how-it-works-e2182d008f5e
Hvis du vil feilsøke programmet enkelt, kan du bruke React Natives debugger: https://github.com/jhen0409/react-native-debugger
Trinn 8: Lær React Navigation
Navigasjon er noe som er nødvendig i enhver mobilapplikasjon. React Navigation er et bibliotek som bidrar til effektiv navigering i React Native-apper. Det er andre alternativer til dette, men jeg anbefaler å bruke dette ettersom det er veldig lett å komme i gang med og har en god dokumentasjon.
Læringsressurser:
- React Navigation-dokumentasjon: https://reactnavigation.org/docs/en/getting-started.html
- Alternativer: https://reactnavigation.org/docs/en/alternatives.html
Godt gjort!
Hvis du har nådd dette punktet, kan du utvikle en grunnleggende React Native-applikasjon. Nå er det opp til deg å utforske og gå utover det grunnleggende. Takk for at du fulgte denne artikkelen og håper det hjalp deg, i alle fall litt :)
For mer teknisk opplæring fra Devon, sjekk ut bloggen hans på Medium
