What Is React | ReactJS Tutorial for Beginners | ReactJS Training | Edureka

1. 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 Copyright © 2017, edureka and/or its affiliates. All rights reserved.

2. Agenda 1 JavaScript 2 Why ReactJS? 3 What Is ReactJS? 4 Virtual DOM 5 ReactJS Applications Copyright © 2017, edureka and/or its affiliates. All rights reserved.

3. JavaScript What is JavaScript? Copyright © 2017, edureka and/or its affiliates. All rights reserved.

4. JavaScript HTML + CSS HTML + CSS + JS HTML Hello World Hello World ➢ 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 Copyright © 2017, edureka and/or its affiliates. All rights reserved.

5. Advantages of JavaScript Frameworks Security Cost Efficiency With well-structured prebuilt patterns and functions, the projects can be developed faster without much effort. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

6. Advantages of JavaScript Frameworks Efficiency Cost Security Top JavaScript frameworks are generally supported by large communities where members and users act as testers thus providing firm security. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

7. Advantages of JavaScript Frameworks Efficiency Security Cost 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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

8. JavaScript Frameworks ReactJS AngularJS Vue.js Copyright © 2017, edureka and/or its affiliates. All rights reserved.

9. Why ReactJS? Now, let’s find out why we need ReactJS. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

10. Why ReactJS? Real Time Data Initial Data User Input Other Frameworks ➢ Explicit data binding Dispatcher ➢ Uses DOM ➢ Memory Wastage Store ➢ Slow Performance View Copyright © 2017, edureka and/or its affiliates. All rights reserved.

11. DOM Manipulation DOM Manipulation was very expensive DOM DOM DOM DOM Browser Real DOM Copyright © 2017, edureka and/or its affiliates. All rights reserved.

12. DOM Manipulation With ReactJS With ReactJS, whenever there is a change in the state it will automatically handle the visual changes via Virtual DOM DOM Browser Virtual DOM Real DOM Copyright © 2017, edureka and/or its affiliates. All rights reserved.

13. What Is ReactJS? Let’s now see what is ReactJS. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

14. What Is ReactJS? Frontend JavaScript library developed by facebook which is used to develop interactive, web as well as mobile UI’s. Template syntax like HTML, but provides full power of JavaScript. JavaScript HTML ReactJS Copyright © 2017, edureka and/or its affiliates. All rights reserved.

15. What Is ReactJS? Virtual DOM Real DOM Virtual DOM One Way Binding Server-side Rendering Copyright © 2017, edureka and/or its affiliates. All rights reserved.

16. What Is ReactJS? Action Virtual DOM One Way Binding View Action Store Dispatcher Server-side Rendering Copyright © 2017, edureka and/or its affiliates. All rights reserved.

17. What Is ReactJS? Virtual DOM One Way Binding Server-side Rendering Copyright © 2017, edureka and/or its affiliates. All rights reserved.

18. Virtual DOM Let’s now see what is Virtual DOM in ReactJS. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

19. Virtual DOM Model gives data to View which in turn creates a DOM for it User:max Id:101 Loc: USA User:max Id:101 Loc: USA Model View DOM Copyright © 2017, edureka and/or its affiliates. All rights reserved.

20. Virtual DOM User:max Id:101 Loc: USA Now each time data was updated by the Model, View had to create a new DOM for it User:Alen Id:101 Loc: USA User: Alen Id:101 Loc: USA Model View DOM Copyright © 2017, edureka and/or its affiliates. All rights reserved.

21. Virtual DOM User:max Id:101 Loc: USA User:Alen Id:101 Loc: USA This puts heavy load on View and makes our processing slower User:Alen Id:101 Loc: UK User: Alen Id:101 Loc: UK Model View DOM Copyright © 2017, edureka and/or its affiliates. All rights reserved.

22. Virtual DOM With ReactJS, when Model gives data to View if the DOM is empty, React will create a DOM for it User:Max Id:101 Loc: USA User:max Id:101 Loc: USA Model View Real DOM Copyright © 2017, edureka and/or its affiliates. All rights reserved.

23. Virtual DOM Now whenever the data updates, React will create a virtual DOM for it and compare the current DOM with the previous one User:Max Id:101 Loc: USA User:Alen Id:101 Loc: USA Model View Real DOM User:Alen Id:101 Loc: USA Virtual DOM Copyright © 2017, edureka and/or its affiliates. All rights reserved.

24. Virtual DOM Once the changes are calculated, it will update the Real DOM with only the elements that have actually changed User:Alen Id:101 Loc: USA User:Alen Id:101 Loc: USA Model View Real DOM Copyright © 2017, edureka and/or its affiliates. All rights reserved.

25. ReactJS Applications Where is ReactJS used? Copyright © 2017, edureka and/or its affiliates. All rights reserved.

26. ReactJS Applications Copyright © 2017, edureka and/or its affiliates. All rights reserved.

27. Copyright © 2017, edureka and/or its affiliates. All rights reserved.