46 | 47 |
48 |-
3 |
4 |
5 |
6 |
7 |
8 |
9 | **[Prezentace React prakticky](https://docs.google.com/presentation/d/1yuErzAASiDOWwvsODUVOPF1E8Xb6ji8LBqbcVSLp2zw/edit?usp=sharing)**
10 |
11 |
12 | ## Praktická část
13 |
14 | V praktické části práce jsme vyvíjeli aplikaci pro vytváření flashcards. Zdrojový kód a funkční specifikaci appky najdete v samostatném repozitáři [react-workshop-flashcards](https://github.com/webdev-js-evenings/react-workshop-flashcards).
15 |
16 | ## Zajímavé odkazy týkající se Reactu
17 |
18 | - [React patterns, techniques, tips and tricks](https://github.com/vasanthk/react-bits)
19 | - [JS.coach - vyhledávání React balíčků](https://js.coach/react)
20 | - [Awesome React - vyčerpávající list všeho skvělého pro React](https://github.com/enaqx/awesome-react)
21 |
--------------------------------------------------------------------------------
/pt.4-React-sprava-stavu/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "react-app",
3 | "rules": {
4 | "semi": 0
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/pt.4-React-sprava-stavu/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 |
19 |
--------------------------------------------------------------------------------
/pt.4-React-sprava-stavu/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Naučte se React.js 5 - na Redux
4 | V téhle části si **pomalu** vysvětlíme proč se používá v React to, co se používá a proč to né zcela pasuje na možné známější backendové aplikace.
5 |
6 | Prostě si opravdu napíšeme vlastní plnohodnotný balíček pro práci se stavem, vlastně takový Redux.
7 |
8 | OK, né zas tak rychle. V první řadě si je třeba ukázat v čem je problém.
9 |
10 | S Petrem jsme si konečně napsali docela pěknou aplikačku, která vám třeba pomůže v učení se té hrozné haldy pojmů okolo Javascriptu, že?
11 |
12 | Takže se dá říct, že práce s komponentami už tak nějak zvládáme a můžeme se vrhnout na to trošku komplikovanější a to je konečně celá aplikace.
13 |
14 | ## Co je to aplikace
15 | Každá aplikace se skládá ze tří částí, které můžou mít různé názvy, ale v zásadě se ustálilo označení:
16 | * M - model
17 | * V - view
18 | * C - controller
19 | ---------------
20 | * S - service
21 |
22 | Věřte tomu nebo ne. Ekosystém okolo Reactu též ctí toto uspořádání, ačkoli se dá hovořit o nějakém to [CQRS](https://martinfowler.com/bliki/CQRS.html) nebo co to je.
23 | Každopádně bych se rát pohyboval v přátelštějších prostředí než se koukat do nějakého šíleného computer science.
24 |
25 | Pod čáru jsem ještě přidal zmínku o `Service`. Prostě servisy. Takový typ "třídy" se v aplikacích též hojně vyskytuje a má celou řadu vyjímečností...
26 |
27 | ### Jak se co nazývá v Reactu
28 | Když jsme psali Reactí komponenty, tak bylo zvykem mít tu velkou root komponentu naplněnou stave `state`. V takovém případě takováto komponenta vlastně
29 | zastává práci modelu a zároveň i kontroloru. Může dokonce zastávat i funkci view, pokud celá šablona bude vypsána v téhle jedné komponentně.
30 | To ale jistě není rozumnější.
31 |
32 | Takže narvat si tři části aplikaci do jedné "šablony" je samozřejmě zvláštní nápad, protože jasně mícháme něco, co má zcela jiné odpovědnosti, že? Takže se pustíme do rozsekávání nějaké masivní komponenty plné stavu.
33 |
34 | Kde začít? Nejsnažší je pro začátek vzít veklkou komponentu, která vykresluje všechno a udělat z ní "kontroler" ve terminologie Reactu z ní můžeme udělat Root komponentu nebo "chytrou" komponentu, která drží handlery callbacků a stav.
35 |
36 | Takže můžeme z ní udělat třeba něco takovéhleho:
37 | ```js
38 | export default class StatefulComponent extends Component {
39 | state = {
40 | todos: [
41 | { id: 1, text: 'Nákup pro maminku na SváTek maTek' },
42 | { id: 2, text: 'Nakoupit na víkendovou kalbu 2 kila lososa rozpejkací bagetky' },
43 | ],
44 | user: {
45 | name: 'Vojta',
46 | email: 'vojta.tranta@gmail.com',
47 | id: 666,
48 | },
49 | time: Date.now(),
50 | formValue: '',
51 | }
52 |
53 | _handleTick = (time) => {
54 | this.setState({
55 | time,
56 | })
57 | }
58 |
59 | _handleFormChange = (nextValue) => {
60 | this.setState({
61 | formValue: nextValue,
62 | })
63 | }
64 |
65 | _handleFormSubmit = () => {
66 | this.setState({
67 | todos: [{
68 | 'id': Date.now(),
69 | text: this.state.formValue,
70 | }].concat(this.state.todos),
71 | formValue: '',
72 | })
73 | }
74 |
75 | render() {
76 | return (
77 |
78 |
95 | );
96 | }
97 | }
98 |
99 | ```
100 | Je to jednoduché, místo toho, aby komponenta renderovala všechno, tak si vybere jen pár elementů a pak je vypíše, předá jim správná props a povídá si s nimi přes callbacky v props.
101 |
102 | Takováto architektura může připomínat klasický `Presenter` nebo `Controller`, který můžete znát z jiných jazyků či frameworků:
103 | ```php
104 | class Controller extends BaseController {
105 | function __construct($todoFacade, $context) {
106 | $this->todoFacade = $todoFacade;
107 | $this->context = $context;
108 | }
109 |
110 | public function index($request) {
111 | return $this->_createResponse($request, 'templates/index', [
112 | 'page_title' => 'Index page!',
113 | 'todos' => $this->todoFacade->getTodos($request.get('page')),
114 | ]);
115 | }
116 | }
117 | ```
118 | Tohle je příklad v PHP. Tak nějak vypadá nějaký typický kontroler, který vykresluje indexovou stránku pomocí šablony, který je umístěná v `templates/index`. Data do ní cpe z nějaké databázové fasády `TodoFacade`.
119 |
120 | Podobně funguje i rootová reaktí komponenta. Sebere data a narve je do šablony. Šablony jsou v tomto případě nějaké nižší jednodušší komponety, které z pravidla nedrží stav a jen využívají props.
121 |
122 | Tedy závěrem můžeme jednoduše říci, že "chytrá" komponenta tedy taková, která má stav a realizuje callbacky z potomků a rozdává do nich props je vlastně takový controller tj. v MVC zaujímá písmenko C.
123 |
124 | Hloupé komponenty jsou naproti tomu takové, která pouze přímají props a přes callbacky si povídají se svými předky. Předkům jsou tudíž plně podrobeny. Můžeme o nich tedy říct, že jsou to views, tedy V v MVC struktuře.
125 |
126 | ### A co "M"?
127 | M je tedy model, jak se řeší modelová vrstva v reactových aplikacích?
128 |
129 | Pomůžeme si zase příkladem ze známého světa PHP. Máme-li formulář, kde je například vypsán uživatelův profil, tak tento formulář často odpovídá jedné řádce tabulce v databázi, která se typicky jmenuje `user` nebo `user_profile`. Jakmile zde upravíme nějaká data, a odešleme formulář, tak se celá stránka překreslí a my vidíme nový stav uživatelova profilu, jasné jako facka?
130 |
131 | Tohle v SPA aplikacích ale samozřejmě nechceme. Proč bychom kvůli změně jednoho políčk překreslovali celou stránku, když by stačilo změnit pouze jednu hodnotu inputu, že.
132 |
133 | Jak to tedy udělat. Budeme tedy mít nějakou instanci modelu `User` a všechny komponenty na ní budou poslouchat, jak se mění, že?
134 |
135 | No, tak to úplně není. Každý model by musel být v tom případě nějaký event emitter a museli bychom ručně registrovat nebo odregistrovávat posluchače na tuto jednu instanci, která se navíc může v průběhu času měnit.
136 |
137 | To by bylo trošku šílené.
138 |
139 | Samotnout ideu modelu už v sobě mají Reactí komponenty zabudovanou. Je to property `state` a metoda `setState()`.
140 |
141 | Zajímavé na tom je, že React se nesnaží vytváře nějaký Event emitter, vůbec se s ním v Reactových komonentách nesetkáte.
142 |
143 | Pokud chcete změnit stav, prostě zavoláte `setState()` a to je všechno. Komponenta se sama překreslí a tím pádem aktualizuje i všechny svoje "děti", které vykresluje v metodě render.
144 |
145 | Samozřejmě tohle není ideální a perfektní řešení z hlediska výkonu, ale z hlediska jednoduchosti není co vytknout, potřebuju-li změnit stav, tak to prostě udělám.
146 |
147 | Model je tedy vyřešený?
148 |
149 | ### View != Model
150 | Už staří Egypťané ve svých hyeroglifech varovali před tímto:
151 | ```php
152 |
156 |
157 |
79 | 
80 |
83 | Webdev React!!
81 |Stateful component
84 |A list of todos
85 | 89 |-
90 | {this.state.todos.map(todo => {
91 | return
| 166 | 167 | |
282 |
299 | )
300 | }
301 | ```
302 | Ok, takže stav máme mimo komponentu, teď ještě jeho změny.
303 |
304 | ### Sémantické a nesémantické callbacky
305 | Asi jsem jediný na světě, kdo této záležitosti dal tak debilní jméno. Jaké záležitosti?
306 |
307 | Podívejme se na tyto dvě komponenty:
308 | ```js
309 |
310 | const Form = ({ children, onSubmit }) => (
311 |
315 | )
316 |
317 | const UserForm = ({ onRegisterUserReqest }) => {
318 | let input
319 | const _handleFormSubmit = () => {
320 | const userName = input.value
321 | onRegisterUserReqest(userName)
322 | }
323 |
324 | return (
325 |
283 |
284 |
287 | Webdev React!!
285 |Stateful component
288 |A list of todos
289 | 293 |-
294 | {state.todos.map(todo => {
295 | return
326 |
332 | )
333 | }
334 | ```
335 | Co konkrétně tyto komponenty dělají není příliš podstatné. Jen si ale všimněme, že komponenta `Form` bere callback `onSubmit`. To je prostě obecný callback, pokaždý, když se formulář submitne, tak se tento callback zavolá a je jedno, jaká data jsou ve formuláři, jestli to je formulář pro přidání todo a nebo formulář pro přidání nového uživatele.
336 |
337 | Zatímco "chytřejší" komponent `UserForm` bere callback `onRegisterUserRequest`. Tenhle callback už podle názvu značí co se daty bude dít po jejich odeslání. Ale ve své podstatě je to prostě jenom další `onSubmit` callback a nic víc.
338 |
339 | Já tedy takovýmto callbackům říkám `sémantické` neboť mi v aplikaci řeší nějkaou byznys logiku. Zatímco `nesémantické` callbakcy jako třeba `onSubmit`, `onClick`, `onFocus` mi neříkají nic o tom, co se má stát, když se zavolají, prostě bylo na něco kliknuto nebo něco bylo submitnuto, nic víc.
340 |
341 | Důvod, proč tyhle callbacky odlišuji je ten, že `sémantické` callbacky by se měly vyskytovat jen na úrovni `sémantické` komponenty. Zatímco jejím hloupým dětem (ahoj mami) by mělo bejt šumafuk, co se děje s daty, která odesílají či přijímají.
342 |
343 | A co je sémantická komponenta? Však to je jednoduché.
344 | Tohle je například nesémantická komponenta:
345 | ```js
346 | const ListItem = ({ title, body, children, id, onClick }) => (
347 | Registration:
327 | 331 |350 |
body
351 | {children} 352 |
46 |
63 | )
64 | }
65 |
66 |
67 | const setTime = (nextTime) => {
68 | return {
69 | time: nextTime,
70 | }
71 | }
72 |
73 | const setTodoDraft = (todoDraft) => {
74 | return {
75 | formValue: todoDraft,
76 | }
77 | }
78 |
79 | const addTodo = (event, state) => {
80 | return {
81 | todos: [{
82 | 'id': Date.now(),
83 | text: state.formValue,
84 | }].concat(state.todos),
85 | formValue: '',
86 | }
87 | }
88 |
89 |
90 | export default createApp(StateLessComponent)(initialState, {
91 | addTodo,
92 | setTime,
93 | setTodoDraft,
94 | })
95 |
--------------------------------------------------------------------------------
/pt.4-React-sprava-stavu/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/pt.4-React-sprava-stavu/src/stateful-component/stateful-component.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import logo from '../logo.svg';
3 | import '../App.css';
4 |
5 | import Clock from '../clock'
6 | import Form from '../todo-form/form'
7 | import Todo from '../todo-form/todo'
8 |
9 |
10 |
11 | export default class StatefulComponent extends Component {
12 | state = {
13 | todos: [
14 | { id: 1, text: 'Nákup pro maminku na SváTek maTek' },
15 | { id: 2, text: 'Nakoupit na víkendovou kalbu 2 kila lososa rozpejkací bagetky' },
16 | ],
17 | user: {
18 | name: 'Vojta',
19 | email: 'vojta.tranta@gmail.com',
20 | id: 666,
21 | },
22 | time: Date.now(),
23 | formValue: '',
24 | }
25 |
26 | _handleTick = (time) => {
27 | this.setState({
28 | time,
29 | })
30 | }
31 |
32 | _handleFormChange = (nextValue) => {
33 | this.setState({
34 | formValue: nextValue,
35 | })
36 | }
37 |
38 | _handleFormSubmit = () => {
39 | this.setState({
40 | todos: [{
41 | 'id': Date.now(),
42 | text: this.state.formValue,
43 | }].concat(this.state.todos),
44 | formValue: '',
45 | })
46 | }
47 |
48 | render() {
49 | return (
50 |
47 |
48 |
51 | Webdev React!!
49 |Just a Component
52 |A list of todos
53 | 57 |-
58 | {state.todos.map(todo => {
59 | return
51 |
68 | );
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/pt.4-React-sprava-stavu/src/stateless-component/business-logic.js:
--------------------------------------------------------------------------------
1 | export const setTime = (time) => {
2 | return {
3 | time,
4 | }
5 | }
6 |
7 | export const setFormValue = (nextValue) => {
8 | return {
9 | formValue: nextValue,
10 | }
11 | }
12 |
13 | export const addNewTodo = (formValue, todos) => {
14 | return {
15 | todos: [{
16 | 'id': Date.now(),
17 | text: formValue,
18 | }].concat(todos),
19 | formValue: '',
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/pt.4-React-sprava-stavu/src/stateless-component/stateless-component.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import logo from '../logo.svg';
3 | import '../App.css';
4 |
5 | import Clock from '../clock'
6 | import Form from '../todo-form/form'
7 | import Todo from '../todo-form/todo'
8 |
9 |
10 |
11 | const createApp = (AppComponent) => (state) => {
12 | return class extends React.PureComponent {
13 | state = state
14 |
15 | _updatState = (stateUpdate) => {
16 | this.setState(stateUpdate)
17 | }
18 |
19 | render() {
20 | const props = {
21 | ...this.state,
22 | updateState: this._updatState,
23 | }
24 |
25 | return
52 |
53 |
56 | Webdev React!!
54 |Stateful component
57 |A list of todos
58 | 62 |-
63 | {this.state.todos.map(todo => {
64 | return
56 |
73 | )
74 | }
75 |
76 |
77 |
78 | export default createApp(StateLessComponent)({
79 | todos: [
80 | { id: 1, text: 'Nákup pro maminku na SváTek maTek' },
81 | { id: 2, text: 'Nakoupit na víkendovou kalbu 2 kila lososa rozpejkací bagetky' },
82 | ],
83 | user: {
84 | name: 'Vojta',
85 | email: 'vojta.tranta@gmail.com',
86 | id: 666,
87 | },
88 | time: Date.now(),
89 | formValue: '',
90 | })
91 |
--------------------------------------------------------------------------------
/pt.4-React-sprava-stavu/src/todo-form/form.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 |
4 | export default ({ value, onChange, onSubmit }) => {
5 | const handleFormSubmit = (e) => {
6 | e.preventDefault()
7 | onSubmit(e)
8 | }
9 |
10 | return (
11 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/pt.4-React-sprava-stavu/src/todo-form/todo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 |
4 | export default ({ todo, onClick }) => (
5 |
57 |
58 |
61 | Webdev React!!
59 |Stateless component
62 |A list of todos
63 | 67 |-
68 | {state.todos.map(todo => {
69 | return
13 |
22 | )
23 | }
24 | }
25 |
26 | export default connect({}, {})(App);
27 |
--------------------------------------------------------------------------------
/pt.5-React-redux/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
14 |
17 | Faktury
15 |
18 |
21 | Daně
19 |
28 |
29 |
30 |
31 |
54 |
56 | )
57 | }
58 | }
59 |
60 | export default connect({}, actions)(InvoiceTable)
61 |
--------------------------------------------------------------------------------
/pt.5-React-redux/src/components/modal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 |
4 | export default ({ children, title, onHideRequest }) => {
5 | return (
6 | | # | 33 |Odběratel | 34 |Částka | 35 |DPH | 36 |Celkem | 37 |
|---|---|---|---|---|
| {invoice.id} | 44 |{invoice.customer} | 45 |{invoice.price} | 46 |{invoice.VAT} | 47 |{invoice.total} | 48 |
7 |
8 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/pt.5-React-redux/src/components/taxes-calculator.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 |
4 | const TaxesCalculator = ({ income, tax, taxRatio, costsRatio }) => {
5 |
6 | return (
7 |
9 | {title &&
12 | {title}
} 10 |{children}
11 | | Příjem | {income.toLocaleString()},- | 11 |
| Nákladový paušál | 14 |15 | 19 | | 20 |
| Náklady {costsRatio}% | 23 |35000,- | 24 |
| Základ daně | 27 |70000,- | 28 |
| Daň {taxRatio}% | 31 |{tax.toLocaleString()},- | 32 |
13 |
22 | )
23 | }
24 | }
25 |
26 | export default connect({}, {})(App);
27 |
--------------------------------------------------------------------------------
/pt.6-React-advanced-redux/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
14 |
17 | Faktury
15 |
18 |
21 | Daně
19 |
29 |
30 |
31 |
32 |
58 |
60 | )
61 | }
62 | }
63 |
64 | export default connect({}, actions)(InvoiceTable)
65 |
--------------------------------------------------------------------------------
/pt.6-React-advanced-redux/src/components/lazy-load.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { snapShotToArray } from '../utils'
4 |
5 |
6 |
7 | export default class LazyLoad extends React.PureComponent {
8 | static contextTypes = {
9 | database: React.PropTypes.object.isRequired,
10 | }
11 |
12 | state = {
13 | error: null,
14 | loading: false,
15 | result: null,
16 | }
17 |
18 | componentDidMount() {
19 | this.setState({ loading: true })
20 | this.context.database.ref(this.props.table).once('value').then((result) => {
21 | this.setState({ result: snapShotToArray(result), loading: false })
22 | })
23 | .catch((error) => {
24 | console.error('LazyLoad error ->', error)
25 | this.setState({ error })
26 | })
27 | }
28 |
29 | render() {
30 | if (this.state.loading) {
31 | return this.props.loadingComponent || null
32 | }
33 |
34 | if (this.state.error) {
35 | return this.props.errorComponent || null
36 | }
37 |
38 | if (this.state.result) {
39 | return this.props.children(this.state.result)
40 | }
41 |
42 | return null
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/pt.6-React-advanced-redux/src/components/modal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 |
4 | export default ({ children, title, onHideRequest }) => {
5 | return (
6 | | # | 34 |Odběratel | 35 |Částka | 36 |DPH | 37 |Celkem | 38 |
|---|---|---|---|---|
| {invoice.id} | 47 |{invoice.customer} | 48 |{invoice.price},- | 49 |{invoice.vat},- | 50 |{Number(invoice.total || 0).toLocaleString()},- | 51 |
7 |
8 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/pt.6-React-advanced-redux/src/components/taxes-calculator.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 |
4 | const TaxesCalculator = ({ income, tax, taxRatio, costsRatio }) => {
5 |
6 | return (
7 |
9 | {title &&
12 | {title}
} 10 |{children}
11 | | Příjem | {income.toLocaleString()},- | 11 |
| Nákladový paušál | 14 |15 | 19 | | 20 |
| Náklady {costsRatio}% | 23 |35000,- | 24 |
| Základ daně | 27 |70000,- | 28 |
| Daň {taxRatio}% | 31 |{tax.toLocaleString()},- | 32 |
25 |
)
36 | }
37 | }
38 |
39 |
40 | class App extends Component {
41 | render() {
42 | return (
43 | {this.props.component.name || this.props.component.type}
26 |
27 |
29 |
30 |
32 |
33 | {component}
34 |
35 |
44 |
49 | );
50 | }
51 | }
52 |
53 | export default App;
54 |
--------------------------------------------------------------------------------
/styleguide/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(Styleguide
45 | {this.props.components.map(Component => { 46 | return
35 | {props.fields.map(field => {
36 | return (
37 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/styleguide/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/styleguide/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import Button from './components/button'
5 | import './index.css';
6 |
7 | const Pozdrav = (props) => {
8 | return (
9 |
38 |
39 |
40 |
41 | )
42 | })}
43 | {`Pozdrav: ${props.name || 'Nikoho'}` }
10 | ) 11 | } 12 | Pozdrav.propTypes = { 13 | name: React.PropTypes.string, 14 | } 15 | 16 | 17 | const DropDown = (props) => { 18 | console.log(props) 19 | return ( 20 |
21 |
24 |
32 | )
33 | }
34 | DropDown.propTypes = {
35 | collapsed: React.PropTypes.bool,
36 | }
37 |
38 |
39 |
40 | const appState = {
41 | components: [Button, DropDown, Pozdrav],
42 | }
43 |
44 |
45 |
46 |
47 |
48 | ReactDOM.render(
49 | -
25 |
- Action 26 |
- Another action 27 |
- Something else here 28 | 29 |
- Separated link 30 |