Az alkalmazás dizájn, a logika mellett a másik fontos része a webalkalmazás elkészítésének. Nem mindegy, hogy mit adunk ki a kezeink közül, milyen a megjelenése az alkalmazásunknak. Amit most használni fogunk az a CSS.
Háttér beállítása
Az egész alkalmazásra érvényes stílust az src könyvtárban levő index.css-ben adhatunk meg. Ami van benne jelenleg azt mindet törölhetjük és valamilyen egyszerűbb igazítást és térközt adjunk csak meg neki. Nem kell túlbonyolítani a dolgot. Létrehozok egy body szelektort és megadom az alap formázásokat:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
Aztán jöhet valami jó kis színátmenetes háttér. Én erre egy online gradiens, azaz színátmenet generáló eszközt szoktam használni, amin vizuálisan be tudom állítani a nekem tetsző színeket, aztán a kapott CSS kódot fogom, kimásolom és beillesztem.
Az oldal a https://cssgradient.io/
A csúszkákkal, mint egy igazi piktor, kikeverek valamilyen színt:

Aztán, ha tetszik, akkor az oldalról kimásolom a generált CSS-t:

És beillesztem, ahová kell:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(90deg, rgba(85,76,233,1) 0%, rgba(43,42,5,1) 27%, rgba(0,212,255,1) 100%);
}
Megnézem a weboldalt, hogy megfelel-e kényes ízlésemnek, amit látok:

Ha tetszik, akkor maradok ennél, ha nem, akkor változtatom tovább. Nem szép, viszont csúnya, úgyhogy én most maradok ennél :).
Cím csinosítása
Egy szabadon választott Google betűtípust fogok használni, aminek a neve Ruslan Display. Hogy ne mindent az index.css-ben helyezzünk el, létrehozok az App-nak is egy css-t, találó módon App.css néven :).
Az src mappában hozom létre az App.js-el azonos szinten.
Aztán ebbe az App.css-be fogom importálni azt a stílust, amit a Google Fonts oldalán találtam a Ruslan Display betűtípushoz:
@import url('https://fonts.googleapis.com/css2?family=Ruslan+Display&display=swap');
Az App-ban a cím egy h1 címsorban van. Ehhez létrehozom a h1-nek a szelektort, beállítom a betűtípust és mondjuk egy fehér színt, ami jól látszik a háttéren:
h1 {
font-family: 'Ruslan Display', cursive;
color: white;
}
Végül a stíluslapot be is importálom az App.js-be, ügyelve a helyes elérésre:
import './App.css';
Megnézem a böngészőben és, ha tetszik, akkor hagyom, ha nem, akkor még finomítom:

Nekem ez most megfelel, mert nem dizájn versenyre készülünk most.
Esetleg talán a cím betűméretén lehetne növelni. Ehhez az App.js-ben a címsorhoz adok egy className attribútumot és mondjuk adok neki egy tachyons osztálynevet. Legyen ez most f1:
<h1 className="f1">Terminator modellek</h1>
Összegzés
Nos ebben az igazán rövid leckében betekintést nyertünk abba, hogy a CSS egyáltalán idegen a React-től.
A React Native-al ellentétben ugyanis simán tudunk itt css fájlokat használni, akárcsak a weboldalak esetében. És indulásnak nekünk ez most tökéletesen elegendő. Ugyanakkor gondolatébresztőnek szeretném elmondani, hogy a CSS ilyen egyszerű használatával még koránt sem merült ki a dizájn lehetőségek tárháza, amit React-es projektjeinkben alkalmazhatunk. Talán egy későbbi bejegyzésben visszatérek még a dizájn kérdésére, ugyanis sok értékes információt lehet még átadni ebben a témában is.
Github
Ahol most tartunk az alábbi Github linkről is letölthető.
YouTube
Aki pedig szeretné videón végignézni / hallgatni, amit ebben a leckében csináltunk, annak íme: