Introduction to react js
•Download as PPTX, PDF•
1 like•637 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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (11)
Similar to Introduction to react js
Similar to Introduction to react js (20)
Recently uploaded
Recently uploaded (13)
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
- 18. Adding state-management Let’s add some new function methods Initial state Change state Get the value
- 19. Live Demo!
Editor's Notes
- * 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.
- Use diagram example to highlight issues of code-reuse and app-maintence with app-functionality fragmented throughout the codebase.
- 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)
- 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.
- 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.
- 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)