This document contains an agenda and slides for a React workshop presented by Bojan Golubovic. The workshop covers the history and basics of React, including components, JSX, the virtual DOM, and React data flow. It also discusses related tools like Redux and React Router. The goal is to provide basic knowledge of React and how to build real-world applications with it.

1. www.seavus.co
m
Bojan Golubovic
May 2018
React Workshop

2. Agenda
1. Intro
2. Prerequisites
3. React
1. History
2. Stats
3. Virtual DOM
4. JSX
5. Components
6. One-way data flow
4. Redux
5. React Router
6. Real world app building
7. Summary
8. Further reading
Date: May, 2018
Page 2Author: Bojan Golubovic

3. 1. INTRO
Who am I?
Bojan Golubovic
Senior Frontend Developer
In Seavus since May 2016.
bojan.golubovic@seavus.com
https://github.com/bgolubovic
https://twitter.com/bgolubovic
https://www.linkedin.com/in/golubovicbojan/
https://codepen.io/bgolubovic/
Date: May, 2018
Page 3Author: Bojan Golubovic

4. 1. INTRO
What will be on this workshop?
• What is React?
• Getting started and introduction to React
• Basics and core of React
• Use Redux
• React router
THE GOAL: Have basic knowledge of React!
Hope you enjoy it and learn a lot about React!
Date: May, 2018
Page 4Author: Bojan Golubovic

5. 2. PREREQUISITES
Date: May, 2018
Page 5Author: Bojan Golubovic

6. 3. REACT
History:
• React was created by Jordan Walke, a software engineer at
Facebook.
• It was first deployed on Facebook's newsfeed
• Current version: v16.3.2
“Actually it's the best way how to create a good framework - solve
your problem and use your tool!” - Tim Voronov
https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/
Date: May, 2018
Page 6Author: Bojan Golubovic

7. 3. REACT
History timeline:
• 2010 - The first signs of React.
• 2011 - An early prototype of React - FaxJs.
• 2012 - Something new had started at Facebook - Instagram.
• 2013 - The year of the Big Launch - React gets open sourced.
• 2014 - The year of Expansion.
• 2015 - React is Stable.
• 2016 - React gets mainstream.
• 2017 - The year of further improvements.
Date: May, 2018
Page 7Author: Bojan Golubovic

8. 3. REACT
Stats:
Date: May, 2018
Page 8Author: Bojan Golubovic

9. 3. REACT
More stats:
• #Facebook
• #Instagram
• #Netflix
React is the 5th most starred project of all time on GitHub.
Date: May, 2018
Page 9Author: Bojan Golubovic

10. 3. REACT
More stats:
Date: May, 2018
Page 10Author: Bojan Golubovic

11. 3. REACT
React - ReactJS - React.js
What?
React is a JavaScript library for building user interfaces.
Why?
Maintainable, manageable and reusable code.
• UI state becomes difficult to handle
• Focus on business logic
• Big community
• Huge ecosystem
How?
Splitting into components.
Date: May, 2018
Page 11Author: Bojan Golubovic

12. 3. REACT
Single page application
• Only one HTML page render on
client side.
• One ReactDOM.render() call.
Date: May, 2018
Page 12Author: Bojan Golubovic
Multi page application
• Multi HTML page render, content is
rendered on server side.
• One ReactDOM.render() call but per
‘widget’ - component.
• React router.

13. 3. REACT
Virtual DOM
What is the Virtual DOM?
• The virtual DOM (VDOM) is a programming concept where an ideal, or
“virtual”, representation of a UI is kept in memory and synced with the
“real” DOM by a library such as ReactDOM. This process is called
reconciliation.
• This approach enables the declarative API of React: You tell React what
state you want the UI to be in, and it makes sure the DOM matches that
state.
• Rather than touching the DOM directly, we’re building an abstract version
of it. That’s it. We working with some kind of lightweight copy of our DOM.
We can change it as we want and then save to our real DOM tree. While
saving we should compare, find difference and change (re-render) what
should be changed.
• It is much faster than working directly with DOM, because it doesn’t
require all the heavyweight parts that go into a real DOM.
Date: May, 2018
Page 13Author: Bojan Golubovic

14. 3. REACT
Virtual DOM
Date: May, 2018
Page 14Author: Bojan Golubovic

15. 3. REACT
Virtual DOM
Date: May, 2018
Page 15Author: Bojan Golubovic

16. 3. REACT
Virtual DOM Examples
https://jscomplete.github.io/react-virtual-dom-demo/demo/
https://www.youtube.com/watch?v=-DX3vJiqxm4
Date: May, 2018
Page 16Author: Bojan Golubovic

17. 3. REACT
JSX
• JSX is an XML-like syntax extension to ECMAScript without any
defined semantics. It's NOT intended to be implemented by engines
or browsers. It's NOT a proposal to incorporate JSX into the
ECMAScript spec itself. It's intended to be used by various
preprocessors (transpilers) to transform these tokens into standard
ECMAScript.
• Neither a string nor HTML
• HTML and JS (presentation and logic) is more of a separation of
technologies rather than concerns.
https://reactjs.org/
Date: May, 2018
Page 17Author: Bojan Golubovic

18. 3. REACT
Components
• Components let you split the UI into independent, reusable pieces,
and think about each piece in isolation.
• Conceptually, components are like JavaScript functions. They
accept arbitrary inputs (called “props”) and return React elements
describing what should appear on the screen.
• React is all about writing and creating components.
• Components can be imagine as a custom HTML elements.
Date: May, 2018
Page 18Author: Bojan Golubovic

19. 3. REACT
Component life cycles
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
Date: May, 2018
Page 19Author: Bojan Golubovic

20. 3. REACT
One-way data binding
• React doesn't have a mechanism to allow the HTML to change the
component. The HTML can only raise events that the component
responds to.
Date: May, 2018
Page 20Author: Bojan Golubovic

21. 4. REDUX
• Redux is a predictable state container for JavaScript apps.
• Motivation: Our code must manage more state than ever before.
• Redux attempts to make state mutations predictable by imposing
certain restrictions on how and when updates can happen.
• Core concept: App’s state is described as a plain object.
Date: May, 2018
Page 21Author: Bojan Golubovic

22. 4. REDUX
Date: May, 2018
Page 22Author: Bojan Golubovic
Three Principles
1. Single source of truth:
The state of your whole application is stored in an object tree within
a single store.
1. State is read-only:
The only way to change the state is to emit an action, an object
describing what happened.
1. Changes are made with pure functions:
To specify how the state tree is transformed by actions, you write
pure reducers.

23. 4. REDUX
Date: May, 2018
Page 23Author: Bojan Golubovic
Data flow

24. 5. REACT ROUTER
• Routing that takes place as your app is rendering, not in a
configuration or convention outside of a running app. That means
almost everything is a component in React Router.
Date: May, 2018
Page 24Author: Bojan Golubovic

25. 6. REAL WORLD APP
React Redux
Date: May, 2018
Page 25Author: Bojan Golubovic

26. 7. SUMMARY
• In essence, the ReactJS interface is different than other js libraries
which are more imperative, meaning you tell them to change the
DOM directly. Jquery is like this. ReactJS is more like: here is my
state, and here is how you should interpret my state and how it will
change. Now, I can sit back and let ReactJS handle the expensive
and complicated task of making this visible to the user in the
browser.
• Philosophy of React is a philosophy of components. Once you
understand components you understand React.
Date: May, 2018
Page 26Author: Bojan Golubovic

27. 8. FURTHER READING
• https://reactjs.org/docs - React official website documentation
• https://redux.js.org/ - Redux official website
• https://reacttraining.com/react-router/ - React Router
• https://github.com/facebook/create-react-app - Create React App
• http://aimforsimplicity.com/post/13-things-you-need-to-know-about-
react/
• https://www.youtube.com/watch?v=x7cQ3mrcKaY&t=368s - Pete
Hunt: React: Rethinking best practices -- JSConf EU 2013
• https://evilmartians.com/chronicles/optimizing-react-virtual-dom-
explained
• https://hackernoon.com/structuring-projects-and-naming-
components-in-react-1261b6e18d76
Date: May, 2018
Page 27Author: Bojan Golubovic

28. Date: May, 2018
Page 28Author: Bojan Golubovic

29. www.seavus.co
m
Thank
You