nemanja nićiforović stanko tadić to react.pdf · components (instead of mvc) • component based...
TRANSCRIPT
![Page 1: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/1.jpg)
MeetupFebruary, 2018
Introduction to ReactNemanja Nićiforović
Stanko Tadić
![Page 2: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/2.jpg)
Who we are
![Page 3: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/3.jpg)
WHO WE ARE
Nemanja Nićiforović
Technology Director
Stanko Tadić
Principal Developer
https://stanko.github.io
![Page 4: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/4.jpg)
OUR MISSION
Design & develop the digital products people use
every day
![Page 5: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/5.jpg)
![Page 6: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/6.jpg)
Technologies we use
• JavaScript • React • Angular • Node
• Java • Server • Android
• Objective C • Swift • …
React apps we made
![Page 7: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/7.jpg)
Paid Internships
![Page 8: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/8.jpg)
What is React
![Page 9: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/9.jpg)
WHAT IS REACT
A JavaScript library for building user interfaces
![Page 10: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/10.jpg)
Components (instead of MVC)
• Component based approach lets us create complicated user interfaces composing smaller components
• It is easy to “map” data to UI
• React will efficiently update and render just the right components when your data changes
• Declarative views make your code more predictable and easier to debug.
![Page 11: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/11.jpg)
Why React
![Page 12: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/12.jpg)
WHY REACT?
Because it is awesome!
![Page 13: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/13.jpg)
Why React • Library, not a frameworkIt is fairly small and let you choose other tools you want to work with
• Components instead of templatesJSX, JavaScript as a “templating” language
• Simplifies working with DOMReact does it for you
• Large ecosystemJavaScript is leading the popularity charts on GitHub for years
• ModernES6, Babel, Webpack…
• React nativeBuild once deploy across platforms
![Page 14: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/14.jpg)
Who is using it • Facebook• Instagram• Netflix• Apple• Yahoo• Atlassian• New York Times• WhatsApp• Dropbox• …
![Page 15: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/15.jpg)
Components
![Page 16: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/16.jpg)
Components • Plain JavaScript, small API
• Props and State
• Virtual DOM
• Unidirectional Data Flow
• RenderersDOM, node (server), native (iOS, Android)
Props
State
![Page 19: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/19.jpg)
Advanced Stuff
![Page 20: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/20.jpg)
Advanced Stuff • Flux / ReduxData store
• Hot Module ReloadPerformant development
• Universal rendering SEO friendly
• React NativeMobile applications
![Page 21: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components](https://reader034.vdocuments.us/reader034/viewer/2022042222/5ec83557f411c831d22211ea/html5/thumbnails/21.jpg)
Thank You!
Q&A