Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik
CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .
React style bezpłatny kurs jak zrobić ładny komponent stylizacja React
React style bezpłatny kurs jak zrobić ładny komponent stylizacja React
Witaj w kolejnej lekcji bezpłatnego kursu opisującego bibliotekę React.js. W poprzednich wspomniałem, że komponent (ang. Component), to najważniejsza część filozofii działania biblioteki React oraz aplikacji tworzonych za pomocą technologii React. Nowoczesne strony internetowe, to nie tylko funkcjonalność, ale także ładny, estetyczny wygląd.
Tworząc strony internetowe w tradycyjny sposób, do ich graficznego uatrakcyjniania używam zwykle CSS3, czyli tzw. styli (arkusz styli). React także umożliwia współpracę z CSS3, ale także React sam w sobie posiada narzędzia do graficznej oprawy tworzonych aplikacji. Poniżej znajdziesz informacje o:
* React - współpraca z CSS3
* React – własna react’owa oprawa graficzna
Na końcu artykułu znajdziesz kod strony zawierającej opisywane zagadnienia. Zwróć uwagę na:
* {this.props.children}. Ten zapis każe aplikacji React, zastosować właściwości podane w renderowaniu DOM, np.: dgcolor="#58C545" fontcolor="#fff" dgradius="5px"
* zmienna let (ECMAScript 6) – to zmienna JavaScript, której zakres jest ograniczony do bloku, w którym jest zdeklarowana, jeżeli masz starą przeglądarkę internetową, anleży zamiast let wpisać, tak po staremu var, a to mam nadzieję, że jest Tobie znane, gdyż jest standardem JavaScript od wielu lat
* miejsceUmieszczenia – zmienna, która przechowuje w sobie miejsce renderowania kontenera tworzonego przez React.
REACT - WSPÓŁPRACA Z CSS3
Zakładam, że znasz html oraz css3 w stopniu dobrym oraz JavaScript, w zakresie podstawowym. React w kodzie strony html tworzy takie same elementy jak typowy DOM, w związku z czym stylizowanie – grafika, jest bardzo podobne. Generalnie chodzi o to, aby w trakcie tworzenia komponentu wskazać React, skąd ma czerpać style, w moim przypadku odbywa się to poprzez komendę:
<div className="portalecss">
Gdzie "portalecss", to zwykła klasa CSS3, która zawiera dane o stylizowaniu kontenera div.
REACT – WŁASNA REACT’OWA OPRAWA GRAFICZNA
JavaScript posiada własną specyfikację styli, która odpowiada adekwatnej specyfikacji CSS, np.:
backgroundColor odpowiada background (kolor) w CSS,
color odpowiada .. color w CSS – tak samo? No właśnie. Dokładną specyfikację możesz bez problemu znaleźć w internecie, więc nie ma sensu omawiać szczegółów.
W moim przykładzie został w ramach komponentu React, utworzony obiekt (zmienna ”portaleposwojskuStyle”), który zawiera specyfikację styli, następnie ta zmienna przekazywana jest do renderowania kontenera div:
<div style={portaleposwojskuStyle}>
A oto kod strony, zawierający cały powyżej opisywany materiał: React, komponenty, stylizowanie – obydwa przypadki CSS i React.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="description" content=">React style bezpłatny kurs jak zrobić ładny komponent stylizacja React">
<meta name="keywords" content=">react, style, bezpłatny kurs, jak zrobić, ładny komponent">
<meta name="author" content=">GDDM Darek Gołębiowski portale poswojsku">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Darek Gołębiowski GDDM poswojsku programowanie, doradztwo, analizy JavaScript</title>
<script src="//www.poswojsku.info/%3Ca%20href%3D"https://unpkg.com/react">https://unpkg.com/react@15/dist/react.js"></script>
<script src="//www.poswojsku.info/%3Ca%20href%3D"https://unpkg.com/react-dom">https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="//www.poswojsku.info/%3Ca%20href%3D"https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.30/browser.min.js"></script>">https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.30/browser.min.js"...
</head>
<style>
#kontenercss {
margin: 5px;
padding: 5px;
max-width: 25%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.portalecss {
padding: 3px;
margin: 3px;
background-color: #ee5500;
color: #444;
display: inline-block;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 22px;
text-align: center;
border: 2px solid;
border-radius: 9%;
}
#kontener {
margin-left: 5%;
}
</style>
</head>
Autor bezpłatnego kursu
"React nowoczesne aplikacje"
Darek Gołębiowski
Szukasz wykonawcy lub podwykonawcy Twojej aplikacji portalu czy strony internetowej? Polecam moje usługi i serdecznie zapraszam do współpracy
Programuję i analizuję m.in. w: JavaScript, HTML5, CSS3, jQuery, jQuery Mobile, React.js, node.js, AJAX, JSON, Mocha.js, Babel.js
Masz pytanie? marketing ( at ) poswojsku.eu
<body>
<div>
<h1>REACT - WSPÓŁPRACA Z CSS3</h1>
</div>
<div id="kontenercss"></div>
<div>
<h1>React – własna react’owa oprawa graficzna</h1>
</div>
<div id="kontener"></div>
<script type="text/babel">
// style nadawane przy wykorzystaniu CSS3
var Portaleposwojskucss = React.createClass({
render: function () {
return(
<div className="portalecss">
{this.props.children}
</div>
);
}
});
var miejsceUmieszczenia = document.querySelector("#kontenercss");
ReactDOM.render(
<div>
<Portaleposwojskucss>www.poswojsku.info</Portaleposwojskucss>
<Portaleposwojskucss>www.poswojsku.pl</Portaleposwojskucss>
<Portaleposwojskucss>www.poswojsku.com.pl</Portaleposwojskucss>
<Portaleposwojskucss>www.poswojsku.org</Portaleposwojskucss>
<Portaleposwojskucss>www.poswojsku.eu</Portaleposwojskucss>
</div>,
miejsceUmieszczenia
)
// style nadawane przy wykorzystaniu REACT
var Portaleposwojsku = React.createClass({
render: function () {
let portaleposwojskuStyle = {
backgroundColor: this.props.dgcolor,
color: this.props.fontcolor,
borderRadius: this.props.dgradius,
padding: 5,
margin: 5,
display: "inline-block",
fontFamily: "monospace",
fontSize: "24px",
textAlign: "center"
};
return(
<div style={portaleposwojskuStyle}>
{this.props.children}
</div>
);
}
});
var miejsceUmieszczenia = document.querySelector("#kontener");
ReactDOM.render(
<div>
<Portaleposwojsku dgcolor="#58C545" fontcolor="#fff" dgradius="5px">www.poswojsku.info</Portaleposwojsku>
<Portaleposwojsku dgcolor="#34B3FF" fontcolor="#000" dgradius="9px">www.poswojsku.pl</Portaleposwojsku>
<Portaleposwojsku dgcolor="#38B3FF" fontcolor="#808080" dgradius="2px">www.poswojsku.com.pl</Portaleposwojsku>
<Portaleposwojsku dgcolor="#180000" fontcolor="#245678" dgradius="15px">www.poswojsku.org</Portaleposwojsku>
<Portaleposwojsku dgcolor="#800000" fontcolor="#fff" dgradius="7px">www.poswojsku.eu</Portaleposwojsku>
</div>,
miejsceUmieszczenia
)
</script>
</body>
</html>
Poznałeś/aś podstawy stylizowania komponentów React. Kolejny krokiem będzie dalsze zgłębianie tajemnic biblioteki React. Serdecznie zapraszam.
Zobacz w bocznym menu podobne poradniki do: React style bezpłatny kurs jak zrobić ładny komponent stylizacja React