Table of Contents generated with DocToc

• 1. React development
• 2. React Todo App implemented with HOOKS and CONTEXT, REDUCERS
• 3. Next.js DEMO
• 0. The Full JavaScript & ES6 Tutorial - (including ES7, ES8, understanding libraries & React mini app)
  • I) JavaScript the weird parts
  • II) ECMAScript 6 Features
  • III) ECMAScript 7
  • IV) ECMAScript 8
• Webpack Configuration - notes
  • Usefull development external references
• Advice for Software Developers
• Web Dev Interviews Advice

1. React development

• React app some basics
  • Usefull libraries:
  • Props have children
  • State vs props
  • Search field filter with functional component
  • JSS withStyles:
  • Store website in github for free - deploy

2. React Todo App implemented with HOOKS and CONTEXT, REDUCERS

Follow the link below to go to the React implementation that includes :

• TODO app implemented with HOOKS + CONTEXT
• responsive login app implemented using JSS with Material UI libraries + CONTEXT - from Colt's repo
• React Hooks - are great!
• Context in React is about passing properties between a component and distant components (in the component tree)
• Transform the previous class based components into function=hooks based components - clean implementation
• State Management w/ useReducer and useContext
  • Add in Todo Context
  • Consuming the Todo Context
• Introduce a new pattern - instead of multiple methods write a single function - a reducer - fix reloading issue
• Memo - Higher Order Component built into React - To Speed Up the App
• Use Custom Hook: Reducer + LocalStorage

./hooks-todo-app/README.md#react-hooks

3. Next.js DEMO

• Next.js - a framework using React library
• Init a Next.js app
• Next.js pages
• Next's Link Component
• Next fetching and Server API

0. The Full JavaScript & ES6 Tutorial - (including ES7, ES8, understanding libraries & React mini app)

ECMAScript 2015 - ES6 is a significant update to JavaScript language, and the first update to the language since ES5 was standardized in 2009.

I) JavaScript the weird parts

• 0. Intro
• 1. The Console - how to use it - clear data
• 2. Syntax Parsers, Lexical Environments
• 3. Execution Context - Creation and Hoisting
• 4. The Global Environment and the Global Object
• 5. Name Value Pairs and OBJECTS
• 6. 'undefined' variale in Javascript
• 7. Single Threded, Synchronous execution
• 8. Functions invocation and execution stack
• 9. Functions, Context, Variable environments
• 10. The Scope Chain
• 11. Scope, ES6 and let
• 12. Asynchronous Callbacks
• 13. Types and Javascript
• 14. Primitive Types
• 15. Operators, Operators Precedence and Associativity
• 16. Coercion, Comparison Operators
• 17. Existence and Booleans
• 18. Defaut Values
• 19. Framework Aside: Default Values
• 20. Objects and the DOT
• 21. Object Literals
• 22. Framework Aside: Faking Namespaces
• 23. JSON and Object Literals
• 24. Functions are Objects
• 25. Function Statements and Function Expressions
• 26. By Value vs. By Reference
• 27. Objects, Functions and 'this'
• 28. Arrays = Collections of anything
• 29. Arguments and 'spread'
• 30. Functions overloading
• 31. DANGER: Automatic Semicolon Insertion
• 32. WhiteSpace
• 33. Immediately invoked Functions Expressions (IIFEs) and Safe Code
• 34. Closures
• 35. Function Factories
• 36. Closures and Callbacks
• 37. call(), apply() and bind()
• 38. FUNCTIONAL PROGRAMMING
• 39. Classical vs. Prototypal Inheritance
• 40. Everything is an object or a primitive
• 41. REFLEXION AND EXTEND
• 42. Building = Constructing Objects
• 44. Function Constructors and '.prototype'
• 45. DANGER: 'new' and Functions
• 46. Built-In Function Constructors
• 47. Dangerous for..in Array iteration
• 48. Object.create and Pure Prototypal Inheritance
• 49. ES6 and Classes
• 50. Odds and Ends - Initialization
• 51. 'typeof', 'instanceof' and Figuring Out What Something is
• 52. "use strict" mode
• 53. Examine Famous Frameworks and Libraries
• 53.a. Deep Dive into jQuery source code
• 54. Build a Framework Library
• 55. Throttle
• 55. TypeScript, ES6, Transpiled Languages

II) ECMAScript 6 Features

• 1. JavaScript Essentials
• 2. ES6 Essentials
• 2.0 Arrow functions
• 2.1 Assignment with let const
• 2.2 Number checking
• 2.3 Block Scoping
• 2.4 Destructuring Assignment
• 2.5 Map Filter
• 2.6 Modules
• 2.7 Spread Rest
• 2.8 String Helpers
• 2.9 Template Literals
• 3. Data Structures
• 4. Closures
• 5. Classes
• 6. Generators
• 7. Promises
• Quiz:

III) ECMAScript 7

./es7/README.md

IV) ECMAScript 8

./es8/README.md

Webpack Configuration - notes

The mini-app with documented configuration:

Webpack config documentation

Usefull development external references

• Write Html fast using CSS syntax and the emmet features available in VS Code

• Implementation of ES6 features in major JavaScript engines.

• ES6 standard - full specification of the ECMAScript 6 language

See more references: Transpiled Languages:

• Typescript

• try out writing Typescript code in your browser

• more on Traceur

• writing ES6 code in Traceur in your browser

• Read a list of features existing or coming in ES6

• JavaScript the weird Parts

• ES6 in depth

• The complete guide for starting React App with Webpack 4 with Babel 7

• Details on html-webpack-plugin

Use my gists:

• Some usefull shell commands

• Build a starter project for es6 in webpack

• ES6 features

• Transpilers

• Set-up Webpack and Babel for your web-server

Advice for Software Developers

• Lesson learned - life is far easier when you have clarity and structure in your life! Be organized!
• How to provide tasks estimations
• How to increase your productivity

Web Dev Interviews Advice

• JavaScript Interview Questions