What Is React | ReactJS Tutorial for Beginners | ReactJS Training | Edureka
4 likes977 views
The document discusses artificial intelligence, machine learning, and their limitations, with a focus on deep learning and its applications. It also covers JavaScript and its advantages, particularly in the context of frameworks like ReactJS, which is highlighted for its efficiency and virtual DOM capabilities. Additionally, the document outlines how ReactJS aids in developing interactive UIs and the comparison between real DOM and virtual DOM in improving performance.
What Is React | ReactJS Tutorial for Beginners | ReactJS Training | Edureka
- 1. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Agenda What Is Artificial Intelligence ? What Is Machine Learning ? Limitations Of Machine Learning Deep Learning To The Rescue What Is Deep Learning ? Deep Learning Applications
- 2. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ReactJS Applications5 Virtual DOM4 Why ReactJS?2 Agenda JavaScript1 What Is ReactJS?3
- 3. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JavaScript What is JavaScript?
- 4. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JavaScript ➢ Dynamic programming language ➢ It manipulates both the CSS styles and HTML attributes of a page ➢ It can also change the content and the way things look in a web page when a user interacts with it Hello World Hello World HTML HTML + CSS HTML + CSS + JS
- 5. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Advantages of JavaScript Frameworks With well-structured prebuilt patterns and functions, the projects can be developed faster without much effort. Efficiency Security Cost
- 6. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Advantages of JavaScript Frameworks Top JavaScript frameworks are generally supported by large communities where members and users act as testers thus providing firm security. Security CostEfficiency
- 7. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Advantages of JavaScript Frameworks The ultimate price for web application is lower as most frameworks are open sourced and free which help the programmers to build custom solutions faster. Cost Efficiency Security
- 8. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JavaScript Frameworks Vue.jsAngularJS ReactJS
- 9. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS? Now, let’s find out why we need ReactJS.
- 10. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS? Dispatcher Initial Data Real Time Data User Input Store View ➢ Explicit data binding ➢ Uses DOM ➢ Memory Wastage ➢ Slow Performance Other Frameworks
- 11. Copyright © 2017, edureka and/or its affiliates. All rights reserved. DOM Manipulation DOM DOM DOM DOM DOM Manipulation was very expensive Browser Real DOM
- 12. Copyright © 2017, edureka and/or its affiliates. All rights reserved. DOM Manipulation With ReactJS DOM With ReactJS, whenever there is a change in the state it will automatically handle the visual changes via Virtual DOM Browser Virtual DOM Real DOM
- 13. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Let’s now see what is ReactJS.
- 14. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Frontend JavaScript library developed by facebook which is used to develop interactive, web as well as mobile UI’s. JavaScript HTML ReactJS Template syntax like HTML, but provides full power of JavaScript.
- 15. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Virtual DOM Real DOM Virtual DOM One Way Binding Server-side Rendering
- 16. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Action Dispatcher Store View Action Virtual DOM One Way Binding Server-side Rendering
- 17. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Virtual DOM One Way Binding Server-side Rendering
- 18. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Let’s now see what is Virtual DOM in ReactJS.
- 19. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Model gives data to View which in turn creates a DOM for it Model View User:max Id:101 Loc: USA User:max Id:101 Loc: USA DOM
- 20. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Model View User: Alen Id:101 Loc: USA User:Alen Id:101 Loc: USA User:max Id:101 Loc: USA DOM Now each time data was updated by the Model, View had to create a new DOM for it
- 21. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Model View User: Alen Id:101 Loc: UK User:Alen Id:101 Loc: UK User:Alen Id:101 Loc: USA User:max Id:101 Loc: USA DOM This puts heavy load on View and makes our processing slower
- 22. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM With ReactJS, when Model gives data to View if the DOM is empty, React will create a DOM for it Model View User:max Id:101 Loc: USA Real DOM User:Max Id:101 Loc: USA
- 23. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Now whenever the data updates, React will create a virtual DOM for it and compare the current DOM with the previous one Model View User:Alen Id:101 Loc: USA User:Alen Id:101 Loc: USA Real DOMVirtual DOM User:Max Id:101 Loc: USA
- 24. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Once the changes are calculated, it will update the Real DOM with only the elements that have actually changed Model View User:Alen Id:101 Loc: USA User:Alen Id:101 Loc: USA Real DOM
- 25. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ReactJS Applications Where is ReactJS used?
- 26. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ReactJS Applications
- 27. Copyright © 2017, edureka and/or its affiliates. All rights reserved.