Kickstarta din Front-end med React - Del 1: Förberedelser

React

Hej, välkommen till min bloggserie. Denna serie kommer vara en introduktion till React och dessa ekosystem för att bygga webapplikationer. Tanken är att en person utan några som helst kunskaper i React ska klara av att bygga sin alldeles egna webapplikation. 

React är ett JavaScript-bibliotek för att bygga användargränssnitt skapat av Facebook. React marknadsförs som komponentbaserat, deklarativt och "lär dig en gång, använd överallt".

Varför?

Med komponentbaserat menas att hela vår applikation byggs upp av flertal mindre komponenter. Att bygga komponentbaserat har många fördelar: det tillåter oss pussla ihop flera mindre komponenter för att skapa en ny komponent. Ett exempel kan vara en Lista. I sin tur kan listan vara uppbyggd av flera List-element. Ett List-element kan vara uppbyggt av en Thumbnail-komponent och en Text-komponent, osv. Att strukturera applikationen på detta sätt tillåter oss att återanvända stora delar av vår kod. Thumbnail-komponenten jag nämnde tidigare kan t.ex. även användas till vår Användarprofil-komponent eller dylikt. 

Dessa komponenter implementeras på ett deklarativt sätt: vi minimerar sidoeffekter och låter vår komponent vara en återspegling av vår data. Om vår data ändras så återspeglas detta i vår komponent. React ansvarar också för att se till att våra ändringar av data endast uppdaterar de komponenter som behövs, på så sätt får applikationen också bättre prestanda. 

React är alltså det bibliotek som tillåter oss att skapa dessa komponenter på ett smidigt sätt och React ser till att våra komponenter har bra prestanda.

Idag finns även möjligheten att använda React på flera andra ställen som t.ex. server, mobilapplikationer och tv.

Allt detta gör React till mitt föredragna sätt att skriva komplexa webapplikationer.

Varför inte?

Moderna projekt baserade på React använder sig oftast av många andra redskap. Det slängs runt ord som ES6, Webpack, Babel, ESLint och Redux. För en person som bara vill komma igång med React kan detta vara överväldigande. Det är många olika delar att sätta sig in i för att bara komma igång.

Ovanför nämner jag ord som sidoeffekter och deklarativt. Om man kommer från en mer objektorienterad bakgrund och aldrig ens rört ett funktionellt språk kan detta kännas lite konstigt. Vi kommer gå in mer på detta när vi börjar skriva våra egna första komponenter.

Trots detta så har Reacts popularitet växt, och i och med detta har också tillgängligheten växt. Jag kommer idag visa ett redskap som gör det mycket enklare och snabbare att komma igång med din React-utveckling, idag!

Förberedelser, installation av moduler

Om du känner dig bekväm med Node.js och npm så kan du skippa all text nedanför och installera följande:

node@6.11.0
npm@3.10.10
yarn@0.24.6
create-react-app@1.3.1

Om inte så kommer en genomgående guide för installatione av allt vi behöver här:

Node.js

Det första vi kommer behöva är Node.js^[1]. Node.js är en JavaScript runtime byggd på Google Chromes JavaScript-motor V8^[2]. I vårt fall användes Node.js för byggsystem, transpilering, enhetstester och dylikt. Vi kommer gå in mer på detta senare.

Följ instruktionerna på https://nodejs.org/en/download/ för installation till ditt operativsystem.

I denna tutorial kommer jag använda mig av version 6.11.0, som idag 2017-06-20 

är versionen med Long Term Support (LTS). Det är inte növändigt att du har exakt samma version som mig, men ett av verktygen som vi kommer använda oss av kräver en version högre än 6.0.

macOS/Linux-tips: installera Node.js med Node Version Manager. Detta ger dig möjligheten att enkelt kunna byta mellan flera Node.js-versioner. Instruktioner för installation finns på https://github.com/creationix/nvm. Liknande program finns för Windows, men det är inget jag själv använt.

Vi kommer behöva ett Command Line Interface (hädanefter angivet som "terminalen"). För att verifiera om Node.js har installerats korrekt skriver vi följande i terminalen:

node --version
> 6.11.0 

npm

Node.js installeras med dess egna pakethanterare npm^[3]. Versionen av npm som jag använder mig av under denna tutorial är 3.10.10:

npm --version
> 3.10.10

Create React App

Med hjälp av npm ska vi nu installera Create React App^[4]. Create React App är ett program som hjälper oss att enkelt och snabbt komma igång med en modern utvecklingsmiljö till React.

Installera create-react-app och verifiera installationen:

npm install --global create-react-app

create-react-app --version
> 1.3.1

Yarn

För att installera Yarn, följ instruktionerna på https://yarnpkg.com/en/docs/install.

npm släppte nyligen version 5.0 av npm som är snabbare än tidigare versioner. Create React App rekommenderar fortfarande Yarn, så vi kommer fortsätta använda det.

Skapa din första React app med Create React App

Nu bör vi installerat följande moduler med följande versioner:

node@6.11.0
npm@3.10.10
yarn@0.24.6
create-react-app@1.3.1

Vi kommer nu använda Create React App för att skapa vår React-applikation. Navigera dig till den plats i terminalen där du vill skapa ditt projekt och skriv följande:

create-react-app kickstart-react

I detta fall döpte jag projektet till kickstart-react. Du kan döpa det till vad du vill, men jag kommer referera till projektet som kickstart-react.

Om allt gått det ska bör du se något om liknar följande:

✨ Done in 20.40s.

Success! Created kickstart-react at /Users/pontusnagy/Dev/Repo/Agero/kickstart-react
Inside that directory, you can run several commands:

 yarn start
 Starts the development server.

 yarn build
 Bundles the app into static files for production.

 yarn test
 Starts the test runner.

 yarn eject
 Removes this tool and copies build dependencies, configuration files
 and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

 cd kickstart-react
 yarn start

Happy hacking!

Precis som det står ovan så navigerar vi oss in i projektet som Create React App skapat och startar det:

cd kickstart-react
yarn start

När startkommandet körts bör du se följande:

Compiled successfully!

You can now view kickstart-react in the browser.

 Local: http://localhost:3000/
 On Your Network: http://10.1.1.68:3000/

Note that the development build is not optimized.
To create a production build, use yarn run build

Öppna din webläsare och navigera dig till http://localhost:3000/, där bör du se en hemsida likt denna: 

Grattis, du har nu skapat du första websida i React!

Nästa vecka publiceras del två i bloggserien

Fotnoter:

1. https://nodejs.org/en/
2. https://developers.google.com/v8/
3. https://www.npmjs.com/
4. https://github.com/facebookincubator/create-react-app
5. https://yarnpkg.com/

Är du sugen på att bli en av oss? Läs om vår företagskultur eller lämna in en spontanansökan.