css/prism.css

@@ -1,45 +1,22 @@
-/* PrismJS 1.10.0
-http://prismjs.com/download.html?themes=prism-solarizedlight&languages=markup+css+clike+javascript+java+json+jsx */
-/*
- Solarized Color Schemes originally by Ethan Schoonover
- http://ethanschoonover.com/solarized
-
- Ported for PrismJS by Hector Matos
- Website: https://krakendev.io
- Twitter Handle: https://twitter.com/allonsykraken)
-*/
-
-/*
-SOLARIZED HEX
---------- -------
-base03    #002b36
-base02    #073642
-base01    #586e75
-base00    #657b83
-base0     #839496
-base1     #93a1a1
-base2     #eee8d5
-base3     #fdf6e3
-yellow    #b58900
-orange    #cb4b16
-red       #dc322f
-magenta   #d33682
-violet    #6c71c4
-blue      #268bd2
-cyan      #2aa198
-green     #859900
-*/
+/* PrismJS 1.11.0
+http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+python */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
 
 code[class*="language-"],
 pre[class*="language-"] {
-	color: #657b83; /* base00 */
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 	text-align: left;
 	white-space: pre;
 	word-spacing: normal;
 	word-break: normal;
 	word-wrap: normal;
-
 	line-height: 1.5;
 
 	-moz-tab-size: 4;
@@ -54,12 +31,21 @@ pre[class*="language-"] {
 
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-	background: #073642; /* base02 */
+	text-shadow: none;
+	background: #b3d4fc;
 }
 
 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
-	background: #073642; /* base02 */
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
 }
 
 /* Code blocks */
@@ -67,29 +53,29 @@ pre[class*="language-"] {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
-	border-radius: 0.3em;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	background-color: #fdf6e3; /* base3 */
+	background: #f5f2f0;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
 	padding: .1em;
 	border-radius: .3em;
+	white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: #93a1a1; /* base1 */
+	color: slategray;
 }
 
 .token.punctuation {
-	color: #586e75; /* base01 */
+	color: #999;
 }
 
 .namespace {
@@ -103,7 +89,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-	color: #268bd2; /* blue */
+	color: #905;
 }
 
 .token.selector,
@@ -111,30 +97,33 @@ pre[class*="language-"] {
 .token.string,
 .token.char,
 .token.builtin,
-.token.url,
 .token.inserted {
-	color: #2aa198; /* cyan */
+	color: #690;
 }
 
-.token.entity {
-	color: #657b83; /* base00 */
-	background: #eee8d5; /* base2 */
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #a67f59;
+	background: hsla(0, 0%, 100%, .5);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-	color: #859900; /* green */
+	color: #07a;
 }
 
 .token.function {
-	color: #b58900; /* yellow */
+	color: #DD4A68;
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-	color: #cb4b16; /* orange */
+	color: #e90;
 }
 
 .token.important,
@@ -148,3 +137,4 @@ pre[class*="language-"] {
 .token.entity {
 	cursor: help;
 }
+

react-tuto/src/markdown/4. Bases de Python/01. Premier programme.md

@@ -16,6 +16,8 @@ Puis dans le terminal (marche sous OS X, Linux *et* Windows/PowerShell) :
 
 Cela produit l'affichage de `Hello galaxy` dans le terminal. Ce petit programme nous permet déjà de faire trois constats.
 
-- > Python est un langage de script, et n'a pas besoin de passer par une phase de compilation.
-- > Contrairement à JavaScript (souviens-toi du <code><strong>var</strong> variable</code> en JS), on **ne déclare pas** les variables en Python, on les affecte directement.
-- > Il n'est pas nécessaire de mettre des points-virgule à la fin des lignes. Ils sont acceptés, mais en pratique, *personne* dans la communauté Python ne les utilise. Leur seule utilité éventuelle est de séparer des instructions sur une même ligne.
+> Python est un langage de script, et n'a pas besoin de passer par une phase de compilation.
+
+> Contrairement à JavaScript (souviens-toi du <code><strong>var</strong> variable</code> en JS), on **ne déclare pas** les variables en Python, on les affecte directement.
+
+> Il n'est pas nécessaire de mettre des points-virgule à la fin des lignes. Ils sont acceptés, mais en pratique, *personne* dans la communauté Python ne les utilise. Leur seule utilité éventuelle est de séparer des instructions sur une même ligne.

react-tuto/src/markdown/4. Bases de Python/02. Fonctions.md

@@ -1,30 +1,34 @@
 Voici maintenant un exemple de fonction en Python (crée le fichier `02-fonctions.py`) :
 
 ```python
-def count_words(str):
-    return len(str.split(' '))
-
-message = "The show must go on!"
-print("Nombre de mots dans '%s' : %d" % (message, count_words(message)))
+# Salue quelqu'un en utilisant son titre
+def greet(name, gender=''):
+    if gender == 'male':
+        title = 'Mr'
+    elif gender == 'female':
+        title = 'Ms'
+    else:
+        title = 'Mx'   # titre "neutre"
+    print("Hello %s %s" % (title, name))
+
+greet("Johnson", "male")
+greet("May", "female")
 ```
 
-La fonction `count_words()` prend en paramètre une chaîne de caractères. Elle utilise la méthode `split()` accessibles aux chaînes (qui sont des objets !). Celle-ci fonctionne comme `split()` en JavaScript : elle sépare la chaîne selon le séparateur passé en paramètre, et renvoie une "liste" (l'équivalent des tableaux).
+Pour saluer (*greet*) une personne, on utilise le "titre honorifique" suivi du nom. Le titre est déterminé à partir du genre.
 
-Ensuite la fonction `len()` compte le nombre d'éléments dans la liste.
+Remarques :
 
-Remarque ensuite ce qu'on met en arguments de `print()`. La partie entre guillemets ressemble à ce qu'on pourrait trouver en C ou en Java : `%s` et `%d` sont des "emplacements" pour des variables (chaîne et entier respectivement). Par contre, la syntaxe de la suite diffère : les valeurs à insérer dans les emplacements sont situées entre parenthèses, suite au caractère `%`.
+> On définit une fonction en précédant son nom du mot-clé `def`.
 
-Pour terminer, le plus important à retenir de cet exemple... Voici comment on aurait écrit `count_words()` en JS :
+> Python **n'utilise pas** la syntaxe `{}`, commune à C/C++, Java, PHP, JavaScript, etc. pour ouvrir et fermer le corps d'une fonction (ou un bloc de code en général)
 
-```javascript
-function count_words(str) {
-  return str.split(' ').length;
-}
-```
+> Au lieu de cela, on ouvre un bloc de code en utilisant `:` et en laissant **au moins un espace d'indentation** au début de chaque ligne du bloc. Toutes les lignes d'un *même bloc* doivent avoir le même *niveau* d'indentation (même nombre d'espaces avant)
+
+Cette dernière particularité de Python est absolument fondamentale ! Python se base sur l'*indentation* pour détecter ce qui appartient à un même bloc.
 
-Tu vois les différences ?
-> Python **n'utilise pas** la syntaxe `{}` pour ouvrir et fermer le corps d'une fonction (ou un bloc de code en général)
+> Essaie de voir ce qui se passe en "désindentant" la ligne `title = 'Mr'` pour la ramener au niveau du `if` qui la précède. **Tu risques de rencontrer cette erreur à nouveau si tu n'es pas rigoureux sur l'indentation**.
 
-> Au lieu de cela, on ouvre un bloc de code en utilisant `:` et **en laissant 4 espaces d'indentation** au début de chaque ligne du bloc.
+Un avantage d'abandonner les `{}` est que le code est moins "chargé" visuellement. Il n'y a pas d'*obligation* quant au nombre d'espaces d'indentation, mais une *convention* très répandue, qu'en pratique tout le monde adopte, préconise l'usage de 4 espaces entre chaque niveau d'indentation (vrais espaces et non tabulation).
 
-Cette dernière différence est absolument fondamentale ! Python se base sur l'*indentation* pour détecter ce qui appartient à un bloc.
+Dernière chose, les arguments de `print()` : La partie entre guillemets ressemble à ce qu'on pourrait trouver en C ou en Java : `%s` et `%d` sont des "emplacements" pour des variables (chaîne et entier respectivement). Par contre, la syntaxe de la suite diffère : les valeurs à insérer dans les emplacements sont situées entre parenthèses, suite au caractère `%`.

react-tuto/src/markdown/4. Bases de Python/03. Classes et objets.md

@@ -0,0 +1,29 @@
+Crée le fichier `03-classes.md` :
+
+```python
+class Vehicle:
+  speed = 0
+
+  def __init__(self, model):
+    self.model = model
+
+  def __str__(self):
+    return self.model + ' (speed: %d mph)' % (self.speed)
+
+  def increase_spead(self, speed_increment):
+    self.speed += speed_increment
+
+car = Vehicle('Land Rover')
+car.increase_spead(80)
+print(car)
+```
+
+On utilise le même mot-clé `class` qu'en Java pour déclarer une classe. Logiquement, pas de `{}`,  mais à nouveau l'indentation pour délimiter la classe : arrivé à la ligne qui instancie un `Vehicle`, l'interpréteur sait que le corps de la classe est terminé, car on est revenu au même niveau d'indentation que celui où on l'a déclarée.
+
+Plusieurs choses là encore :
+
+- Les propriétés d'instance (ici `speed`) sont déclarées les premières, juste en leur attribuant une valeur initiale.
+- Le constructeur de n'importe quelle classe est la méthode `__init__()`.
+- Note que celui-ci, **ainsi que les autres méthodes d'instance**, acceptent comme premier argument `self` (équivalent de `this` en Java ou JS). Oui, on passe à chaque méthode la référence à l'instance, c'est une habitude à prendre de 
+- La méthode `__str__()` est l'équivalent de `toString()` en Java : elle renvoie une représentation en texte de l'objet.
+- Enfin, contrairement à Java ou JS, pas de mot-clé `new` pour créer une instance, mais juste le nom de la classe, avec les arguments requis par le constructeur entre parenthèses.