fullstack js workshop
TRANSCRIPT
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 />
<User />
<User />
<Comment />
<Comment />
<User />
<User />
<CommentList />
<Comment />
<Comment />
<User />
<User />
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
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!