I am Rully Ramanda ruliarmando krooco@gmail.com ruliarmandoLead Web Developer @rullyramanda
Objectives ● What is React ● Who is using React ● Core concept of React ● Why React ● How to use React
What is React?
What React is a library for building user interfaces
It is the V of the MVC
Traits ● Declarative ● Component-based ● Learn once, write anywhere
Declarative Saying what you want Imperative Saying how to achieve it
Declarative Imperative A tower of 3 blocks 1. Put down block A 2. Put down block B on A 3. Put down block C on B
Component based
Write once, run anywhere It’s Java
Learn once, write anywhere
React Native
React VR
Who use React? International
Who use React? Local
REACT CORE CONCEPTS
Core Concepts Components Virtual DOM One way data flow
Components
DOM VS Virtual DOM VS
The Story of DOM http://www.learnreact.design/2017/06/08/what-is-react/
The end of story
React with JSX React without JSX
React puts HTML in JS Other frameworks puts JS in HTML
How it works?
One way data flow
Data flow (simplified)
Flux pattern
Redux
So why you should use React?
Learn Once Write Anywhere Browser Android iOS Windows Desktop Windows Phone Tizen XBOX Netflix
Virtual DOM is crazy fast!
Component based is the future!
Great debugging tools https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Great debugging tools
Live reloading (How cool is that?)
Live reloading (web)
Why? Maintained by the Facebook itself Not me of course!!
Increasing job trends
Getting started with React
Tools
The easier way
create-react-app ● npm install -g create-react-app ● create-react-app <app_name> ● cd <app_name> ● npm start / npm run build
create-react-app
Let’s do some React live coding
http://bit.do/coba-react
Component Lifecycle
Must have libraries
Styling libraries (CSS in JS)
Some cool UI libraries
http://www.material-ui.com/#/
https://react-bootstrap.github.io/
https://ant.design/
http://blueprintjs.com/
Go check https://github.com/enaqx/awesome-react For more cool libraries
That’s it.
Thank You!
Q&A
is hiring Send your CV to hrd@medicaboo.com

React web development