Fullstack JS Workshop Front End Session React Components
•Download as PPTX, PDF•
0 likes•311 views
2 days workshop @FMIPA UGM
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (13)
Similar to Fullstack JS Workshop Front End Session React Components
Similar to Fullstack JS Workshop Front End Session React Components (20)
Recently uploaded
Recently uploaded (20)
Fullstack JS Workshop Front End Session React Components
- 1. Fullstack JS Workshop Front End Session Mar 5th, 2017 @ Fak MIPA UGM
- 2. About Me
- 3. Muhammad Rizki Rijal JS dev @wonderlabs, JS Enthusiast
- 4. React JS
- 5. Why we use react?
- 6. coz it’s cool right? ps: and hype
- 8. It’s super cool UI library right?
- 9. React is a JavaScript library for building user interfaces.
- 10. Declarative Component-based Learn once, write anywhere
- 11. Declarative Component-based Learn once, write anywhere
- 12. I want a fancy button, when it get clicked its color and text will be changing back and forth
- 13. Imperative Way
- 14. Declarative Way
- 15. Declarative Component-based Learn once, write anywhere
- 17. Declarative Component-based Learn once, write anywhere
- 19. Super Stupidly Simple React App
- 21. JSX (HTML in JS?)
- 34. Class Component
- 37. <CommentList />
- 39. <User /> <User /> <Comment /> <Comment /> <CommentList />
- 40. fiddle link
- 41. fiddle link
- 43. fiddle link
- 44. <Comment /> <Comment /> <User /> <User />
- 45. fiddle link
- 46. <CommentList /> <Comment /> <Comment /> <User /> <User />
- 47. fiddle link
- 48. Props & State
- 49. Basically react has two types of data, props and state
- 50. Props is read-only data Also it can be used to pass an event/data change handler
- 52. State is where to store data that is going to change
- 54. later on we can update component’s state with setState()
- 56. Data Flow
- 58. fiddle link
- 64. Component Life Cycle Hooks
- 65. Think of it like your daily schedule
- 66. Mounting - constructor(props) - componentWillMount() - componentDidMount()
- 67. Updating - componentWillReceiveProps(nextProps, prevProps) - shouldComponentUpdate(nextProps, nextState) - componentWillUpdate(nextProps, nextState) - componentDidUpdate()
- 69. What We Gonna Build
- 73. <Navbar />
- 76. <Navbar /> <ChatWindow /> <MessageInput /> <MessageList />
- 77. <Navbar /> <ChatWindow /> <MessageInput /> <MessageList /> <Message />
- 78. <Navbar /> <ChatWindow /> <MessageInput /> <MessageList /> <Message /> <App />
- 81. 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)
- 82. 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)”, } ]
- 83. Things To Discover Next - React Router - Redux - React Thunk / React Saga / React Observables - Testing - Webpack
- 85. Thanks!
Editor's Notes
- somethint
- React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React. One of it’s unique selling points is that not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably. It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.
- The imperative approach is concerned with HOW you’re actually going to get the button. You need to list out the steps to be able to show HOW you’re going to get that.
- The declarative approach is more concerned with WHAT you want, a togglable button.
- Build small component, encapsulate logic and compose for a bigger components
- Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
- React Native, Server-side rendering, Electron .etc
- This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React "elements"
- This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React "elements”
- You can embed any JavaScript expression in JSX by wrapping it in curly braces. For example, 2 + 2, user.firstName, and formatName(user) are all valid expressions: You can’t use control flow though, but ternary is okay
- You can embed any JavaScript expression in JSX by wrapping it in curly braces. For example, 2 + 2, user.firstName, and formatName(user) are all valid expressions: You can’t use control flow though, but ternary is okay
- After compilation, JSX expressions become regular JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:
- JSX tags may contain children
- Build small components and build the app
- Build small components and compose it
- Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
- Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
- Build small components and build the app
- Build small components and build the app
- Build small components and build the app
- Build small components and build the app
- Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
- Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
- Build small components and build the app
- Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
- Build small components and build the app
- Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
- Build small components and build the app
- Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
- Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
- In React, application data flows unidirectionally via the state and props objects, as opposed to the two-way binding of libraries like Angular. This means that, in a multi component heirachy, a common parent component should manage the state and pass it down the chain via props. It makes it more predictable and more easy to debug. Your state should be updated using the setState method to ensure that a UI refresh will occur, if necessary. The resulting values should be passed down to child components using attributes that are accessible in said children via this.props. It passed down from “parent” component to “child” component.
- It’s similar to props, except it is private and fully controlled by the component.
- It can’t be mutated directly like: this.state = {}, but use setState() instead.
- Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
- Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class. This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
- Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class. This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
- Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class. This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
- Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class. This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
- Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class. This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
- Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class. This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it. A component may choose to pass its state down as props to its child components This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
- A component may choose to pass its state down as props to its child components This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
- Me: Component Teman: Developer Bangun Pagi, Teman mu nitip apa Berangkat ke Kampus, Teman mu nitip apa Pulang Kampus, Teman mu nitip apa
- The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs. The constructor is the right place to initialize state. If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component. It's okay to initialize state based on props if you know what you're doing. componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state in this method will not trigger a re-rendering. componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.
- ComponentWillReceiveProps componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method. Note that React may call this method even if the props have not changed, so make sure to compare the current and next values if you only want to handle changes. This may occur when the parent component causes your component to re-render. React doesn't call componentWillReceiveProps with initial props during mounting. It only calls this method if some of component's props may update. Calling this.setState generally doesn't trigger componentWillReceiveProps. 2. shouldComponentUpdate Use shouldComponentUpdate() to let React know if a component's output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior. shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true. This method is not called for the initial render or when forceUpdate() is used. Returning false does not prevent child components from re-rendering when their state changes. Currently, if shouldComponentUpdate() returns false, then componentWillUpdate(), render(), and componentDidUpdate() will not be invoked. 3. componentWillUpdate componentWillUpdate() is invoked immediately before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render. Note that you cannot call this.setState() here. If you need to update state in response to a prop change, use componentWillReceiveProps() instead. 4. componentDidUpdate componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).
- componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any DOM elements that were created in componentDidMount