React podstawy

React blured separation of concerns
style within component
bug easy to locate -in one file
self contained component


  1. create JS Object – properties and values of this object will be aur css properties and their styles
  2. assign Object to attribute of element to style

JSX – to evaluate expression wrap in {}


sposoby dodania stylów:

  • external stylesheet
  • within component

COmplex components

  • combining components


use stateless functional components when you do not need additional features of Class Components

React Props


map and filter
Dodanie class do elementu poprzez className

<h1 className="myClass">Hello World</h1>

Metoda ReactDOM.render() przyjmuje tylko jeden element, aby zamiescic więcej musza one być dziecmi elementy nadrzednego.

Uruchomienie z wykorzystaniem bibliotek:

  • react.js
  • react-dom.js
  • babel.min.js


  • Stateless Functional Components – nazwa z dużej litery, np. RedBox
  • Classe Components – nazwa z dużej litery, np. RedBox
  • style dodane jako obiekt np. style={myStyle}
var destination = document.getElementById("app");

var RedBox = function() {
  var redBoxStyle = {
    height: 50,
    width: 150,
    backgroundColor: 'red'
    <div style={redBoxStyle}>My favorite Red Box</div>

class OrangeBox extends React.Component {
  render() {
    var orangeBoxStyle = {
      backgroundColor: 'orange',
      width: 150,
      height: 150
      <div style={orangeBoxStyle}>My favorite Orange Box</div>

class MyAllBoxes extends React.Component {
  render() {



Lista w React musi mieć unikalny keyion


React events:

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic  differences:

React events are named using camelCase, rather than lowercase

With JSX you pass a function as the event handler, rather than a string.

Event handler – function that should run whenever an event occurs

cotext – „on” or „handler” element action

Naming convenction:

  • begin with „on” or „handle”
  • name the DOM element
  • describe the expected action


This & Bind

in JS – in most cases, the value of „this” is determined by how a function is called. It can’t be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind method to set the value of a function’s „this” regardless of how it’s called.

Bind creates a new function that will have „this” set to the first parameter passed to bind().


object literal – let cat = {}

React State


constructor method – special function for ES6 classes in JS

Whenever an object is created via a class in JS, JS invokes the constructor function


React will invoke the constructor with the props and context of the component.


super keyword – this invokes the constructor function defined by React.Component which executes unnecessary set up code for our component is important to call super whenever  we define a constructor function.


if you would like to set a  property or access „this” inside the constructor you need to call super()


fat arrow function preserve this context when they’re called we are



fetch() method – takes one mandatory argument, the path to the resource you want to fetch. It returns a promise that resolves to the Response to that request, whether it is successful or not