Downloaded 145 times
More Related Content
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to React workshop presentation
React workshop presentation
- 1.
- 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 amI? 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 willbe 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: • Reactwas 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 pageapplication • 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 Whatis 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 DOMExamples 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 • JSXis 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 • Componentslet 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 lifecycles http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ Date: May, 2018 Page 19Author: Bojan Golubovic
- 20. 3. REACT One-way databinding • 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 • Reduxis 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 WORLDAPP React Redux Date: May, 2018 Page 25Author: Bojan Golubovic
- 26. 7. SUMMARY • Inessence, 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 Page28Author: Bojan Golubovic
- 29.