Download to read offline
Uploaded byAhmed rebai
Reactjs workshop (1)
This document outlines a Reactjs workshop covering an introduction to Reactjs, its core concepts, and coding with Reactjs. The workshop introduces Reactjs as a library for building user interfaces, discusses its core concepts including components, virtual DOM, JSX, state and props, and demonstrates how to install and start coding with Reactjs. The document provides resources for further learning Reactjs.
In this document
Powered by AI
Overview of ReactJS and workshop plan, including core concepts and live coding.
Introduction of presenter Rebai Ahmed, a web developer and React enthusiast.
Discussion on issues in web development, origin of ReactJS by Facebook, and its adoption.
Explanation of what ReactJS is, its core functionalities, advantages such as SEO, Virtual DOM, and Unidirectional data flow.
Instructions for installing ReactJS using plain JavaScript, live sandboxes, and npm.
Overview of core concepts including components, JSX, and their importance in building user interfaces.
Understanding the Virtual DOM, its advantages, re-rendering process, and efficiency in applications.
Introduction to JSX, how it simplifies HTML quoting, and incorporating expressions.
Explanation of state and props in React, alongside their roles in data flow within components.
Key new features of ES6/ES2015 that enhance JavaScript development activity, including classes and modules.
Practical coding session introduction covering React components, rendering, state handling, and forms.
Closure of workshop with thanks, invitation for questions, and sharing of useful resources.
Reactjs workshop (1)
- 1.
- 2. Plan ◎ What isReactjs ? ◎ Reactjs Core Concepts ◎ Let’s code 2
- 3. Hello! I am RebaiAhmed Who AM I ? ➢ React Lover ➢ Someone try to learn new thing every day 3
- 4. I’m web developer Iwant to create this web page :)
- 5.
- 6. How is thatpossible ? 6
- 7.
- 8.
- 9.
- 10. 10 This is solution!!! ?
- 11. Issues ! 11 ➢ Search& modify elements manually ! ➢ Data synchronisation!
- 12.
- 13.
- 14. Short summary ➢ AFacebook & Instagram collaboration. ➢ Initial release from 2013 ➢ 114.894 Star in GitHub 14
- 15. A library forcreating User interfaces 15
- 16. React is nota Framework 16
- 17.
- 18.
- 19.
- 20. Core Problem !!!!! 20 Separationof Concerns : ➢ app/partials/button.html ➢ app/css/button.css ➢ app/js/directives/button.js
- 21. 21 ➢ SEO Friendly- Components are client side as well as server side render hence they are SEO friendly and no 3 rd party plugin required ➢ Coding is simpler because of JSX ➢ Big minds are backing Reactjs
- 22. 22 ➢ Virtual DOM- Reactjs use the concept of virtual DOM which helps in the performance ➢ Unidirectional Data Flow - Compare to the 2 way data binding. Reactjs use the concept of Unidirectional data flow which improve the over all performance.
- 23. Reactjs installation: Include asa plain Javascript 23
- 24. Reactjs installation: Use livesandboxes 24
- 25.
- 26.
- 27.
- 28.
- 29. React Components Self-contained reusablebuilding blocks of web application 29
- 30. React Components ( reusable) ➢ Pinterest open sourced its full React component UI library 30
- 31. React Components ( reusable) ➢ Office UI Fabric 31
- 32.
- 33.
- 34.
- 41.
- 42. React core concepts:Virtual DOM 42
- 43.
- 44. 44 React Virtual DOM? ➢ Keep track of state in DOM is hard ! ➢ It’ll be so easier to re-render the whole DOM on every change ➢ Unfortunately the DOM API is not so fast.
- 45.
- 46.
- 47.
- 48. 48 React Virtual DOM? ➢ Use different algorithm with the browser DOM tree to identify the changes ➢ Instead of creating new object, Reactjs just identify what change is took place and once identify update that state
- 49. 49 React Virtual DOM Re-renderingprocess ? ➢ Build new virtual DOM subtree ➢ Diff with the old one ➢ Compute the minimal set of DOM mutations ➢ Batch execute all update DÉMO
- 50. React core concepts:JSX 50
- 51. 51 React JSX ? ➢React components are written in JSX, a JavaScript extension syntax allowing easy quoting of HTML and using HTML tag syntax to render components <div> <h1> Shopping list for {this.props.name} </h1> <ul> <li>Instagram </li> <li>Whatsap </li> <li>Oculus </li> </ul> </div>
- 52. 52 React JSX ? <div> <h1>Shopping list for {this.props.name} </h1> <ul> <li>Instagram </li> <li>Whatsap </li> <li>Oculus </li> </ul> </div>
- 53.
- 54.
- 55. React core concepts:state && props ! 55
- 56. React :Data FlowState && props 56
- 57. React :Data FlowState && props 57
- 58. React :Data FlowChildren 58
- 59. ECMASCRIPT 6 /ECMASCRIPT 2015 WHAT’S NEW? modern syntax ,better suited for big applications 59 ➢ Variable types ➢ Arrow functions ➢ Modules ➢ Classes ➢ A lot more… ➢
- 60. ECMASCRIPT 6 /ECMASCRIPT 2015 WHAT’S NEW? 60 ➢ Arrow functions
- 61. ECMASCRIPT 6 /ECMASCRIPT 2015 WHAT’S NEW? 61 ➢ Template Literals (Strings)
- 62. ECMASCRIPT 6 /ECMASCRIPT 2015 WHAT’S NEW? 62 ➢ Classes
- 63. ECMASCRIPT 6 /ECMASCRIPT 2015 WHAT’S NEW? 63 ➢ Modules
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70. Thanks! Any questions? 70 You canfind me at: ➢ Rebaiahmed.github.io ➢ github.com/Rebaiahmed ➢ @RebaiAhmed_ ➢ rebai.ahmed@outlook.com
- 71. Ressources ◎ https://devhints.io/react ◎ https://github.com/enaqx/awesome-react ◎https://medium.freecodecamp.org/all-the-f undamental-react-js-concepts-jammed-int o-this-single-medium-article-c83f9b53eac2 ◎ https://github.com/TunisiaJavascriptCom munity/react-in-patterns 71