Create React App
Detta är del 2 i bloggen Kickstarta din Front-end med React. I del 1 går vi igenom installation av Node.js, Create React App och Yarn. Om du inte känner dig bekväm med att intallera detta själv så kan du läsa del 1 här: Kickstarta din Front-end med React - Del 1: Förberedelser
Vi har precis installerat följande:
node@6.11.0npm@3.10.10yarn@0.24.6create-react-app@1.3.1
och startat vår app med följande kommando:
cd kickstart-react
yarn start
Öppnat webläsaren och navigerat till http://localhost:3000/, där bör du se en hemsida likt denna:
Öppna projektet vi skapade med Create React App i del 1 i din favorit text editor. Om du inte har en text editor, eller letar efter en ny till webutveckling kan jag tipsa om Visual Studio Code av Microsoft. Den är konfigurerad vettigt direkt vid installation och bör fungera för alla JavaScript-projekt.
Visual Studio Code installation: https://code.visualstudio.com/
När du öppnat projektet bör du hitta följande struktur:
kickstart-react
├── .git
├── README.md
├── node_modules
├── package.json
├── yarn.lock
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
└── App.css
└── App.js
└── App.test.js
└── index.css
└── index.js
└── logo.svg
└── registerServiceWorker.js I början kommer vi att fokusera på src/App.js och package.json.
src/App.js
Detta är filen som beskriver innehållet på vår websida. Öppna den och du bör finna detta:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Om vi läser detta uppifrån och ned så möts vi av vanlig ES6-kod. Vi har en klass med en funktion vid namn render. Vi kommer gå in på detta senare, men just nu utgår vi ifrån att det värde som render returnerar blir vår websida. Men här ser vi att värdet som render returnerar inte är JavaScript, utan något som liknar HTML. Välkommen till JSX.
JSX
JSX är en preprocessor till JavaScript som tillåter oss att använda XML-syntax inuti JavaScript.
Om vi kollar på koden ovanför och bara för skojs skull, antar att det magiskt går att blanda JavaScript och HTML så är det precis detta JSX möjliggör. Men det finns några saker att tänka på, vad är det som egentligen händer?
Med preprocessor så menas att koden vi skriver kommer att omvandlas till annan kod innan webläsaren kör den. I vårt fall är det JSX som omvandlas till JavaScript. Create React App gör detta åt oss, med ett program som heter Babel. Babel kommer i vårt fall omvandla alla XML-taggar till ett funktionsanrop.
React.createElement(component, props, ...children)
React.createElement är den funktion som översätts ifrån XML-elementen för att skapa HTML-element på vår websida. All XML vi skriver med JSX översätts till denna funktion. Ta följande exempel och tänk på funktionssignaturen ovan: component, props, ...children
component
<h2>Welcome to React</h2>
Blir följande:
React.createElement(
'h2',
null,
'Welcome to React'
);
Om vi läser signaturen så ser vi att första parametern är en komponent, component. I detta fall är vår komponent h2, alltså HTML-elementet. props är fortfarande null och ...children är innehållet i elementet.
props
Andra argumentet i funktionen heter props. props är något vi kommer använda oss av hela tiden när vi skriver websidor med React. I HTML-världen är det känt som attribut, ett exempel på detta kan vara en CSS-klass, ta följande exempel:
Lägger vi till ett, eller flera, attribut (props i React-världen) ersätter vi null med ett objekt:
<h2 class="test">Welcome to React</h2>
Blir följande:
React.createElement(
'h2',
{ 'class': 'test' },
'Welcome to React'
);
{ 'class': 'test' } är våra props i detta fall. Nyckeln är namn och värdet är värdet. props är det som möjliggör oss att skicka ned data till vårt element. Om vi vill lägga till flera props gör vi följande:
React.createElement(
'h2',
{
'class': 'test'
'style': 'color: blue'
},
'Welcome to React'
);
Objektet fylls alltså på med flera nycklar och värden. Detta innebär också att namnen på alla props måste vara unika.
...children
Sist men inte minst kommer ...children. Detta är precis som det låter, barn. Ett exempel kan vara när du har ett HTML-element inuti ett annat HTML-element. Ett exempel kan vara följande:
<h2 class="test">
Welcome to React
<b> we hope you enjoy your stay!</b>
</h2>
Vårt h2-element har nu två barn: 'Welcome to React' och <b> we hope you enjoy your stay!<b>.
Detta blir följande:
React.createElement(
"h2",
{ "class": "test" },
"Welcome to React",
React.createElement(
"b",
null,
" we hope you enjoy your stay!"
)
);
Om du undrar vad de tre punkterna i ...children betyder så innebär detta att funktionen tar emot godtyckligt många children när den anropas. Signaturen för funktionen ser ut att endast ta 3 parametrar:
1: component
2: props
3: ...children
Det som händer när vi lägger till de tre punkterna är att funktionen tar emot 1 eller flera children:
1: component
2: props
3: child
4: child
5: child
...
X: child
Detta ett måste eftersom ett HTML-element kan ha mer än ett barn. Alla argument i funktionen efter det andra tolkas alltså som children. Detta (...) kallas Rest parameters och som ordet "rest" syftar på så så motsvarar det resten av parametrarna. Om du vill läsa mer om detta finns det här:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/rest_parameters
React.createElement är alltså funktionen i React som ansvarar för att skapa alla HTML-element på vår websida. JSX är endast syntaktiskt socker för att anropa denna funktion. Det blir lättare för oss som utvecklare att förstå HTMLen vi skriver.
Här är ett exempel av vårt div-element websida ovan skrivet med React.createElement:
React.createElement(
'div',
{ className: 'App' },
React.createElement(
'div',
{ className: 'App-header' },
React.createElement(
'img',
{ src: logo, className: 'App-logo', alt: 'logo' }
),
React.createElement(
'h2',
null,
'Welcome to React'
)
),
React.createElement(
'p',
{ className: 'App-intro' },
'To get started, edit ',
React.createElement(
'code',
null,
'src/App.js'
),
' and save to reload.'
)
);
Här är samma div-element skrivet med JSX:
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
component, props, ...children
Dessa tre parametrar är grundpelarna i React. Vi kommer att använda dom hela tiden och det är viktigt att förstå vad de tre innebär och hur man kan använda dom tillsammans. Det är också detta vi kommer att titta närmare på i nästa del av Bloggserien. Hittills har vi endast skapat simpla h2-element som component, skickat ned CSS-klasser som props och andra simpla element som children. Vi kommer börja titta på hur vi kan skapa våra egna komponenter, skicka ned komplexa objekt som props och använda oss av funktionella hjälpfunktioner så som map, filter och reduce för att skapa children.
Babel REPL
Om du vill dyka in lite djupare i detta så är Babels REPL riktigt rolig att använda, där kan du mata in din egna JSX och se hur den transformeras till React.createElement, i realtid, precis som Create React App gör bakom kulisserna.
Babels REPL finner du här: https://babeljs.io/repl
Är du sugen på att bli en av oss? Läs om vår företagskultur eller lämna in en spontanansökan.
