js.ressources
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/