Introduction to ES6 - React Community Kampala

This is the first meetup content containing an introduction to ES6. It is very important that one learns the new ES6 features before they begin on their ReactJS journey. This meetup was met to bridge this gap and ensure that all participants were familiar with the new ES6 features.

This deck also contains a link to the Beginner ReactJs book I co-authored with Edmond Atto. You can get your copy at www.vumbula.io

Transcript

1. R E A C T C O M M U N I T Y ANDELA & DEVC KLA KAMPALA
2. Today's Agenda Arrival & Welcome Remarks Purpose of the community What is React? Expectations Questions Introduction to ES6 Hello World Networking Departure LINE-UP
3. John Kagga Senior Software Engineer, Andela Co-Founder, The Andela Way FACILITATOR Co-Author, Vumbula React
4. Senior Software Engineer, Andela EDMOND ATTO THE TEAM Software Engineer, Andela GIDEON BAMULESEYO Software Engineer, Andela PROSSY NAKIMERA Software Engineer, Andela JOHN PAUL SEREMBA Curriculum Developer, Andela ALEX NKUSI
5. Why the community? - Knowledge sharing - Learn together - Peer learning - Grow your Network - Mentorship
6. What is ReactJS? - React is a JavaScript library for building user interfaces, that is maintained by Facebook as an Open Source project under the MIT license.
7. Why ReactJS? - Getting started is easy - Easy DOM (Document Object Model) manipulation - Speed - React makes use of reusable components - Unidirectional data flow
8. let and const - let and const are two new keywords that were introduced in ES6 for declaring variables. - When used to declare variables, they are scoped to the block and not the function; this means they are only available within that block. - Variables declared with let can be re- assigned but cannot be redeclared within the same scope whereas those declared by const must be assigned an initial value but cannot be redeclared within the same scope.
9. spread operator The spread operator denoted by ... is used to expand iterable objects into multiple elements
10. spread operator The spread operator can also be used to combine multiple arrays into one array containing all array elements
11. Template literals Before ES6, strings were concatenated using the + operator
12. Template literals ES6 introduced template literals which are essentially string literals that include embedded expressions.
13. Default function parameters ES6 introduced a way of adding default values to the function’s parameter list
14. Destructuring In ES6, data can be extracted from arrays and objects into distinct variables using destructuring. Extracting data from an array before ES6
15. Destructuring Extracting data from an array ES6
16. Destructuring Extracting data from an object before ES6
17. Destructuring Extracting data from an object with ES6
18. Object literal Shorthand ES6 provides a new way of initialising objects without code repetition, making them concise and easy to read. Prior to ES6, objects were initialised using the same property names as the variable names assigned to them
19. Object literal Shorthand
20. Arrow functions Regular function
21. Arrow functions • remove the function keyword • remove the parentheses • remove the opening and closing curly braces • remove the return keyword • remove the semicolon • add an arrow ( ⇒ ) between the parameter list and the function body
22. Arrow functions Block body syntax
23. Classes ES6 introduced classes that are simply a mirage that hides the fact that prototypal inheritance goes on under the hood. These classes are unlike those in class-based languages like Java.
24. React Hello World
25. A Beginner's guide to ReactJS With ES6 Vumbula React WWW.VUMBULA.IO
26. Thank You!