Understanding Javascript for the React Js by Adeyemi Simeon

Understanding Javascript for the React Js by Adeyemi Simeon at the JS Hack Accra. The talk is about the fundamental Javascript concepts that will help in picking up the ReactJs library.

Transcript

1. Understanding Javascript for the React Js Js Hack Accra, 2018
2. Hello! I am Adeyemi Simeon Babalola Frontend Developer + Django Lover. Christian. MEST. LinkedIn: Adeyemi Simeon Twitter | Github : @boasbabs
3. OVERVIEW FUNCTIONAL JS ES 6 REACT JS 2ND LAST 1ST
4. 1. React Js
5. Why? React JS
6. React is a javascript library to create building user interfaces. Its declarative, component based & can be used everywhere. Source: https://reactjs.org/
7. Some React Pros Flexibility Developer Experience
8. Some React Pros Community Support Corporate Investment
9. From GitHub, The React Repo
10. From Stakeshare, Companies that use React
11. REACT ANGULAR VUEJS Library Framework Library Facebook Google Community UI in Js (JSX) UI in HTML UI in HTML 1 way Data-binding 2 way Data-binding 1 way Data-binding Comparing React to Others
12. 2. ECMAScript 6 OR ES 6
13. ES 6 A major update which was approved in June 2015 by committee that is and has been in charge of shepherding the changes to JavaScript, European Computer Manufacturers Association (ECMA).
14. Declaring Variables in ES6 const A constant is a variable that cannot be changed var the only way to declare a variable before ES6 let the let keyword allows you to scope a variable to any code block
15. ES6 Classes Blueprint for which individual object is created
16. Arrow Functions *this Does not bind its own this in the lexical scope. short A shorter way to define a standard function.
17. Destructuring ▪ assign variables from objects ▪ assign variables from nested objects ▪ assign variables from arrays ▪ rest operator to reassign array elements ▪ pass an object as a function's parameters
18. Import/Export Modules The import/export statements allows you to break up your files to different modules
19. 3. Functional Programming
20. Functional Programming Functional programming is a programming paradigm—a style of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data Wikipedia Definition of FP
21. CONCEPT of FP In a functional programming language, functions are first class citizens and pure. Data is immutable.
22. They can be assigned to variables They can be used as an argument to other functions They can be returned by functions First Class Functions Don’t depend on data other than what is passed in, and don’t alter data other than what they returned Math.max(1,9) NOT Math.random(1, 9) Pure Functions
23. HOF A function which takes a function as an argument and/or returns a function. High Order Function Examples in the JavaScript standard library include Array.map(), Array.filter()and Array.reduce().
24. A variable can never be changed. Hence, ES2015 const is so widely used Instead of changing an array, to add a new item you create a new array by concatenating the old array, plus the new item. An object is never updated, but copied before changing it. Immutability
25. Array.map() Array.reduce() Array.filter() Data Transformations You can read more from Mozilla Doc
26. Recursions Is a simply a function calling itself Composition | Recursion Composition Composition is how we generate a higher order function, by combining simpler functions.
27. Demo A Simple Weather App in React
28. Credits Special thanks to all the people who made and released these awesome resources for free: ▪ Intro to Functional Programming by Flavio Copes ▪ React: The Big Picture by Cory House ▪ Photographs by Google Images ▪ FreeCodeCamp tutorials on ES6 by Beau ▪ Fun Fun Function tutorials on Functional Programming by MPJ
29. Thanks! Any questions? You can find me at: @boasbabs babalolasimeon@gmail.com