Welcome to React & Flux !
3 likes595 views
This document provides an introduction to ReactJS including what it is, its key features, and how it works. Some main points: - ReactJS is a UI library built by Facebook that uses a virtual DOM to selectively update the browser DOM and improve performance. - It allows building of interactive and reusable UI components in a declarative way. - React uses a one-way data flow and unidirectional data binding which keeps complexity low. - Components are the core building blocks and can be composed to build UIs in a modular way. - The virtual DOM enables fast re-renders by only updating parts of the real DOM that changed.
Welcome to React & Flux !
- 1. Welcome to React & Flux ! by Ritesh
- 2. Introduction to ReactJS Q.) What is React JS ? ● React Js is nothing but a UI library built by Facebook to improve the creation of interactive, stateful, and reusable UI components. ● One of its unique feature is that it helps us overcome the limitation of DOM manipulation of browser for an interactive UI by introducing a concept of virtual DOM that selectively renders subtrees of nodes based upon state changes.
- 3. contd... ● React JS is being used in production by Facebook and sites like Instagram is entirely converted and built in ReactJS. ● Facebook Chat and message which used to very buggy with notifications on message not sync is all very smooth all thanks to the ReactJS & Flux.
- 4. Features of React JS ● One of the key aspects of ReactJS is that it can be used both on the client- side as well as on the server side. ● React is build to solve the problem of updating UI of large applications where data changes over time. ● React is simple, declarative, built of compassable components and yes you need to give it sometime to get a nice flavour of it.
- 5. React at first look ! Now Let us look at first ReactJS code. Need not to worry, we will be covering them in details shortly. Its just to give you a look and feel of 1st ReactJS component code. Now, tell me what you think of by seeing this code for the 1st time ?
- 6. Probable answers ! If you have worked with JavaScript before which is a prerequisite for this course you may think like : a. Isn’t this ugly ? b. will it not be making things complex by putting Javascript and html in the same file ? c. No clue whats going on. Is this javascript ? d. Is React only templating language ?
- 7. Don’t worry :) The thing is that it’s just JavaScript and it’s not a templating language. The Code that you see previously is written in JSX which is a JavaScript extension. The JSX code increases the efficiency as it performs optimization while compiling the source code to JavaScript.
- 8. Some more Gyan on React ! If you have worked earlier with JavaScript, you would have seen the MVC being followed which stands for Model View Controller architecture. In this ReactJS works only with the Views and it doesn’t care about how the data is passed or handled across the web-application. This was mostly the architectural problem that is outside the scope of ReactJS and to overcome that the developers at Facebook proposed a functional approach which they call as FLUX.
- 10. contd... Flux introduced the concept of Actions, Dispatchers & Stores. Mutation of data can only be done through calling the actions. This architecture allows for the data flow in a single direction only and hence makes it easier to monitor data changes affecting the application.
- 11. Why React in UI ? The most basic function of UI is to display some data and React makes it easy to do that as well as keep the page updated with least DOM mutations to browser. Now, you all can write a basic React JS code which i display in the next slide and run your first React code in the browser. Just create a .html file and copy the code that i show in the next slide.
- 12. Run your 1st React Code
- 13. contd... In the code which is presented before you will see that the some data keeps changing on the page while the others remains as it is. Here the virtual DOM comes into picture where it does the diff with the new DOM and renders only the minimum change required. Since, the code is not in pure javascript it is first compiled using babel. Babel is a javascript compiler. React and React-DOM library is also imported for developing in their framework.
- 14. More deep into React ! What is JSX ? ● JSX in simple is a language that lets you create javascript object from HTML syntax which runs faster on the browsers compared to the normal JavaScript. ● strictly typed OO programming language. ● syntax : class / function definition like JAVA. ● function body is javascript. ● strict type leads to higher productivity than javaScript.
- 15. contd... Few more facts about JSX : 1. The code written in JSX when compiled runs faster than equivalent JS code. the code is optimised using type info. 2. Compiled code generates source-map for debugging. (* source-map : It is a technology that supports debugging of client-side code on web-browsers written in language other than javascript.)
- 16. React Components Components in React : Components in react can be thought of as a simple function which takes “props” and “state” as arguments and renders HTML based on that. Note : React components can render only a single root node. If the requirement is to return multiple nodes then it must be wrapped in a single root, otherwise the component will not render.
- 17. contd... The inputs to the components are called “Props”, short for “properties”. Props are passed as attributes in JSX syntax. “Props” are not changed inside a component and are treated as immutable objects. The state of the component is stored in “this.state” of the component.
- 18. More of React Gyan! 1. In React, everything is a component. React has no : a) controller b) directives c) templates d) global event listeners e) no view models etc…It only has “Components” which once understood makes life really easy and removes complexities. For E.g : You have a simple shopping below which is generally made as a template which contains too much code for all the elements together and the data is all handled in model and controller. But, if you want the same to be implemented in React it become pretty much simple and all revolves about the component.
- 19. contd... The Flipkart “Shopping Cart” which is shown here can be broken into CartComponent, CartListComponent, Buttons etc.
- 20. Components Advantages! The advantage of Components way is : 1. Composable 2. Reusable 3. Maintainable 4. Testable
- 21. React Gyan contd... 2) Reliable Data Display : It has not built in framework. In React any component can communicate with any other component. In React there’s a 1-way data flow only. Data is handled from “Parent” to “Child”. The data is passed as props from parent component to inner component and accessed as this.props. “Props” is immutable and “State” is mutable. “State” can become props. Data flows down with handlers. Events flow up and data flows down.
- 22. contd .... 3) Virtual DOM : a) It’s a pure-javascript, in-memory representation of DOM. b) render() fires whenever something changes. c) React modifies the real DOM to match. d) It’s FAST, PURE & just works !
- 23. React Lifecycle Method! So, some basic questions now. As, i said earlier React works on virtual DOM. So, how do i access the actual DOM ? When i come to know that render has happened for the react component ? The answer lies in REACT lifecycle method. The lifecycle methods are executed at specific points in React Lifecycle.
- 24. contd... 1. componentWillMount : Invoked once, both on the client and server, immediately before the initial rendering occurs. 2. componentDidMount : Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. 3. componentWillReceiveProps : Invoked when a component is receiving new props. This method is not called for the initial render. 4. shouldComponentUpdate : Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used.
- 25. contd... 5. componentWillUpdate : Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render. 6. componentDidUpdate : Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. 7. componentWillUnmount : Invoked immediately before a component is unmounted from the DOM. etc
- 26. contd... componentDidMount: function() { var element = $(this.getDOMNode()); } this.getDOMNode() : Actual DOM Node;
- 27. Summary 1. one-way data flow keeps complexity under control. 2. Debugging is easy for self-contained components. 3. React library doesn’t dictate too much.