Learning React

Learning React - Introduction & Basic Concept

Transcript

1. 1 / 41 Intro & Concept Learning React Eueung Mulyana https://eueung.github.io/112016/react CodeLabs | Attribution-ShareAlike CC BY-SA
2. Outline Introduction React Basics Thinking in React Examples 2 / 41
3. Introduction A JavaScript library for building UIs | React 3 / 41
4. React - What? Why? React is a declarative, e cient, and exible JavaScript library for building user interfaces. 4 / 41 React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. "We built React to solve one problem: building large applications with data that changes over time." React is simple: simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes. React is declarative: when the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts. You don't need to care how those changes are made. React is all about building reusable components i.e. with React the only thing you do is build components. Components are so encapsulated, thus making code reuse, testing, and separation of concerns easy.
5. How does It Work? 1. Maintains a "Virtual DOM" 2. On changes, it creates a di 3. Applies the changes in batches to the DOM Virtual DOM Abstracts the DOM and give a simpler programming model and better performance Minimizes the repaints focusing only on what has changed Data Flow One-way reactive data ow Much simpler then traditional data binding Declarative Refs: React Investigation, React Native 5 / 41 Just the V in MVC React does one thing very well, it manages updating the state of the view. Because you can just use this, it is Relatively easy to integrate into other frameworks. Basically, React doesn't care about how your application is architectured. Popularity Support from some of the largest companies in the valley and a thriving open-source community. Support continues to grow for it every day. Server-Side Rendering Since react is able to represent the DOM virtually, it is able to render app state server side and be able to then take the current UI state and manage it as a SPA after the client has loaded. This allows for better SEO, performance and progressive enhancement. Devs Productivity Because of the large amount of tooling that supports react, and the focus on simplicity in build react components, it can make building large applications much easier for developers.
6. 6 / 41 Declarative React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will e ciently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug. Component-Based 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. Learn Once, Write Anywhere We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native. Ref: facebook/react
7. 7 / 41 Adding React to an Existing Application You don't need to rewrite your app to start using React. We recommend adding React to a small part of your application, such an individual widget, so you can see if it works well for your use case. While React can be used without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of: A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them. A bundler, such as webpack or Browserify. It lets you write modular code and bundle it together into small packages to optimize load time. A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers. Ref: Installation - React
8. React Basics 8 / 41
9. Transformed @Browser Load React from a CDN < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t @ 1 5 / d i s t / r e a c t . m i n . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t - d o m @ 1 5 / d i s t / r e a c t - d o m . m i n . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / b a b e l - s t a n d a l o n e @ 6 . 1 5 . 0 / b a b e l . m i n . j s " > < / s c r i p t > 9 / 41 Using React Vanilla JS JSX (+ES2015) Transformed @Browser Precompiled (& bundled)
10. JSX lets you create JavaScript objects using XML/HTML syntax. To generate a link in React using pure JavaScript you'd write: R e a c t . c r e a t e E l e m e n t ( ' a ' , { h r e f : ' h t t p : / / f a c e b o o k . g i t h u b . i o / r e a c t / ' } , ' H e l l o ! ' ) With JSX this becomes: < a h r e f = " h t t p : / / f a c e b o o k . g i t h u b . i o / r e a c t / " > H e l l o ! < / a > We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own work ow, so JSX is not required to use React. 10 / 41 JSX JSX is a syntax extension to JavaScript. We can use it with React to describe what the UI should look like. JSX may remind us of a template language, but it comes with the full power of JavaScript. JSX produces React "elements" (tree nodes). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest. Ref: Introducing JSX - React
11. < ! D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a c h a r s e t = " U T F - 8 " / > < t i t l e > H e l l o R e a c t ! < / t i t l e > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t @ l a t e s t / d i s t / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t - d o m @ l a t e s t / d i s t / r e a c t - d o m . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / b a b e l - s t a n d a l o n e @ 6 . 1 5 . 0 / b a b e l . m i n . j s " > < / s c r i p t > < / h e a d > < b o d y > < d i v i d = " e x a m p l e " > < / d i v > < s c r i p t t y p e = " t e x t / b a b e l " > R e a c t D O M . r e n d e r ( < h 1 > H e l l o , w o r l d ! < / h 1 > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; < / s c r i p t > < / b o d y > < / h t m l > Transformed @Browser 11 / 41
12. < ! D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a c h a r s e t = " U T F - 8 " / > < t i t l e > H e l l o R e a c t ! < / t i t l e > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t @ l a t e s t / d i s t / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t - d o m @ l a t e s t / d i s t / r e a c t - d o m . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / b a b e l - s t a n d a l o n e @ 6 . 1 5 . 0 / b a b e l . m i n . j s " > < / s c r i p t > < / h e a d > < b o d y > < d i v i d = " e x a m p l e " > < / d i v > < s c r i p t t y p e = " t e x t / b a b e l " s r c = " s r c / h e l l o . j s " > < / s c r i p t > < / b o d y > < / h t m l > R e a c t D O M . r e n d e r ( < h 1 > H e l l o , w o r l d ! < / h 1 > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; Transformed @Browser 12 / 41
13. Precompile JSX to JS n p m i n s t a l l - g b a b e l - c l i n p m i n s t a l l - g b a b e l - p r e s e t - r e a c t n p m i n s t a l l - g b a b e l - p r e s e t - e s 2 0 1 5 $ > b a b e l - - p r e s e t s r e a c t h e l l o . j s - - o u t - d i r = . . / b u i l d h e l l o . j s - > . . \ b u i l d \ h e l l o . j s 13 / 41
14. < ! D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a c h a r s e t = " U T F - 8 " / > < t i t l e > H e l l o R e a c t ! < / t i t l e > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t @ l a t e s t / d i s t / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t - d o m @ l a t e s t / d i s t / r e a c t - d o m . j s " > < / s c r i p t > < / h e a d > < b o d y > < d i v i d = " e x a m p l e " > < / d i v > < s c r i p t s r c = " b u i l d / h e l l o . j s " > < / s c r i p t > < / b o d y > < / h t m l > # s r c / h e l l o . j s ( J S X ) R e a c t D O M . r e n d e r ( < h 1 > H e l l o , w o r l d ! < / h 1 > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; # - - - # b u i l d / h e l l o . j s ( c o m p i l e d ) R e a c t D O M . r e n d e r ( R e a c t . c r e a t e E l e m e n t ( ' h 1 ' , n u l l , ' H e l l o , w o r l d ! ' ) , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; Precompiled 14 / 41
15. this.props < ! D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a c h a r s e t = " U T F - 8 " / > < t i t l e > H e l l o R e a c t ! < / t i t l e > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t @ l a t e s t / d i s t / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t - d o m @ l a t e s t / d i s t / r e a c t - d o m . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / b a b e l - s t a n d a l o n e @ 6 . 1 5 . 0 / b a b e l . m i n . j s " > < / s c r i p t > < / h e a d > < b o d y > < d i v i d = " e x a m p l e " > < / d i v > < s c r i p t t y p e = " t e x t / b a b e l " s r c = " s r c / h e l l o - p r o p s . j s " > < / s c r i p t > < / b o d y > < / h t m l > v a r H e l l o M e s s a g e = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n < d i v > H e l l o { t h i s . p r o p s . n a m e } < / d i v > ; } } ) ; R e a c t D O M . r e n d e r ( < H e l l o M e s s a g e n a m e = " J o h n " / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; hello-props.js 15 / 41
16. this.state v a r T i m e r = R e a c t . c r e a t e C l a s s ( { g e t I n i t i a l S t a t e : f u n c t i o n ( ) { r e t u r n { s e c o n d s E l a p s e d : 0 } ; } , t i c k : f u n c t i o n ( ) { t h i s . s e t S t a t e ( { s e c o n d s E l a p s e d : t h i s . s t a t e . s e c o n d s E l a p s e d + 1 } ) ; } , c o m p o n e n t D i d M o u n t : f u n c t i o n ( ) { t h i s . i n t e r v a l = s e t I n t e r v a l ( t h i s . t i c k , 1 0 0 0 ) ; } , c o m p o n e n t W i l l U n m o u n t : f u n c t i o n ( ) { c l e a r I n t e r v a l ( t h i s . i n t e r v a l ) ; } , r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v > S e c o n d s E l a p s e d : { t h i s . s t a t e . s e c o n d s E l a p s e d } < / d i v > ) ; } } ) ; R e a c t D O M . r e n d e r ( < T i m e r / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; hello-state.js 16 / 41
17. Thinking in React 17 / 41
18. Thinking in React One of the many great parts of React is how it makes you think about apps as you build them. In this part, we will walk you through the thought process of building a searchable product data table using React. Ref: Thinking in React 1. Start with a Mock 2. Break the UI into a Component Hierarchy 3. Build a Static Version in React 4. Identify the minimal representation of UI State 5. Identify where the state should live 6. Add inverse data ow 18 / 41
19. Step #1 Data [ { c a t e g o r y : " S p o r t i n g G o o d s " , p r i c e : " $ 4 9 . 9 9 " , s t o c k e d : t r u e , n a m e : " F o o t b a l l " } , { c a t e g o r y : " S p o r t i n g G o o d s " , p r i c e : " $ 9 . 9 9 " , s t o c k e d : t r u e , n a m e : { c a t e g o r y : " S p o r t i n g G o o d s " , p r i c e : " $ 2 9 . 9 9 " , s t o c k e d : f a l s e , n a m e : { c a t e g o r y : " E l e c t r o n i c s " , p r i c e : " $ 9 9 . 9 9 " , s t o c k e d : t r u e , n a m e : " i P o { c a t e g o r y : " E l e c t r o n i c s " , p r i c e : " $ 3 9 9 . 9 9 " , s t o c k e d : f a l s e , n a m e : { c a t e g o r y : " E l e c t r o n i c s " , p r i c e : " $ 1 9 9 . 9 9 " , s t o c k e d : t r u e , n a m e : " N e ] ; 19 / 41
20. Step #2 20 / 41
21. Step #3 v a r P R O D U C T S = [ { c a t e g o r y : ' S p o r t i n g G o o d s ' , p r i c e : ' $ 4 9 . 9 9 ' , s t o c k e d : t r u e , n a m e : { c a t e g o r y : ' S p o r t i n g G o o d s ' , p r i c e : ' $ 9 . 9 9 ' , s t o c k e d : t r u e , n a m e : { c a t e g o r y : ' S p o r t i n g G o o d s ' , p r i c e : ' $ 2 9 . 9 9 ' , s t o c k e d : f a l s e , n a m e : { c a t e g o r y : ' E l e c t r o n i c s ' , p r i c e : ' $ 9 9 . 9 9 ' , s t o c k e d : t r u e , n a m e : ' i P o d T o u c h ' { c a t e g o r y : ' E l e c t r o n i c s ' , p r i c e : ' $ 3 9 9 . 9 9 ' , s t o c k e d : f a l s e , n a m e : { c a t e g o r y : ' E l e c t r o n i c s ' , p r i c e : ' $ 1 9 9 . 9 9 ' , s t o c k e d : t r u e , n a m e : ' N e x u s 7 ' ] ; c l a s s P r o d u c t C a t e g o r y R o w e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { r e t u r n < t r > < t h c o l S p a n = " 2 " > { t h i s . p r o p s . c a t e g o r y } < / t h > < / t r > ; } } c l a s s P r o d u c t R o w e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { v a r n a m e = t h i s . p r o p s . p r o d u c t . s t o c k e d ? t h i s . p r o p s . p r o d u c t . n a m e : < s p a n s t y l e = { { c o l o r : ' r e d ' } } > { t h i s . p r o p s . p r o d u c t . n a m e } < / s p a n > ; r e t u r n ( < t r > < t d > { n a m e } < / t d > < t d > { t h i s . p r o p s . p r o d u c t . p r i c e } < / t d > < / t r > ) ; } } 21 / 41
22. Step #3 c l a s s P r o d u c t T a b l e e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { v a r r o w s = [ ] ; v a r l a s t C a t e g o r y = n u l l ; t h i s . p r o p s . p r o d u c t s . f o r E a c h ( f u n c t i o n ( p r o d u c t ) { i f ( p r o d u c t . c a t e g o r y ! = = l a s t C a t e g o r y ) { r o w s . p u s h ( < P r o d u c t C a t e g o r y R o w c a t e g o r y = { p r o d u c t . c a t e g o r y } k e y = { p r o d u c t . c a t e g o r y } / > ) ; } r o w s . p u s h ( < P r o d u c t R o w p r o d u c t = { p r o d u c t } k e y = { p r o d u c t . n a m e } / > ) ; l a s t C a t e g o r y = p r o d u c t . c a t e g o r y ; } ) ; r e t u r n ( < t a b l e > < t h e a d > < t r > < t h > N a m e < / t h > < t h > P r i c e < / t h > < / t r > < / t h e a d > < t b o d y > { r o w s } < / t b o d y > < / t a b l e > ) ; } } c l a s s S e a r c h B a r e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { r e t u r n ( < f o r m > < i n p u t t y p e = " t e x t " p l a c e h o l d e r = " S e a r c h . . . " / > < p > < i n p u t t y p e = " c h e c k b o x " / > { ' ' } O n l y s h o w p r o d u c t s i n s t o c k < / p > < / f o r m > ) ; } } c l a s s F i l t e r a b l e P r o d u c t T a b l e e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { r e t u r n ( < d i v > < S e a r c h B a r / > < P r o d u c t T a b l e p r o d u c t s = { t h i s . p r o p s . p r o d u c t s } / > < / d i v > ) ; } } R e a c t D O M . r e n d e r ( < F i l t e r a b l e P r o d u c t T a b l e p r o d u c t s = { P R O D U C T S } / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' c o n t a i n e r ' ) ) ; 22 / 41
23. Step #3 Static Version: a version that takes your data model and renders the UI but has no interactivity. It's best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. Here we want to build components that reuse other components and pass data using props. props are a way of passing data from parent to child. If you're familiar with the concept of state, don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Passing p r o p s < F i l t e r a b l e P r o d u c t T a b l e p r o d u c t s = { P R O D U C T S } / > < S e a r c h B a r / > < P r o d u c t T a b l e p r o d u c t s = { t h i s . p r o p s . p r o d u c t s } / > < P r o d u c t C a t e g o r y R o w c a t e g o r y = { p r o d u c t . c a t e g o r y } k e y = { p r o d u c t . c a t e g o r y } < P r o d u c t R o w p r o d u c t = { p r o d u c t } k e y = { p r o d u c t . n a m e } / > 23 / 41
24. Step #4 To make your UI interactive, you need to be able to trigger changes to your underlying data model. React makes this easy with state. To build your app correctly, you rst need to think of the minimal set of mutable state that your app needs. DRY (Don't Repeat Yourself): Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand. The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And nally, the ltered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox. Think of all of the pieces of data in our example application. We have: The original list of products The search text the user has entered The value of the checkbox The ltered list of products Then, simply ask three questions about each piece of data: Is it passed in from a parent via props? If so, it probably isn't state. Does it remain unchanged over time? If so, it probably isn't state. Can you compute it based on any other state or props in your component? If so, it isn't state. 24 / 41
25. Step #5 Next, we need to identify which component mutates, or owns, this state. Remember: React is all about one-way data ow down the component hierarchy. It may not be immediately clear which component should own what state. This is often the most challenging part for newcomers to understand. For each piece of state in your application: Identify every component that renders something based on that state. Find a common owner component (a single component above all the components that need the state in the hierarchy). Either the common owner or another component higher up in the hierarchy should own the state. If you can't nd a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component. Identify Where Your State Should Live ProductTable needs to lter the product list based on state and SearchBar needs to display the search text and checked state. The common owner component is FilterableProductTable. It conceptually makes sense for the lter text and checked value to live in FilterableProductTable 25 / 41
26. Step #5 c l a s s F i l t e r a b l e P r o d u c t T a b l e e x t e n d s R e a c t . C o m p o n e n t { c o n s t r u c t o r ( p r o p s ) { s u p e r ( p r o p s ) ; t h i s . s t a t e = { f i l t e r T e x t : ' ' , i n S t o c k O n l y : f a l s e } ; } r e n d e r ( ) { r e t u r n ( < d i v > < S e a r c h B a r f i l t e r T e x t = { t h i s . s t a t e . f i l t e r T e x t } i n S t o c k O n l y = { t h i s . s t a t e . i n S t o c k O n l y } / > < P r o d u c t T a b l e p r o d u c t s = { t h i s . p r o p s . p r o d u c t s } f i l t e r T e x t = { t h i s . s t a t e . f i l t e r T e x t } i n S t o c k O n l y = { t h i s . s t a t e . i n S t o c k O n l y } / > < / d i v > ) ; } } c l a s s S e a r c h B a r e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { r e t u r n ( < f o r m > < i n p u t t y p e = " t e x t " p l a c e h o l d e r = " S e a r c h . . . " v a l u e = { t h i s . p r o p s . f < p > < i n p u t t y p e = " c h e c k b o x " c h e c k e d = { t h i s . p r o p s . i n S t o c k O n l y } / > { ' ' } O n l y s h o w p r o d u c t s i n s t o c k < / p > < / f o r m > ) ; } } 26 / 41
27. Step #5 For each product in products: if no lter-text matches, always return empty if there is a match, checkbox is checked AND stocked is false, return empty otherwise return element c l a s s P r o d u c t T a b l e e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { v a r r o w s = [ ] ; v a r l a s t C a t e g o r y = n u l l ; t h i s . p r o p s . p r o d u c t s . f o r E a c h ( ( p r o d u c t ) = > { i f ( p r o d u c t . n a m e . i n d e x O f ( t h i s . p r o p s . f i l t e r T e x t ) = = = - 1 | | ( ! p r o d u c t . s t o c k e d & & r e t u r n ; } i f ( p r o d u c t . c a t e g o r y ! = = l a s t C a t e g o r y ) { r o w s . p u s h ( < P r o d u c t C a t e g o r y R o w c a t e g o r y = { p r o d u c t . c a t e g o r y } k e y = { p r o d u c t . c a t e g } r o w s . p u s h ( < P r o d u c t R o w p r o d u c t = { p r o d u c t } k e y = { p r o d u c t . n a m e } / > ) ; l a s t C a t e g o r y = p r o d u c t . c a t e g o r y ; } ) ; r e t u r n ( < t a b l e > < t h e a d > < t r > < t h > N a m e < / t h > < t h > P r i c e < / t h > < / t r > < / t h e a d > < t b o d y > { r o w s } < / t b o d y > < / t a b l e > ) ; } } 27 / 41
28. Step #6 If you try to type or check the box in the prev. version of the example, you'll see that React ignores your input. This is intentional, as we've set the value prop of the input to always be equal to the state passed in from FilterableProductTable. It renders correctly as a function of props and state owing down the hierarchy. Now it's time to support data owing the other way: the form components deep in the hierarchy need to update the state in FilterableProductTable. We want to make sure that whenever the user changes the form, we update the state to re ect the user input: Since components should only update their own state, FilterableProductTable will pass a callback to SearchBar that will re whenever the state should be updated. We can use the onChange event on the inputs to be noti ed of it. And the callback passed by FilterableProductTable will call setState(), and the app will be updated. c l a s s F i l t e r a b l e P r o d u c t T a b l e e x t e n d s R e a c t . C o m p o n e n t { c o n s t r u c t o r ( p r o p s ) { s u p e r ( p r o p s ) ; t h i s . s t a t e = { f i l t e r T e x t : ' ' , i n S t o c k O n l y : f a l s e } ; t h i s . h a n d l e U s e r I n p u t = t h i s . h a n d l e U s e r I n p u t . b i n d ( t h i s ) ; } h a n d l e U s e r I n p u t ( f i l t e r T e x t , i n S t o c k O n l y ) { t h i s . s e t S t a t e ( { f i l t e r T e x t : f i l t e r T e x t , i n S t o c k O n l y : i n S t o c k O n l y } ) ; } r e n d e r ( ) { r e t u r n ( < d i v > < S e a r c h B a r f i l t e r T e x t = { t h i s . s t a t e . f i l t e r T e x t } i n S t o c k O n l y = { t h i s . s t a t e . i n S t o c k O n l y } o n U s e r I n p u t = { t h i s . h a n d l e U s e r I n p u t } / > < P r o d u c t T a b l e p r o d u c t s = { t h i s . p r o p s . p r o d u c t s } f i l t e r T e x t = { t h i s . s t a t e . f i l t e r T e x t } i n S t o c k O n l y = { t h i s . s t a t e . i n S t o c k O n l y } / > < / d i v > ) ; } } 28 / 41
29. Step #6 c l a s s S e a r c h B a r e x t e n d s R e a c t . C o m p o n e n t { c o n s t r u c t o r ( p r o p s ) { s u p e r ( p r o p s ) ; t h i s . h a n d l e C h a n g e = t h i s . h a n d l e C h a n g e . b i n d ( t h i s ) ; } h a n d l e C h a n g e ( ) { t h i s . p r o p s . o n U s e r I n p u t ( t h i s . f i l t e r T e x t I n p u t . v a l u e , t h i s . i n S t o c k O n l y I n p u t . c h e c k e d ) ; } # . . . r e n d e r ( ) { r e t u r n ( < f o r m > < i n p u t t y p e = " t e x t " p l a c e h o l d e r = " S e a r c h . . . " v a l u e = { t h i s . p r o p s . f i l t e r T e x t } r e f = { ( i n p u t ) = > t h i s . f i l t e r T e x t I n p u t = i n p u t } o n C h a n g e = { t h i s . h a n d l e C h a n g e } / > < p > < i n p u t t y p e = " c h e c k b o x " c h e c k e d = { t h i s . p r o p s . i n S t o c k O n l y } r e f = { ( i n p u t ) = > t h i s . i n S t o c k O n l y I n p u t = i n p u t } o n C h a n g e = { t h i s . h a n d l e C h a n g e } / > { ' ' } O n l y s h o w p r o d u c t s i n s t o c k < / p > < / f o r m > ) ; } } 29 / 41
30. Notes In the typical React data ow, props are the only way that parent components interact with their children. To modify a child, you re- render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical data ow. The child to be modi ed could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch. React supports a special attribute that you can attach to any component. The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted. When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument. In the previous code, the ref callback is used to store a reference to a DOM node. See: Refs and the DOM 30 / 41
31. props, state & callback Final Data Flow 31 / 41
32. Examples 32 / 41
33. TodoApp This example uses state to track the current list of items as well as the text that the user has entered. See: React Mainpage 33 / 41
34. c l a s s T o d o L i s t e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { r e t u r n ( < u l > { t h i s . p r o p s . i t e m s . m a p ( i t e m = > ( < l i k e y = { i t e m . i d } > { i t e m . t e x t } < / l i > ) ) } < / u l > ) ; } } R e a c t D O M . r e n d e r ( < T o d o A p p / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; c l a s s T o d o A p p e x t e n d s R e a c t . C o m p o n e n t { c o n s t r u c t o r ( p r o p s ) { s u p e r ( p r o p s ) ; t h i s . h a n d l e C h a n g e = t h i s . h a n d l e C h a n g e . b i n d ( t h i s ) ; t h i s . h a n d l e S u b m i t = t h i s . h a n d l e S u b m i t . b i n d ( t h i s ) ; t h i s . s t a t e = { i t e m s : [ ] , t e x t : ' ' } ; } # . . . # . . . r e n d e r ( ) { r e t u r n ( < d i v > < h 3 > T O D O < / h 3 > < T o d o L i s t i t e m s = { t h i s . s t a t e . i t e m s } / > < f o r m o n S u b m i t = { t h i s . h a n d l e S u b m i t } > < i n p u t o n C h a n g e = { t h i s . h a n d l e C h a n g e } v a l u e = { t h i s . s t a t e . t e x t } < b u t t o n > { ' A d d # ' + ( t h i s . s t a t e . i t e m s . l e n g t h + 1 ) } < / b u t t o n > < / f o r m > < / d i v > ) ; } h a n d l e C h a n g e ( e ) { t h i s . s e t S t a t e ( { t e x t : e . t a r g e t . v a l u e } ) ; } h a n d l e S u b m i t ( e ) { e . p r e v e n t D e f a u l t ( ) ; v a r n e w I t e m = { t e x t : t h i s . s t a t e . t e x t , i d : D a t e . n o w ( ) } ; t h i s . s e t S t a t e ( ( p r e v S t a t e ) = > ( { i t e m s : p r e v S t a t e . i t e m s . c o n c a t ( n e w I t e m ) , t e x t : ' ' } ) ) ; } } 34 / 41
35. TodoApp 35 / 41
36. Notes Default Behaviour To prevent default behavior in React, you must call preventDefault explicitly (e.preventDefault() - e is a synthetic event, compatible with the W3C) State Updates May Be Asynchronous React may batch multiple s e t S t a t e ( ) calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. / / W r o n g t h i s . s e t S t a t e ( { c o u n t e r : t h i s . s t a t e . c o u n t e r + t h i s . p r o p s . i n c r e m e n t , } ) ; / / C o r r e c t t h i s . s e t S t a t e ( ( p r e v S t a t e , p r o p s ) = > ( { c o u n t e r : p r e v S t a t e . c o u n t e r + p r o p s . i n c r e m e n t } ) ) ; The second form of s e t S t a t e ( ) accepts the previous state as the rst argument, and the props at the time the update is applied as the second argument. 36 / 41
37. < ! D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a c h a r s e t = " U T F - 8 " / > < t i t l e > H e l l o R e a c t ! < / t i t l e > < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t @ l a t e s t / d i s t / r e a c t . j s " > < / s c r i p t < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / r e a c t - d o m @ l a t e s t / d i s t / r e a c t - d o m . j s " < s c r i p t s r c = " h t t p s : / / u n p k g . c o m / b a b e l - s t a n d a l o n e @ 6 . 1 5 . 0 / b a b e l . m i n . j s " < s c r i p t s r c = " h t t p s : / / f a c e b o o k . g i t h u b . i o / r e a c t / j s / r e m a r k a b l e . m i n . j s " < / h e a d > < b o d y > < d i v i d = " e x a m p l e " > < / d i v > < s c r i p t t y p e = " t e x t / b a b e l " s r c = " s r c / a p p . j s " > < / s c r i p t > < / b o d y > < / h t m l > app.html MarkdownEditor A Component Using External Plugins 37 / 41
38. MardownEditor Single Component c l a s s M a r k d o w n E d i t o r e x t e n d s R e a c t . C o m p o n e n t { c o n s t r u c t o r ( p r o p s ) { s u p e r ( p r o p s ) ; t h i s . h a n d l e C h a n g e = t h i s . h a n d l e C h a n g e . b i n d ( t h i s ) ; t h i s . s t a t e = { v a l u e : ' T y p e s o m e * m a r k d o w n * h e r e ! ' } ; } h a n d l e C h a n g e ( ) { t h i s . s e t S t a t e ( { v a l u e : t h i s . r e f s . t e x t a r e a . v a l u e } ) ; } # . . . g e t R a w M a r k u p ( ) { v a r m d = n e w R e m a r k a b l e ( ) ; r e t u r n { _ _ h t m l : m d . r e n d e r ( t h i s . s t a t e . v a l u e ) } ; } r e n d e r ( ) { r e t u r n ( < d i v c l a s s N a m e = " M a r k d o w n E d i t o r " > < h 3 > I n p u t < / h 3 > < t e x t a r e a o n C h a n g e = { t h i s . h a n d l e C h a n g e } r e f = " t e x t a r e a " d e f a u l t V a l u e = { t h i s . s t a t e . v a l u e } / > < h 3 > O u t p u t < / h 3 > < d i v c l a s s N a m e = " c o n t e n t " d a n g e r o u s l y S e t I n n e r H T M L = { t h i s . g e t R a w M a r k u p ( ) } / > < / d i v > ) ; } } R e a c t D O M . r e n d e r ( < M a r k d o w n E d i t o r / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) 38 / 41
39. Refs 39 / 41
40. Refs 1. A JavaScript library for building user interfaces | React 2. facebook/react: A declarative, e cient, and exible JavaScript library for building user interfaces. 3. Getting Started | React 4. Thinking in React 5. React Investigation 6. React Native 7. Why React? | React Prev. Version 40 / 41
41. 41 / 41 END Eueung Mulyana https://eueung.github.io/112016/react CodeLabs | Attribution-ShareAlike CC BY-SA