Skip to content

deck.mdx

Latest commit

 

History

History
202 lines (133 loc) · 3.87 KB

deck.mdx

File metadata and controls

202 lines (133 loc) · 3.87 KB
Raw

import { Head, Appear } from 'mdx-deck'

export { default as theme } from './theme' import {CodeBlock} from './components/CodeBlock' import BlueLayout from './components/BlueLayout' import {ComponentBasedContent} from './components/ComponentBasedContent' import Counter from './components/Counter' import { installCra, helloWorldComponent, jsxExample, withoutJsxExample, functionalComponent, classComponent, renderingAComponent, componentWithState, counterComponent, declarativeCode } from './codesnippets'

<title>DevCBali Workshop</title>

export default BlueLayout

Facebook Dev Circle Bali

<img src={require('file-loader!./images/fbdevcircle.png')} />

ReactJS Workshop

Persiapan

  • Daftar Github
  • Install NodeJS
  • Install React dev tools (tersedia di Chrome dan Firefox)

Apa itu React ?

React adalah library untuk membuat user interface

ReactJS

  • Declarative
  • Component Based
  • Learn once, Write anywhere (Node, React Native)

    • Declarative

    Membuat kode lebih mudah di mengerti dan di-debug {declarativeCode}

    Component Based

    http://maketea.co.uk/2014/03/05/building-robust-web-apps-with-react-part-1.html

    React as a Platform

    Learn once, Write anywhere

    React 360 (VR), React Native (Android & iOS), Node

    Membuat project React

    {installCra}

    Hello World

    {helloWorldComponent}

    JSX ?

    {jsxExample} = {withoutJsxExample}

    Props (properties)

    Component dapat menerima input (yang disebut props) dan mengembalikan React element yang mendekripsikan apa yang seharusnya ditampilkan

    Functional Component

    {functionalComponent}

    Class Component

    {classComponent}

    Menampilkan Component

    {renderingAComponent}

    Ingatlah kalau element hanyalah sebuah object jadi bisa disimpan di variable

    State sama dengan props namun bersifat private dan dikontrol penuh oleh Component (dapat diubah)

    Menampilkan State

    {componentWithState}

    Event handling

    {counterComponent}

    Contoh Component dengan State

    React Lifecycle

    Mounting Updating Unmounting
    contructor shouldComponentUpdate componentWillUnmount
    render render
    componentDidMount componentDidUpdate

    Mulai koding

    1. npm install -g create-react-app
    2. create-react-app shopping-cart
    3. Buka link https://github.com/DevCBali/react-shopping-cart-workshop

    Deploy ke Netlify

    1. Push project ke github masing-masing
    2. Buat akun Netlify (bisa dengan github)
    3. Deploy

    React lebih lanjut

    • ES6 (closure, high-order function, arrow function, class, destructure)
    • Functional Programming
    • Router (React Router, Reach Router)
    • Data Management (Redux, Mobx, Apollo, ...)