Notes de parcours

webpack+react eslint (.eslintrc, késako ?) babel (.babelrc, késako ?)

Questions à résoudre

  • function
    • object.prototype
  • class

Étudier Object.assign

Object.assign({}, this.state, {
	projects: newProjects
});

Class, prototype

Sont deux façons de faire la même chose, à savoir un objet qu’on instancie

La POO (avec class) a tendance à supplanter l’ancienne méthode avec prototype. Mais, pour commencer dans l’order chronologique, voici l’ancienne méthode :

let Element = function(name, type){
    this.setup = true;
    this.name = name;
    this.type = type;
    this.count = 0;
}
Element.prototype.addCounter = function(){
    this.count+=1;
}

on déclare la variable Element, qui est une fonction (la tâche sera remplie par constructor() avec class). On ajoute à cet objet “prototype” une méthode, selon le même procédé

Maintenant avec class. Le principe est le même. Ce qui change :

  • on déclare tout dans un objet class : construteur et méthodes
  • les éléments de la variable initiale en prototype-oriented sont déclarés dans la méthode constructor()
class Element {
    constructor(name, type) {
	this.setup = true;
	this.name = name;
	this.type = type;
	this.count = 0;
    }
    addCounter() {
	this.count +=1;
    }
}

Maintenant, quelle que soit la méthode que l’on choisisse, deux instances de Element seront traitées de la même façon

let e = new Element("Actarus", "pilot"); // on instancie l'objet
for (let i = 0;i<10;i++) { // on joue dix fois sa méthode addCounter()
    e.addCounter();
}

console.log(e) // renvoie Object { setup: true, name: "Actarus", type: "pilot", count: 10 }

- super()

sur les classes (à lire)

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
  • https://hacks.mozilla.org/2015/07/es6-in-depth-classes/
  • https://hacks.mozilla.org/2015/08/es6-in-depth-subclassing/
  • http://exploringjs.com/es6/ch_classes.html

todo

Finir ReactJS

  • Lire ça et tester en même temps : https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Custom_objects
  • http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html Javascript module pattern. patrons de conceptions pour projet javascript, à base de modules (import/export, webpack, etc.)
  • apprendre les propriétés/focntion de Array : ex. map()
  • Sur les modules, l’utilisation dans différents contextes (AMD, UMD, CommonJS) https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc

Tools

  • https://caniuse.com/ Outilpour vérifier qu’une fonction est compatible avec un navigateur.

Exemples

Objects, notation

considering :

const city = {
	road: 'road',
	river: 'river'
};

city.road
// idem que
city['road']

Arrow function =>

=> (pour les objets) https://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas#24900924

Template strings

Très pratique pour intégrer des variables

forEach(card => {
    console.log('${card.name} cost is ${card.price}');
}

Plutôt que

forEach(card => {
    console.log(card.name+" cost is "+card.price);
}

Babel

Babel est un outil qui compile (transpile) JavaScript de façon à ce qu’il fonctionne sous toutes les version de navigateur

React/Vue, comparaison

https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd

Build a dynamic environment

node, express

restful api react

Requests

Build a RESTful API : https://www.tutorialspoint.com/nodejs/nodejs_restful_api.htm

Connect to a database ? MySQL ? MongoDB

Account management

https://github.com/Createdd/Writing/blob/master/2017/articles/AuthenticationIntro.md https://stackoverflow.com/questions/19024878/simple-login-page-in-nodejs-using-express-and-passport-with-mongodb

Outils

  • https://backbonejs.org/

Structure du code

https://alistapart.com/article/writing-testable-javascript

Séparer les fonctions suivantes

  • Presentation and interaction
  • Data management and persistence
  • Overall application state
  • Setup and glue code to make the pieces work together

Getting fake JSON

https://jsonplaceholder.typicode.com/