Introduction to react js
Download as PPTX, PDF•1 like•723 views
This document provides an introduction to ReactJS, including: - Why React is simple, declarative, and allows building of composable components - React's popularity, with over 900,000 downloads in the last month - How React addresses issues with traditional web development through its use of virtual DOM and componentization - An example component is demonstrated to show how to: render in JSX, make components dynamic and interactive through props and event handling, access the DOM through refs, and manage state.
Introduction to react js
- 2. Why use React.js? Simple Declarative Build Composable Components Credits: https://facebook.github.io/react/docs/why-react.html http://kognitio.com/why-is-spark-on-the-rise-does-it-meet-business-needs/lego/
- 3. Popularity Popularity of React has been pretty high since 2015 Downloads : ~ 933,860 in the last month Credits: https://twitter.com/mjasay/status/618185536381935616
- 4. Current state of web development HTML Views implemented in a dynamic templating language e.g: dustJS, JSP… Validation & other functionality in MVC UI frameworks like BackboneJS This makes for very fragmented development… BackBoneJS View 1 Templates BackBoneJS View 2 /public/js /public/templates
- 6. JSX: markup in Javascript
- 7. Component 1 Component 2 Componentization Ideal overview of a React web app JSX logic state Logic JSX include
- 8. A Basic Example : Objectives A simple component that takes a user input, validates it and shows an error message upon an error. Render a React component Make it dynamic : so its reusable Make it interactive : add functionality
- 9. The end goal
- 10. Create the view JSX is the most common means of writing Views for React.
- 11. Dynamic Views Seldom can components be static and hardcoded. We’ll need to pass parameters into ours to make it more re-useable. These are called props.
- 12. Under the hood: Virtual DOM Credit http://madhukaudantha.blogspot.sg/2015/04/reactjs-and-virtual- dom.html
- 13. Event handling Event handler Attach handler
- 14. Traversing the DOM Tree However we also need to access the DOM of the elements within component To do this we need to use React refs Credits: http://adam.merrifield.ca/presentations/dom_demystified/
- 15. Refs – Access the DOM Refs are a React feature for accessing and thus manipulating the HTML DOM. Ref scope is limited to the React component They essentially reference DOM elements <input ref=“first_name” name=“first_name” value=“5”/> this.refs.first_name Value = 5
- 16. Adding the DOM refs Access the DOM element via ref Ref the DOM element
- 17. State-fulness Credits: http://odetocode.com/articles/460.aspx
- 18. Adding state-management Let’s add some new function methods Initial state Change state Get the value
- 19. Live Demo!
Editor's Notes
- #3: * 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. * Declarative When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.
- #5: Use diagram example to highlight issues of code-reuse and app-maintence with app-functionality fragmented throughout the codebase.
- #6: Basically these template engines compile into HTML which renders on the user’s browser. But it allows developers to re-use code and inject dynamic content into otherwise dull static web pages. Ask the audience what they think the dust-partial does (example of how cryptic each engine can be)
- #7: Explain and run the audience thru the 2 components and how they’re combined into one view which is rendered into a div-element by the reactJS engine.
- #13: Explain the example. The way React compares the DOMs, notes diff changes and re-renders only the delta part of the DOM. This partial update is much faster than a full DOM update.
- #18: Before we can proceed to add validation logic into our component we’ll need to understand another React concept: State Almost all applications maintain some form of state (e.g: User clicker ‘Like’ on a social-media site which increments a counter)