React style bezpłatny kurs jak zrobić ładny komponent stylizacja React

szkolenia bezpłatne kursy
lekcje, porady, artykuły znajdziesz w bocznym menu
 
 

Responsywne mobilne strony internetowe kurs bezpłatny

bezpłatny kurs internetowy szkolenia, filmy: kliknij w temat, którego chcesz się nauczyć

React style bezpłatny kurs jak zrobić ładny komponent stylizacja React

 

 

React components komponenty tworzenie jak zrobić komponent 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="https://unpkg.com/react@15/dist/react.js"></script>

  <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.30/browser.min.js"></script>

 

</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

Budowa responsywnych i mobilnych stron internetowych

bezpłatny kurs internetowy szkolenia, filmy: kliknij w temat, którego chcesz się nauczyć

<
  • DANE ADRESOWE

     

    w czym mogę pomóc?

    biuro(at)gddm.com.pl

    Zd Wola Paprocka 86

    znajdź mnie na Youtube

  • PROGRAMOWANIE

     

    JavaScript HTML CSS

    jQuery jQuery Mobile

    node.js React Angular

    ES6 babel rollup karma

  • GRAFIKA ANIMACJA

     

    grafika na strony www

    grafika reklamowa

    animacja 2D i 3D

    grafika 2D i 3 D

  • DORADZTWO

     

    doradztwo IT

    doradztwo biznesowe

    usługi IT

    analizy biznesowe i IT

  • SZKOLENIA

     

    technologie IT

    marketing

    zarządzanie

    projekty metodologia

>