fullstack js workshop

Fullstack JS WorkshopFront End Session

Mar 5th, 2017 @ Fak MIPA UGM

About Me

Muhammad Rizki RijalJS dev @wonderlabs, JS Enthusiast

React JS

Why we use react?

coz it’s cool right?ps: and hype

What is React?

It’s super cool UI library right?

React is a JavaScript library for building user interfaces.

Declarative

Component-based

Learn once, write anywhere

Declarative

Component-based

Learn once, write anywhere

I want a fancy button, when it get clicked its color and text will be changing back and

forth

Imperative Way

Declarative Way

Declarative

Component-based

Learn once, write anywhere

Declarative

Component-based

Learn once, write anywhere

https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7#.bj6xlq84o

Super Stupidly Simple React App

JSX (HTML in JS?)

Embedding Expression

Specifying Attributes

Specifying Children

Embedding Expression

Specifying Attributes

Specifying Children

ProductItem.js

ProductItem.css

Embedding Expression

Specifying Attributes

Specifying Children

Embedding Expression

Specifying Attributes

Specifying Children

All About Components

Class Component

Functional Component

<CommentList />

<Comment />

<Comment />

<CommentList />

<User />

<User />

<Comment />

<Comment />

<CommentList />

fiddle link

fiddle link

<User />

<User />

fiddle link

<Comment />

<Comment />

<User />

<User />

fiddle link

<CommentList />

<Comment />

<Comment />

<User />

<User />

fiddle link

Props & State

Basically react has two types of data, props and state

Props is read-only dataAlso it can be used to pass an event/data change handler

State is where to store data that is going to change

later on we can update component’s state with

setState()

Data Flow

fiddle link

fiddle link

“Store”

fiddle link

“View”

fiddle link

“Action”

fiddle link

Another Example

Component Life Cycle Hooks

Think of it like your daily schedule

Mounting

- constructor(props)

- componentWillMount()

- componentDidMount()

Updating

- componentWillReceiveProps(nextProps, prevProps)

- shouldComponentUpdate(nextProps, nextState)

- componentWillUpdate(nextProps, nextState)

- componentDidUpdate()

Unmounting

- componentWillUnmount()

What We Gonna Build

Folder Structure

/chat-bot /node_modules /public index.html /src /components /pages /lib App.css App.js index.css index.js package.json

<Navbar />

<Navbar />

<ChatWindow />

<Navbar />

<ChatWindow />

<MessageInput />

<Navbar />

<ChatWindow />

<MessageInput />

<MessageList />

<Navbar />

<ChatWindow />

<MessageInput />

<MessageList />

<Message />

<Navbar />

<ChatWindow />

<MessageInput />

<MessageList />

<Message />

<App />

Let’s get started!

Clone UI Template

https://github.com/wonderlabshq/js-workshop-html

Dependencies

- Create React App

$ npm i -g create-react-app

$ npm i -S moment axios

- Moment (for date creation and formatting)

- Axios(Perform request to backend)

App Component State Schema

{

messages: [

{

“author”: “Me”, // “Me” or “Bot”

“text”: “Hello!”, // Message body

“createdAt”: “Sat Mar 04 2017 20:11:00 GMT+0700 (WIB)”,

}

]

}

Things To Discover Next

- React Router

- Redux

- React Thunk / React Saga / React Observables

- Testing

- Webpack

Sourcehttps://facebook.github.io/reacthttps://tylermcginnis.com/imperative-vs-declarative-programming/

Thanks!