nemanja nićiforović stanko tadić to react.pdf · components (instead of mvc) • component based...

22
Meetup February, 2018 Introduction to React Nemanja Nićiforović Stanko Tadić

Upload: others

Post on 22-May-2020

6 views

Category:

Documents


0 download

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

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

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

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

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
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

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

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

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

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

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

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

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

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

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

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

Components • Plain JavaScript, small API

• Props and State

• Virtual DOM

• Unidirectional Data Flow

• RenderersDOM, node (server), native (iOS, Android)

Props

State

Page 17: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components

Hello World!

https://codepen.io/stanko/pen/GyPdLL

Page 18: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components

Simple demohttps://codepen.io/stanko/full/QaBYJP/

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

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

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

Thank You!

Q&A

Page 22: Nemanja Nićiforović Stanko Tadić to React.pdf · Components (instead of MVC) • Component based approach lets us create complicated user interfaces composing smaller components

Work & Cowork.co