Od osnova JavaScripta do aplikacije

React for dummies

Predaje: Josip Antoliš

Infobip

nekoliko stotina milijuna SMS poruka dnevno
enterprise web aplikacija u iPhone svijetu
frontend: React + ES6
backend: mikroservisi pisani u javi, groovyu, .net-u, Node.js-u
continuous integration, devops

Zadatak za danas

Napraviti kalkulator valuta kao web aplikaciju.

Za aktualne podatke o tečaju koristiti json API dostupan na fixer.io

Ciljevi

Kod organiziran po komponentama

Alat: React

library za izgradnju korisničkih sučelja

baziran na komponentama

podatci teku odozgora prema dolje

Kompaktan React kod

Alat: JSX

proširenje JavaScripta elementima HTML-a


							//JavaScript sintaksa
							var element = React.createElement(
								'h1',
								{id: 'myId'},
								'Title'
							);


							//JSX sintaksa
							var element = (
								Title
							);

Elegantan JavaScript kod

Alat: ECMAScript 6

nova verzija JavaScripta: class, cosnt, () => {}


							class MyComponent extends React.Component {
								constructor(props) { super(props); } 
								myMethod = (param) => { const a = 5; }
								render() { return Hello, world! ; }
							}

Modularan kod

Alat: ES6 modules

definicije modula i ovisnosti među njima


							import React from 'react';
							import myUtil from './myUtil';

							class MyComponent extends React.Component {
								render() { return  {myUtil()} ; }
							}

							export default MyComponent;