{"id":344,"date":"2017-08-30T15:40:13","date_gmt":"2017-08-30T13:40:13","guid":{"rendered":"http:\/\/localhost:8888\/wordpress\/?p=344"},"modified":"2017-08-30T17:47:59","modified_gmt":"2017-08-30T15:47:59","slug":"react-projektin-perustaminen","status":"publish","type":"post","link":"https:\/\/www.pilvikoodari.net\/?p=344","title":{"rendered":"React -projektin perustaminen"},"content":{"rendered":"

React esittely<\/a> -blogikirjoituksessa esiteltiin Reactin perusteita yksinkertaisella toteutuksella, jossa React ladattiin k\u00e4ytt\u00f6\u00f6n ns. CDN<\/a> -latauksella. HTML-sivun l\u00e4hdekoodiin koodattiin suoraan Javascripti\u00e4 joka k\u00e4ytti React -kirjastoa. T\u00e4m\u00e4 tapa sopii keve\u00e4\u00e4n Reactin esittelyyn, mutta v\u00e4h\u00e4nk\u00e4\u00e4n vakavammassa projektissa t\u00e4m\u00e4 ei ole ollenkaan riitt\u00e4v\u00e4 tapa\u00a0k\u00e4ytt\u00e4\u00e4 Reactia.<\/p>\n

T\u00e4ss\u00e4 blogikirjoituksessa perustamme oikean React -kehitysymp\u00e4rist\u00f6n, jossa kehitysty\u00f6 onnistuu helposti ja tehokkaasti.\u00a0Koodausty\u00f6 tapahtuu JavaScript -tiedostojen kautta ja kehitt\u00e4j\u00e4 saa k\u00e4ytt\u00f6\u00f6ns\u00e4 ty\u00f6kaluja jotka helpottavat kehitysty\u00f6t\u00e4.<\/p>\n

create-react-app – n\u00e4pp\u00e4r\u00e4 ty\u00f6kalu projektin perustamiseen<\/strong><\/p>\n

T\u00e4ysiverinen React -kehitysymp\u00e4rist\u00f6 k\u00e4ytt\u00e4\u00e4 useita erilaisia\u00a0ohjelmia, jotka yhdess\u00e4 muodostavat nykyaikaisen kehitysymp\u00e4rist\u00f6n. Kehityksess\u00e4 tarvitaan mm. HTTP-palvelinta jolla kehitysversio py\u00f6rii paikallisesti sek\u00e4 k\u00e4\u00e4nt\u00e4j\u00e4\u00e4 joka k\u00e4\u00e4nt\u00e4\u00e4 uusimmilla JavaScriptin versioilla koodattua JavaScript -koodia webbiselaimien ymm\u00e4rt\u00e4m\u00e4\u00e4n, riitt\u00e4v\u00e4n yhteensopivaan (=”riitt\u00e4v\u00e4n vanhaan”)\u00a0JavaScriptin muotoon.<\/p>\n

Jotta projektin perustaminen helpottuisi, k\u00e4yt\u00e4mme projektin perustamiseen n\u00e4pp\u00e4r\u00e4\u00e4 apuohjelmaa nimelt\u00e4\u00a0create-react-app<\/a>. Itse asiassa create-react-app on npm -kirjasto, joka asennetaan omalle koneelle globaalisti ajettavaksi ohjelmaksi. Asentaminen tapahtuu npm:ll\u00e4 seuraavasti:<\/p>\n

npm install -g create-react-app<\/pre>\n
Yll\u00e4 oleva komento asentaa create-react-app:n siten ett\u00e4 se voidaan ajaa mist\u00e4 tahansa hakemistosta k\u00e4sin.<\/p>\n
Siirryt\u00e4\u00e4n seuraavaksi sopivaan hakemistoon, jonne haluamme projektihakemiston perustettavan ja suoritetaan create-react-app.<\/p>\n
$ cd projektit\r\n\r\n$ create-react-app react-demoilua<\/pre>\n
Projekti perustetaan ja npm:n kautta haetaan projektissa tarvittavat kirjastot. Lopulta projekti on valmis k\u00e4ytt\u00f6\u00f6n:<\/p>\n
\"\"<\/a><\/p>\n
Kuten viimeisest\u00e4 ohjeesta n\u00e4kyy, React -ohjelma on valmis k\u00e4ynnistett\u00e4v\u00e4ksi. Suoritetaan siis komennot:<\/p>\n
cd react-demoilua\r\n\r\nnpm start<\/pre>\n
Ohjelma k\u00e4ynnistyy ja selaimeen aukeaa osoite http:\/\/localhost:3000:<\/p>\n
\"\"<\/a><\/p>\n
Konsolissa n\u00e4kyy seuraava teksti:<\/p>\n
\"\"<\/a><\/p>\n
Mit\u00e4 kaikkea edell\u00e4 tapahtui? Tutkitaan ensin projektihakemiston sis\u00e4lt\u00f6\u00e4:<\/p>\n
\"\"<\/a><\/p>\n
N\u00e4emme, ett\u00e4 hakemiston\u00a0rakenne ja sis\u00e4lt\u00f6 on itse asiassa varsin yksinkertainen:<\/p>\n
.gitignore<\/em><\/strong> on Git-versionhallintaa varten perustettu ns. ignore<\/em> tiedosto, jossa m\u00e4\u00e4ritell\u00e4\u00e4n mit\u00e4\u00a0tiedostoja hakemiston alla ei\u00a0ole tarpeen laittaa versionhallintaan.<\/p>\n
package.json<\/em><\/strong> -tiedosto on React -ohjelman syd\u00e4n. Siell\u00e4 on m\u00e4\u00e4ritetty npm -ohjelman avulla ajettavat skriptit sek\u00e4 ohjelman riippuvuudet ja muut m\u00e4\u00e4ritykset. Tutustutaan tiedostoon my\u00f6hemmin tarkemmin.<\/p>\n
node_modules<\/strong> –<\/em>hakemistoon\u00a0ladataan ohjelman k\u00e4ytt\u00e4m\u00e4t npm -paketit eli ohjelman k\u00e4ytt\u00e4m\u00e4t riippuvuudet.<\/p>\n
public<\/strong> -hakemistossa on index.html<\/em> tiedosto, josta ohjelman suoritus k\u00e4ynnistyy.<\/p>\n
README.md<\/strong> –<\/em>tiedostoon voidaan dokumentoida projektiin liittyv\u00e4\u00e4 ohjeistusta, joka n\u00e4kyy automaattisesti kun projektia katselee esim.\u00a0GitHub-palvelussa.<\/p>\n
Mielenkiintoisin osa sijaitsee src<\/em><\/strong> -hakemistossa. Siell\u00e4 on ohjelman l\u00e4hdekoodi ja t\u00e4m\u00e4 hakemisto on paikka, jossa ohjelman kehitys tulee oikeastaan kokonaan tapahtumaan.<\/p>\n
Tutustutaan ensin package.json<\/em><\/strong> tiedostoon:<\/p>\n
{\r\n  \"name\": \"react-demoilua\",\r\n  \"version\": \"0.1.0\",\r\n  \"private\": true,\r\n  \"dependencies\": {\r\n    \"react\": \"^15.5.4\",\r\n    \"react-dom\": \"^15.5.4\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"react-scripts\": \"1.0.7\"\r\n  },\r\n  \"scripts\": {\r\n    \"start\": \"react-scripts start\",\r\n    \"build\": \"react-scripts build\",\r\n    \"test\": \"react-scripts test --env=jsdom\",\r\n    \"eject\": \"react-scripts eject\"\r\n  }\r\n}<\/pre>\n
Yleiskuva package.json<\/em> -tiedostosta on varsin yksinkertainen. T\u00e4m\u00e4 johtuu siit\u00e4 ett\u00e4 create-react-app piilottaa projektin todelliset riippuvuudet allensa varsin tehokkaasti. Palataan t\u00e4h\u00e4n my\u00f6hemmin mutta tutustutaan ensin tiedostoon t\u00e4ss\u00e4 muodossa.<\/p>\n
Tiedostossa on ensin \u00a0projektin metatietoa ja sen j\u00e4lkeen riveill\u00e4 5-8 ohjelman k\u00e4ytt\u00e4m\u00e4t riippuvuudet eli dependencies (”depsit”)<\/em>. N\u00e4emme ett\u00e4 riippuvuuksia on t\u00e4ss\u00e4 vaiheessa ainoastaan Reactiin. Kehitysaikaiset riippuvuudet eli\u00a0devDependencies<\/em> on m\u00e4\u00e4ritetty riveill\u00e4 9-11.\u00a0\u00a0Siell\u00e4 n\u00e4kyy react-scripts<\/em>, joka itse asiassa on create-react-app:iin liittyv\u00e4 skriptikirjasto.<\/p>\n
Scripts -osiossa n\u00e4kyy komennot, jotka voidaan suorittaa ajamalla komento npm\u00a0[komento]:<\/em><\/p>\n
npm\u00a0start\u00a0<\/em>k\u00e4ynnist\u00e4\u00e4 kehitysymp\u00e4rist\u00f6n,\u00a0npm run build<\/em>\u00a0rakentaa tuotantopaketin ohjelmasta,\u00a0npm test <\/em>suorittaa testit.<\/p>\n
npm run eject\u00a0<\/em>on tarkoitettu edistyneemmille k\u00e4ytt\u00e4jille (tai oikeastaan v\u00e4h\u00e4nk\u00e4\u00e4n vakavamman koodauksen harrastajalle): eject komennolla create-react-app -projektin rakenne voidaan ”vapauttaa” kehitt\u00e4j\u00e4n k\u00e4ytt\u00f6\u00f6n siten ett\u00e4 kaikki kehitysymp\u00e4rist\u00f6n komponentit ovat vapaasti konfiguroitavissa ja n\u00e4ht\u00e4vill\u00e4. \u00a0T\u00e4ll\u00f6in tosin menetet\u00e4\u00e4n react-create-app:n tarjoama\u00a0helppok\u00e4ytt\u00f6isyys mutta toisaalta osaava kehitt\u00e4j\u00e4 saa k\u00e4ytt\u00f6\u00f6ns\u00e4 huomattavasti\u00a0laajemman s\u00e4\u00e4dett\u00e4vyyden. T\u00e4ss\u00e4 esimerkki, millaiseksi package.json muotoutuu, kun ajetaan\u00a0npm run eject<\/em>:<\/p>\n
{\r\n  \"name\": \"react-demoilua\",\r\n  \"version\": \"0.1.0\",\r\n  \"private\": true,\r\n  \"dependencies\": {\r\n    \"react\": \"^15.5.4\",\r\n    \"react-dom\": \"^15.5.4\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"autoprefixer\": \"7.1.0\",\r\n    \"babel-core\": \"6.24.1\",\r\n    \"babel-eslint\": \"7.2.3\",\r\n    \"babel-jest\": \"20.0.3\",\r\n    \"babel-loader\": \"7.0.0\",\r\n    \"babel-preset-react-app\": \"^3.0.0\",\r\n    \"babel-runtime\": \"6.23.0\",\r\n    \"case-sensitive-paths-webpack-plugin\": \"1.1.4\",\r\n    \"chalk\": \"1.1.3\",\r\n    \"css-loader\": \"0.28.1\",\r\n    \"dotenv\": \"4.0.0\",\r\n    \"eslint\": \"3.19.0\",\r\n    \"eslint-config-react-app\": \"^1.0.4\",\r\n    \"eslint-loader\": \"1.7.1\",\r\n    \"eslint-plugin-flowtype\": \"2.33.0\",\r\n    \"eslint-plugin-import\": \"2.2.0\",\r\n    \"eslint-plugin-jsx-a11y\": \"5.0.3\",\r\n    \"eslint-plugin-react\": \"7.0.1\",\r\n    \"extract-text-webpack-plugin\": \"2.1.0\",\r\n    \"file-loader\": \"0.11.1\",\r\n    \"fs-extra\": \"3.0.1\",\r\n    \"html-webpack-plugin\": \"2.28.0\",\r\n    \"jest\": \"20.0.3\",\r\n    \"object-assign\": \"4.1.1\",\r\n    \"postcss-flexbugs-fixes\": \"3.0.0\",\r\n    \"postcss-loader\": \"2.0.5\",\r\n    \"promise\": \"7.1.1\",\r\n    \"react-dev-utils\": \"^3.0.0\",\r\n    \"react-error-overlay\": \"^1.0.7\",\r\n    \"style-loader\": \"0.17.0\",\r\n    \"sw-precache-webpack-plugin\": \"0.9.1\",\r\n    \"url-loader\": \"0.5.8\",\r\n    \"webpack\": \"2.6.1\",\r\n    \"webpack-dev-server\": \"2.4.5\",\r\n    \"webpack-manifest-plugin\": \"1.1.0\",\r\n    \"whatwg-fetch\": \"2.0.3\"\r\n  },\r\n  \"scripts\": {\r\n    \"start\": \"node scripts\/start.js\",\r\n    \"build\": \"node scripts\/build.js\",\r\n    \"test\": \"node scripts\/test.js --env=jsdom\"\r\n  },\r\n  \"jest\": {\r\n    \"collectCoverageFrom\": [\r\n      \"src\/**\/*.{js,jsx}\"\r\n    ],\r\n    \"setupFiles\": [\r\n      \"<rootDir>\/config\/polyfills.js\"\r\n    ],\r\n    \"testMatch\": [\r\n      \"<rootDir>\/src\/**\/__tests__\/**\/*.js?(x)\",\r\n      \"<rootDir>\/src\/**\/?(*.)(spec|test).js?(x)\"\r\n    ],\r\n    \"testEnvironment\": \"node\",\r\n    \"testURL\": \"http:\/\/localhost\",\r\n    \"transform\": {\r\n      \"^.+\\\\.(js|jsx)$\": \"<rootDir>\/node_modules\/babel-jest\",\r\n      \"^.+\\\\.css$\": \"<rootDir>\/config\/jest\/cssTransform.js\",\r\n      \"^(?!.*\\\\.(js|jsx|css|json)$)\": \"<rootDir>\/config\/jest\/fileTransform.js\"\r\n    },\r\n    \"transformIgnorePatterns\": [\r\n      \"[\/\\\\\\\\]node_modules[\/\\\\\\\\].+\\\\.(js|jsx)$\"\r\n    ],\r\n    \"moduleNameMapper\": {\r\n      \"^react-native$\": \"react-native-web\"\r\n    }\r\n  },\r\n  \"babel\": {\r\n    \"presets\": [\r\n      \"react-app\"\r\n    ]\r\n  },\r\n  \"eslintConfig\": {\r\n    \"extends\": \"react-app\"\r\n  }\r\n}\r\n<\/pre>\n
eject\u00a0<\/em>on yksisuuntainen eli kerran ejektoitua projektia ei voi en\u00e4\u00e4n muuttaa takaisin yksinkertaisempaan muotoon. Mutta edelleen olellisimmat komennot\u00a0npm start <\/em>sek\u00e4\u00a0npm run build<\/em> ovat k\u00e4ytett\u00e4viss\u00e4. Joten ei ole merkityst\u00e4, ajatko t\u00e4ss\u00e4 vaiheessa ejekti\u00e4 vai et.<\/p>\n
Ejektin j\u00e4ljilt\u00e4 voimme kuitenkin havaita, ett\u00e4 React -projektissamme on nyt k\u00e4yt\u00f6ss\u00e4 useita\u00a0komponentteja erilaisiin tarkotuksiin, muun muassa:<\/p>\n
Babel<\/a> -k\u00e4\u00e4nt\u00e4jill\u00e4 k\u00e4\u00e4nnet\u00e4\u00e4n JavaScript -ohjelmakoodia selaimelle sopivaan muotoon.<\/p>\n
ESLint<\/a> -kirjastot on tarkoitettu koodaajan apuv\u00e4lineeksi: ne tarjoavat automaattisen koodityylin tarkkailijan, jonka avulla koodaaja n\u00e4kee heti jos koodissa on joko tyylillisesti huonoja koodirivej\u00e4 (esim. sisennykset pieless\u00e4) tai jos koodissa k\u00e4ytet\u00e4\u00e4n joitain huonoksi tiedettyj\u00e4 tapoja (esim. m\u00e4\u00e4ritet\u00e4\u00e4n muuttuja jota ei oikeasti k\u00e4ytet\u00e4 ollenkaan).<\/p>\n
 WebPack<\/a> -”bundleria” k\u00e4ytet\u00e4\u00e4n pakkaamaan ohjelman sis\u00e4lt\u00e4m\u00e4 kokonaisuus yhdeksi kokonaisuudeksi. Lis\u00e4ksi se sis\u00e4lt\u00e4\u00e4 k\u00e4tev\u00e4n Webpack\u00a0Development Server<\/em> -palvelimen. Se toimii\u00a0yksinkertaistetusti sanottuna kehitysaikaisena HTTP -palvelimena joka tarjoilee sovelluksen uusimman version selaimelle osoitteessa http:\/\/localhost:3000<\/em>. Se osaa my\u00f6s ottaa uusimmat koodit k\u00e4ytt\u00f6\u00f6n ”lennossa” joten se soveltuu erinomaisesti kehitysaikaiseen ty\u00f6skentelyyn: kun ohjelmakoodia muutetaan, muutos n\u00e4kyy v\u00e4litt\u00f6m\u00e4sti selaimessa!<\/p>\n
Joka tapauksessa: kehitysymp\u00e4rist\u00f6mme on nyt valmis k\u00e4ytt\u00f6\u00f6n ja voimme alkaa koodiin tutustumisen!<\/p>\n
React -projektin rakenne ja toiminta<\/strong><\/p>\n
Avataan projekti jollain koodieditorilla, kuten JavaScript -koodarien suosimalla\u00a0Visual Studio Code<\/a> -editorilla.<\/p>\n
Jos tutkitaan public<\/em> -hakemistossa olevaan index.html<\/em> -tiedostoa, havaitaan ett\u00e4 siell\u00e4 ei juurikaan ole sis\u00e4lt\u00f6\u00e4 body -tagin sis\u00e4ll\u00e4:<\/p>\n
<body>\r\n  <noscript>\r\n    You need to enable JavaScript to run this app.\r\n  <\/noscript>\r\n  <div id=\"root\"><\/div>\r\n<\/body><\/pre>\n
Body -osiossa on kuitenkin SPA eli Singe Page Application<\/a> -web ohjelmalle riitt\u00e4v\u00e4 osuus: div -elementti (jonka id on\u00a0root). <\/em>T\u00e4h\u00e4n kohtaan sivulla React -ohjelma lis\u00e4\u00e4 HTML- ja JavaScript -sis\u00e4lt\u00f6\u00e4 ohjelmallisesti. React -ohjelmaa kehitett\u00e4ess\u00e4 HTML -koodausta ei ole tarpeen edes k\u00e4ytt\u00e4\u00e4 t\u00e4m\u00e4n enemp\u00e4\u00e4 vaan kaikki koodaus tehd\u00e4\u00e4n JavaScriptill\u00e4 sek\u00e4 JSX<\/a> -kielell\u00e4. Kun t\u00e4m\u00e4 index-sivu avataan kerran, selaimen ei ole sen j\u00e4lkeen tarvetta tehd\u00e4 sivulatausta, koska sivun \u00a0sis\u00e4lt\u00f6\u00e4 pystyt\u00e4\u00e4n muokkaamaan ohjelmallisesti ”lennossa”. T\u00e4m\u00e4 tarjoaa k\u00e4ytt\u00e4j\u00e4lle huomattavasti\u00a0mukavemman k\u00e4ytt\u00f6kokemuksen verrattuna ”vanhanaikaiseen” web-sovellukseen jossa toiminnon suorittaminen aiheutti aina sivunlatauksen.<\/p>\n
Tutkitaan seuraavaksi paikkaa, joka sijoittaa sivulle sen sis\u00e4ll\u00f6n. Avataan src<\/em> -hakemistosta tiedosto index.js:<\/p>\n
import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from '.\/App';\r\nimport registerServiceWorker from '.\/registerServiceWorker';\r\nimport '.\/index.css';\r\n\r\nReactDOM.render(<App \/>, document.getElementById('root'));\r\nregisterServiceWorker();\r\n<\/pre>\n
Sielt\u00e4 n\u00e4hd\u00e4\u00e4n, ett\u00e4 root<\/em> -elementtiin render\u00f6id\u00e4\u00e4n eli ”piirret\u00e4\u00e4n” App -tiedostossa oleva React -komponentti.<\/p>\n
Tutkitaan siis seuraavaksi\u00a0App.js –<\/em>tiedostoa:<\/em><\/p>\n
import React, { Component } from 'react';\r\nimport logo from '.\/logo.svg';\r\nimport '.\/App.css';\r\n\r\nclass App extends Component {\r\n  render() {\r\n    return (\r\n      <div className=\"App\">\r\n        <div className=\"App-header\">\r\n          <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\r\n          <h2>Welcome to React<\/h2>\r\n        <\/div>\r\n        <p className=\"App-intro\">\r\n          To get started, edit <code>src\/App.js<\/code> and save to reload.\r\n        <\/p>\r\n      <\/div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default App;<\/pre>\n
T\u00e4ss\u00e4 n\u00e4emmekin jo React -komponentin App<\/em>. Se on koko ohjelmamme p\u00e4\u00e4komponentti, jonka render<\/em> -funktio tuottaa sis\u00e4ll\u00f6n aiemmin tutkittuun index.html tiedostoon. Render<\/em> -funktiossa k\u00e4ytet\u00e4\u00e4n JSX -kielt\u00e4 jossa on tuttuja elementtej\u00e4\u00a0HTML -kielest\u00e4.<\/p>\n
App.js<\/em> -tiedoston alussa importoidaan k\u00e4ytt\u00f6\u00f6n Reactin Component<\/em> -luokka, yksi kuvatiedosto sek\u00e4 tyylit erillisest\u00e4 tyylitiedostosta.<\/p>\n
React -ohjelman kehitt\u00e4minen siis l\u00e4htee t\u00e4st\u00e4 App.js<\/em> -tiedostosta eteenp\u00e4in! Koodarin teht\u00e4v\u00e4n\u00e4 on suunnitella ohjelman k\u00e4ytt\u00f6liittym\u00e4suunnitelman perusteella\u00a0uusia React -komponentteja ja sijoittaa niit\u00e4 n\u00e4yt\u00f6lle. K\u00e4yt\u00e4nn\u00f6ss\u00e4 koodari siis toteuttaa uusia tiedostoja, joissa on Reactin Component<\/em> -luokasta peritty, aivan kuteen App.js<\/em> -tiedostossa. Ohjelman rakenne pyrit\u00e4\u00e4n m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4n osissa ja ”n\u00e4yt\u00f6t” muodostetaan yhdistelem\u00e4ll\u00e4 komponentteja kokonaisuudeksi. Tiedostoon voi sis\u00e4llytt\u00e4\u00e4 toisia komponentteja kun ottaa ne k\u00e4ytt\u00f6\u00f6n import<\/em> -menetelm\u00e4ll\u00e4. Luokan render<\/em> -funktio m\u00e4\u00e4ritt\u00e4\u00e4, mit\u00e4 komponentteja ja muuta sis\u00e4lt\u00f6\u00e4 n\u00e4yt\u00f6lle halutaan.<\/p>\n
React -projektin kehitt\u00e4minen create-react-app -rungon p\u00e4\u00e4lle<\/strong><\/p>\n
Kuten edellisess\u00e4 blogipostauksessa<\/a> todettiin, React -ohjelman suunnittelu l\u00e4htee komponenttiajettelusta:\u00a0k\u00e4ytt\u00f6liittym\u00e4 pyrit\u00e4\u00e4n ajattelemaan komponenttien kautta ja sivulla n\u00e4kyv\u00e4t elementit toteutetaan erillisiin tiedostoihin jolloin syntyy helpommin ymm\u00e4rrett\u00e4v\u00e4mpi ohjelmarakenne,\u00a0kohtuullisen kokoisia ohjelmatiedostoja ja kaiken lis\u00e4ksi komponentteja\u00a0joita\u00a0voidaan hyv\u00e4ss\u00e4 tapauksessa uudelleenk\u00e4ytt\u00e4\u00e4 useassa paikassa ohjelmaa.<\/p>\n
Suunnittelemme seuraavaksi pienen ohjelman, jossa on muutama komponentti. N\u00e4in voimme kokeilla ohjelman jakamista komponentteihin ja n\u00e4emme miten React-j\u00e4rjestelm\u00e4n kehitt\u00e4minen k\u00e4ynnistyy.<\/p>\n
Tavoite: haluamme tehd\u00e4 Reactilla sovelluksen, miss\u00e4 k\u00e4ytt\u00e4j\u00e4 voi katsella Tampereen alueen tieliikennekameroiden reaaliaikaisia kuvia. Tarvitsemme vain n\u00e4yt\u00f6n, jossa k\u00e4ytt\u00e4j\u00e4 valitsee alasvetolistasta jonkin Tampereen ymp\u00e4rist\u00f6ss\u00e4 olevan kelikameran nimen ja sen j\u00e4lkeen alasvetolistan alapuolella n\u00e4ytet\u00e4\u00e4n kelikameran kuva.<\/p>\n
Suunnitelma: toteutetaan yksi ”sivu” (= React- komponetti), johon asetellaan kaksi komponenttia: kameran valintakomponentti CameraSelection<\/em> sek\u00e4 valitun kameran kuvaa n\u00e4ytt\u00e4v\u00e4 komponentti CameraView<\/em>. P\u00e4\u00e4komponentilla eli ”sivulla” on hallussaan tila eli state, <\/em>jossa on tallessa valittu kamera. Kun k\u00e4ytt\u00e4j\u00e4 valitsee n\u00e4ytett\u00e4v\u00e4n kameran valintakomponentilla, valintakomponentti v\u00e4litt\u00e4\u00e4 valinnan p\u00e4\u00e4komponentille ja se puolestaan v\u00e4litt\u00e4\u00e4 uuden tiedon kuvaa n\u00e4ytt\u00e4v\u00e4lle komponentille.<\/p>\n
Ei muuta kuin koodaamaan!<\/p>\n
Perustetaan ensin src -hakemistoon kaksi hakemistoa komponenteille: CameraSelection<\/em> ja CameraView<\/em>.<\/p>\n
Toteutetaan ensin kameran valintakomponentti:<\/p>\n
import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport '.\/camera-selection.css';\r\n\r\n\/\/ http:\/\/tie.digitraffic.fi\/api\/v1\/metadata\/camera-stations\r\n\/\/ http:\/\/tie.digitraffic.fi\/api\/v1\/data\/camera-data\/{id}\r\nconst cameras = [\r\n    { presetId: '', name: '-' },\r\n    { presetId: 'C0454801', name: 'Lielahti, Yl\u00f6j\u00e4rvelle p\u00e4in' },\r\n    { presetId: 'C0454802', name: 'Lielahti, Tampereelle p\u00e4in' },\r\n    { presetId: 'C0460900', name: 'Rantatunnelin suu, it\u00e4' },\r\n    { presetId: 'C1850301', name: 'Hervannan valtav\u00e4, Hervantaan p\u00e4in' },\r\n    { presetId: 'C1850302', name: 'Hervannan valtav\u00e4, Keskustaan\/Kalevaan p\u00e4in' },\r\n    { presetId: 'C0450702', name: 'Lakalaiva, Helsinkiin p\u00e4in' },\r\n    { presetId: 'C0450701', name: 'Lakalaiva, Vaasaan p\u00e4in' }\r\n]\r\n\r\nclass CameraSelection extends Component {\r\n\r\n    selectionChanged = (event) => {\r\n        console.log(\"Selected:\" + event.target.value);\r\n        this.props.onSelect(event.target.value);\r\n    }\r\n\r\n    render = () => {\r\n        const { selectedPresetId } = this.props;\r\n        return <div className=\"Camera-selection-container\">\r\n            <div className=\"Camera-selection-text\">\r\n                Select camera to show:<br \/>\r\n                <form>\r\n                    <select onChange={this.selectionChanged} value={selectedPresetId}>\r\n                        {\r\n                            cameras.map((cam, i) =>\r\n                                <option\r\n                                    key={'selection_' + i}\r\n                                    value={cam.presetId}>\r\n                                    {cam.name}\r\n                                <\/option>)\r\n                        }\r\n                    <\/select>\r\n                <\/form>\r\n            <\/div>\r\n        <\/div>\r\n    }\r\n}\r\n\r\nCameraSelection.propTypes = {\r\n    selectedPresetId: PropTypes.string.isRequired,\r\n    onSelect: PropTypes.func.isRequired\r\n}\r\n\r\nexport default CameraSelection;<\/pre>\n
.Camera-selection-container {\r\n  align-content: center;\r\n  background-color: lightblue;\r\n  padding-top: 10px;\r\n  padding-bottom: 10px;\r\n}\r\n\r\n.Camera-selection-text {\r\n    font-size: 16;\r\n    color: 'blue';\r\n}<\/pre>\n
CameraSelection<\/em> -komponentille annetaan kaksi property\u00e4: selectedPresetId<\/em> ja onSelect<\/em>. N\u00e4ist\u00e4 ensimm\u00e4inen kertoo komponentille, mik\u00e4 valinta sen kuuluu n\u00e4ytt\u00e4\u00e4 aktiivisena. Toinen ”propsi” taas on valinnan k\u00e4sittelev\u00e4 ”callback” funktio. Komponentissa on kovakoodattuna taulukkoon muutama kamera Tampereen seudulta. Oikeassa projektissa kameralistaus voitaisiin hakea Liikenneviraston REST-rajapinnasta mutta j\u00e4tet\u00e4\u00e4n se harjoitusteht\u00e4v\u00e4ksi tai toiseen blogipostaukseen.<\/p>\n
Seuraavaksi voisimme lis\u00e4t\u00e4 t\u00e4m\u00e4n komponentin k\u00e4ytt\u00f6\u00f6n ohjelman ”p\u00e4\u00e4sivulle” eli App.js<\/em>\u00a0-tiedostoon:<\/p>\n
import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport '.\/App.css';\r\nimport CameraSelection from '.\/CameraSelection\/camera-selection'\r\n\r\nclass App extends Component {\r\n\r\n  constructor() {\r\n    super();\r\n    this.state = { selectedPresetId: null }\r\n  }\r\n\r\n  cameraSelected = (value) => {\r\n    this.setState({ selectedPresetId: value });\r\n  }\r\n\r\n  render = () => {\r\n    const { selectedPresetId } = this.state;\r\n    return (\r\n      <div className=\"app\">\r\n        <div className=\"app-header\">\r\n          <h2>Traffic Camera Viewer - Tampere<\/h2>\r\n        <\/div>\r\n        <CameraSelection\r\n          selectedPresetId={this.state.selectedPresetId}\r\n          onSelect={(value) => this.cameraSelected(value)}\r\n        \/>\r\n      <\/div>\r\n    );\r\n  }\r\n}\r\n\r\nApp.propTypes = {\r\n    selectedPresetId: PropTypes.string.isRequired\r\n}\r\n\r\nexport default App;\r\n<\/pre>\n
App.js -tiedostostossa n\u00e4kyy uusi komponentti korostettuna. Huomaa my\u00f6s komponentin tila eli state<\/em>, jossa on tallessa nykyinen valinta.<\/p>\n
Todetaan ett\u00e4 valintakomponentti n\u00e4kyy sivulla:<\/p>\n
\"\"<\/a>T\u00e4m\u00e4n j\u00e4lkeen toteutetaan viel\u00e4 kamerakuvan n\u00e4ytt\u00e4v\u00e4 komponentti:<\/p>\n
import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nclass CameraView extends Component {\r\n    render = () => {\r\n        const { presetId } = this.props;\r\n        return <div className=\"Camera-selection-container\">\r\n            <img\r\n                src={ `http:\/\/weathercam.digitraffic.fi\/${presetId}.jpg`}\r\n                alt={ `Camera ${presetId}`}\r\n             \/>\r\n        <\/div>\r\n    }\r\n}\r\n\r\nCameraView.propTypes = {\r\n    presetId: PropTypes.string.isRequired\r\n}\r\n\r\nexport default CameraView;<\/pre>\n
T\u00e4m\u00e4 komponentti saa propsina vain halutun presetId:n, jonka perusteella se n\u00e4ytt\u00e4\u00e4 tieliikennekameran kuvan Liikenneviraston palvelusta.<\/p>\n
Otetaan CameraView k\u00e4ytt\u00f6\u00f6n App.js<\/em> tiedostossa:<\/p>\n
import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport '.\/App.css';\r\nimport CameraSelection from '.\/CameraSelection\/camera-selection'\r\nimport CameraView from '.\/CameraView\/camera-view'\r\n\r\nclass App extends Component {\r\n\r\n  constructor() {\r\n    super();\r\n    this.state = { selectedPresetId: null }\r\n  }\r\n\r\n  cameraSelected = (value) => {\r\n    this.setState({ selectedPresetId: value });\r\n  }\r\n\r\n  render = () => {\r\n    const { selectedPresetId } = this.state;\r\n    return (\r\n      <div className=\"app\">\r\n        <div className=\"app-header\">\r\n          <h2>Traffic Camera Viewer - Tampere<\/h2>\r\n        <\/div>\r\n        <CameraSelection\r\n          selectedPresetId={this.state.selectedPresetId}\r\n          onSelect={(value) => this.cameraSelected(value)}\r\n        \/>\r\n        {selectedPresetId ?\r\n          <div className=\"camera-container\">\r\n            <CameraView presetId={selectedPresetId} \/>\r\n          <\/div>\r\n          : null\r\n        }\r\n      <\/div>\r\n    );\r\n  }\r\n}\r\n\r\nApp.propTypes = {\r\n  selectedPresetId: PropTypes.string.isRequired\r\n}\r\n\r\nexport default App;<\/pre>\n
Projektimme on valmis! Testataan toimintaa valitsemalla Rantatunnelin kamera:<\/p>\n
\"\"<\/a><\/p>\n
Yhteenveto<\/strong><\/p>\n
create-react-app<\/em> tekee React -projektin aloittamisen helpoksi. Se ottaa mukaan perus-riippuvuudet ja tarjoaa kehitysty\u00f6lle hyv\u00e4n perustan. Sen p\u00e4\u00e4lle on hyv\u00e4 jatkaa omaa kehitysty\u00f6t\u00e4 ja toteuttaa mit\u00e4 hienoimpia web-palveluita. React -ohjelman koon ja vaatimusten kasvaessa create-react-app -pohja ei kuitenkaan riit\u00e4 kovin pitk\u00e4lle, mutta pohjan p\u00e4\u00e4lle on helppo ottaa k\u00e4ytt\u00f6\u00f6n esim. tilanhallintakomponentti Redux<\/a>. Siit\u00e4 ja muitakin Reactin kehitysty\u00f6ss\u00e4 k\u00e4ytett\u00e4vist\u00e4 ty\u00f6kaluista voidaankin sitten puhua omassa blogipostauksessaan.<\/p>\n","protected":false},"excerpt":{"rendered":"
React esittely -blogikirjoituksessa esiteltiin Reactin perusteita yksinkertaisella toteutuksella, jossa React ladattiin k\u00e4ytt\u00f6\u00f6n ns. CDN -latauksella. HTML-sivun l\u00e4hdekoodiin koodattiin suoraan Javascripti\u00e4 joka k\u00e4ytti React -kirjastoa. T\u00e4m\u00e4 tapa sopii keve\u00e4\u00e4n Reactin esittelyyn, mutta v\u00e4h\u00e4nk\u00e4\u00e4n vakavammassa projektissa t\u00e4m\u00e4 ei ole ollenkaan riitt\u00e4v\u00e4 tapa\u00a0k\u00e4ytt\u00e4\u00e4 Reactia. T\u00e4ss\u00e4 blogikirjoituksessa perustamme oikean React -kehitysymp\u00e4rist\u00f6n, jossa kehitysty\u00f6 onnistuu helposti ja tehokkaasti.\u00a0Koodausty\u00f6 tapahtuu JavaScript … Lue lis\u00e4\u00e4<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,7,12],"tags":[],"class_list":["post-344","post","type-post","status-publish","format-standard","hentry","category-react","category-tyokalujen-asennus","category-tyokalut"],"_links":{"self":[{"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/posts\/344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=344"}],"version-history":[{"count":39,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/posts\/344\/revisions"}],"predecessor-version":[{"id":483,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/posts\/344\/revisions\/483"}],"wp:attachment":[{"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}