React framework biblioteka js wprowadzenie

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="https://unpkg.com/react@15/dist/react.min.js"></script>

<script src="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="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>

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.