GDP Labs Statistics as of December 2020 3 PARTNERSHIP 50+ projects 70+ clients 26 partners EXPERTISE 1,000+ years of experience 100+ won programming competition 1,400+ years of programming 21,000+ books read 38,000 weekly reports TECHNOLOGY 60+ SaaS used 150+ technologies used 320,000+ articles read INCUBATE STARTUPS COMPANY - Born Cloud-Native 9 years since founded in 2012 200+ talented employees 5 offices in 5 cities 80% engineers 20+ certified people 1600++ trainings taken
glair.ai 5 Products and Services Consulting Service On demand talents capable of crafting customized solutions Analytics Platform An easy & intelligent way to turn your data into insights Training Center We are what we invest
13 React vs Vanilla JS? ● How the UI is first created ● How functionality is split up across the app ● How data is stored on the browser ● How the UI is updated
28 Main Concepts JSX Why JSX? ● It's easier to describe what the UI should look like ● Embraces the fact that rendering logic is inherently coupled with other UI logic
32 Main Concepts Components and Props Rules: ● Start component names with a capital letter ● Props (properties) are read-only ● All React components must act like pure functions with respect to their props
35 Main Concepts Lifecycle ● Mounting instance of a component is being created and inserted into the DOM ● Updating changes to props or state ● Unmounting component is being removed from the DOM
38 Main Concepts State Both props and state changes trigger a render update. So when would you use state? When a component needs to keep track of information between renderings, the component itself can create, update, and use state.
39 Main Concepts State The state starts with a default value when a Component mounts class Counter extends React.Component { constructor() { super(); this.state = { count: 0 }; } render() { ... } }
41 Main Concepts Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. function Example(props) { // You can use Hooks here! return }
43 Main Concepts Hooks function Counter() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( setCount(count + 1)}> Clicked {count} times
) } ● useState call it inside a function component to add some local state to it
44 Main Concepts Hooks function Counter() { // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times` }, [count]) return ( setCount(count + 1)}> Clicked {count} times
) } ● useEffect wrap a function that contains imperative, possibly effectful code
46 Main Concepts Hooks function Counter() { const memoizedValue = useMemo(() => { // computeExpensiveValue is a function with heavy calculation return computeExpensiveValue(count) }, [count]) return ( <> Computation result: {memoizedValue} setCount(count + 1)}> Clicked {count} times
> ) } ● useMemo returns a memoized value, it only recomputes when one of the dependencies has changed
Professional Developments Practical Experience Applied Best Practices Chance to get full-time offering INTERNSHIP PROGRAM GDP Labs @gdplabs [email protected] APPLY NOW! career.catapa.com/GDPLabs/jobs
● Software Development Engineer ● Site Reliability Engineer ● AI Engineer ● Solution Engineer ● CATAPA Business Development ● CATAPA Content Strategist ● GLAIR Account Executive ● Product Marketing ● Windows Server Administrator ● Graphic Designer (UI/UX) ● and many more... JAKARTA • BANDUNG • YOGYAKARTA • SURABAYA • BALI
gdplabs
koic
totokit4
torounit
numeroanddev
fendo181
syossan27
kinocoboy2
os1ma
shioyama
munetoshi
cer
yui_knk
jrom
keathley
brianwarren
lauravandoore
denniskardys
chrislema
moore
addyosmani
carmenintech
brad_frost
revolveconf
lemiorhan