React podstawy

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

rules:

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

Wykorzystanie:

• 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'
  }
  return(
    <div style={redBoxStyle}>My favorite Red Box</div>
  );
}

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

class MyAllBoxes extends React.Component {
  render() {
    return(
      <div>
        <RedBox/>
        <OrangeBox/>
      </div>
    );
  }
}

ReactDOM.render(
  <MyAllBoxes/>,
  destination
);

 

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

https://reactjs.org/docs/events.html#mouse-events

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