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 library components components creating how to make a react component

flag language

React library components components creating how to make a react component

 

 

React components components creating how to make a react component

React library components components creating how to make a react component

 

As I mentioned in the previous lesson, the basic element of the React.js library is the Component. I also explained what are: states - states and props - properties. If these concepts are foreign to you - go back to the previous lesson of React training.

To understand the components, you need to know the basics of JavaScript objects, because the React library component is a Javascript object that reflects a node from the DOM tree - it is not a DOM element. In React, you bypass the DOM tree, creating a virtual DOM that is reflected in the React components. And because DOM is one of the slowest elements of web technologies - you accelerate the operation of applications written in React.

The React component may contain other components that may contain subsequent components, subsequent ones, etc. This creates a component tree. Usually in React applications - one component is responsible for one task. The way the component is created enables it to be used in other React applications in the future.

There are three main ways to define React components:

Stateless function components.
React.createClass

React.Component

 

React components - Stateless function components

How to make the React component - a way and stateless function elements.
Using JavaScript function, the function receives props as an argument:

var ObrazekDoKlikania = function (props) {

 return (

     <a href={props.href}>

         <img src={props.src} />

     </a>

 );
};

ReactDOM.render(

 <ObrazekDoKlikania href = "//www.poswojsku.info/%3Ca%20href%3D" https://poswojsku.pl "> https://poswojsku.pl" src = "// www.poswojsku.info/%3Ca 20href% 3D% "https://poswojsku.info/sites/default/files/poswojsku-info-madre-jak-sowa... https://poswojsku.info/sites/default/files/ poswojsku-info-madre-like-owl ... "/>,

 document.getElementById ( "container")

);

As you can see, in React - the component is placed in a self-closing tag.

Using the new ES2015 function syntax - the so-called arrow function, a component can be defined more concisely:

 var ObrazekDoKlikania = props => (

<a href={props.href}>

 <img src={props.src} />

 </a>

);

    ReactDOM.render(React.createElement(

      "h1",

      null,

     <ObrazekDoKlikania href = "//www.poswojsku.info/%3Ca%20href%3D" https://poswojsku.pl "> https://poswojsku.pl" src = "// www.poswojsku.info/%3Ca 20href% 3D% "https://poswojsku.info/sites/default/files/poswojsku-info-madre-jak-sowa... https://poswojsku.info/sites/default/files/ poswojsku-info-madre-like-owl ... "/>

    ), container);

The above record compatible with ES6, unfortunately, will not be displayed properly in some, especially older browsers.

 

React components - React.createClass
How to make React component - React.createClass

Another way to create a component is React.createClass. First, we create a component containing some property - props.

var Komponent = React.createClass({
  render: function () {

    return <div> Hello {this.props.name}! Do you like React? </div>;

  }

});

Next, we instruct React to render the component with the name prop, equal to Darek. You can see the effect on the screen.

ReactDOM.render (<Component name = "Darek" />, document.getElementById ("container"));

 

React components - React.Component

How to make the React component - React.Component

React.Component uses ES2015 syntax, which is the latest working JavaScript version based on ECMA guidelines. React components are created using classes just introduced in ES6. We're creating the Component class that extends React components, the new React component.

class Komponent extends React.Component{

    render(){

        return <div> Hello {this.props.name}! Do you like React? </div>;

    }

}
As before, we render, i.e. display the previously created React class on the screen.

ReactDOM.render (<Component name = "Darek" />, document.getElementById ("container"));

 

You have learned the basics of creating React components. The next step will be to further explore the secrets of the React library. I invite you cordially.

);

 

 

More about React.js - you will find in the next parts of my course.

 

 

See similar guides in the side menu for: React library components components creating how to make react component

 

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