React framework js library introduction to the React.js library

flag language

React framework js library introduction to the React.js library

 

 

framework JavaScript poswojsku

React js library introduction

 

There are two ways to get started with the React library:

* in a properly configured development environment based on node.js

* directly in the web browser, based on the babel library.

Setting up the node.js environment requires a lot of time, and sometimes also involves a lot of nerves. If you're starting the adventure with React, I suggest learning the basic elements of the React library directly in your web browser. All you need to do is add tags in the HEAD section of the standard HTML skeleton page:

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

and to convert JSX into the one understood by the JS browser - add to the application built using React - the dependence:

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

And now, we can start learning React directly in the html code.

React js library introduction

 

Let's save the first html element built using React:

<script type="text/babel">

  ReactDOM.render(

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

  );

</script>

What did React do? Simple! React placed h1 in document body.

Now something a little more difficult. In the code of the html page we insert the container:

<div id = "container"> </div>
And then using the React library, we will put the container text <h2> in the container, take the container id and put this text in it </h2>:

<script type="text/babel">

  ReactDOM.render(

    <h2> I take the container id and put this text in it </h2>,

    document.querySelector ("# container")
  );

</script>

Note that we used the JSX language here, which is html in short placed inside JavaScript. Strange right? And yet it works! JSX in React applications is a commonly used solution, so you need to know it. I will describe him in one of the next lessons.

For today, all you need is knowledge from the React.js library. Practice what I described and invite you to the next lesson from the React.js library.

 

 

Author of a free React course: Darek Gołębiowski

Are you looking for a contractor or subcontractor for your portal application or website? I recommend my services and invite you to cooperation

I program and analyze, among others in: JavaScript, HTML5, CSS3, jQuery, jQuery Mobile, React.js, node.js, AJAX, JSON, Mocha.js, Babel.js

Do you have a question? marketing (at) poswojsku.eu

 

 

See the similar guides in the side menu for: React framework js library introduction.

 

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