Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik

CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .

kurs tworzenie witryn www
szkolenie technik informatyk programista inf.03 ee.09 inf.04 egzamin przygotowanie

 

React framework biblioteka js wprowadzenie

flag language

React framework biblioteka js wprowadzenie do biblioteki React.js

 

 

framework JavaScript poswojsku

React biblioteka js wprowadzenie

 

Istnieją dwa sposoby rozpoczęcia pracy z biblioteką React:

* w odpowiednio skonfigurowanym środowisku programistycznym opartym o node.js

* bezpośrednio w przeglądarce internetowej, opierając się o bibliotekę babel.

Skonfigurowanie środowiska node.js, wymaga wiele czasu, a czasami wiąże się także z dużą ilością nerwów. Jeżeli rozpoczynasz przygodę z React, proponuję na początek naukę podstawowych elementów biblioteki React bezpośrednio w przeglądarce internetowej. Wystarczy do standardowego szkieletu strony HTML dodać w sekcji HEAD tagi:

<script src="//poswojsku.info/%3Ca%20href%3D"https://unpkg.com/react">https://unpkg.com/react@15/dist/react.min.js"></script>

<script src="//poswojsku.info/%3Ca%20href%3D"https://unpkg.com/react-dom">https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

oraz, aby zamienić JSX w rozumiane przez przeglądarkę JS – należy dodać do budowanej przy pomocy React aplikacji - zależność:

<script src="//poswojsku.info/%3Ca%20href%3D"https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>">https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min...

I już, możemy rozpocząć naukę React’a bezpośrednio w kodzie html.

React biblioteka js wprowadzenie

 

Zapiszmy pierwszy element html zbudowany przy pomocy React:

<script type="text/babel">

  ReactDOM.render(

    <h1>Hello world !</h1>,
    document.body

  );

</script>

Co zrobił React? Proste! React w document body umieścił h1.

Teraz coś nieco trudniejszego. W kodzie strony html wstawiamy kontener:

<div id="kontener"></div>
A następnie wykorzystując bibliotekę React, umieścimy w kontenerze kontener tekst <h2>biorę id kontener i umieszczam w nim ten tekst</h2>:

<script type="text/babel">

  ReactDOM.render(

    <h2>biorę id kontener i umieszczam w nim ten tekst</h2>,

    document.querySelector("#kontener")
  );

</script>

Zauważ, że wykorzystaliśmy tutaj język JSX, czyli w skrócie html umieszczone wewnątrz JavaScript. Dziwne, prawda? A jednak działa! JSX w aplikacjach React jest powszechnie używanym rozwiązaniem, dlatego musisz go poznać. Opiszę go w jednej z kolejnych lekcji.

Na dzisiaj wystarczy wiedzy z biblioteki React.js. Przećwicz to co opisałem i zapraszam do kolejnych lekcji z biblioteki React.js.

 

 

Autor bezpłatnego kursu React: 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

 

 

Zobacz w bocznym menu podobne poradniki do: React framework biblioteka js wprowadzenie.

Budowa responsywnych i mobilnych stron internetowych

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

szkolenia bezpłatne kolejne lekcje
kursy, porady, artykuły znajdziesz w Menu Tematycznym