From 1b19d2bb8dbe4b75e438349574efd345562380ef Mon Sep 17 00:00:00 2001 From: AbelDelannoy Date: Tue, 3 May 2016 09:47:57 +0200 Subject: [PATCH 1/4] Update Routes.md --- docs/guides/Routes.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/guides/Routes.md b/docs/guides/Routes.md index d35ce3d..0f77679 100644 --- a/docs/guides/Routes.md +++ b/docs/guides/Routes.md @@ -3,13 +3,12 @@ La configuration des routes permet de dire au routeur comment faire le lien entre l'url demandé et le code a exécuter dans le cas de React : -import React from 'react' -import ReactDOM from 'react-dom' -import routes from './config/routes.jsx' -import {Router, browserHistory} from 'react-router' + import React from 'react' + import ReactDOM from 'react-dom' + import routes from './config/routes.jsx' + import {Router, browserHistory} from 'react-router' -ReactDOM.render(, -root); + ReactDOM.render(, root); initialise le router avec deux props history et routes : * history il peut y en avoir 3 types : From 6bccb8be237a5726d3c6acf3035ee55733e7a269 Mon Sep 17 00:00:00 2001 From: AbelDelannoy Date: Tue, 3 May 2016 10:08:10 +0200 Subject: [PATCH 2/4] Update Routes.md --- docs/guides/Routes.md | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/docs/guides/Routes.md b/docs/guides/Routes.md index 0f77679..0e08980 100644 --- a/docs/guides/Routes.md +++ b/docs/guides/Routes.md @@ -11,22 +11,21 @@ dans le cas de React : ReactDOM.render(, root); initialise le router avec deux props history et routes : - * history il peut y en avoir 3 types : - * [browserHistory] (https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#browserhistory) est celui recommandé d'aprés la doc officielle pour les applications sur navigateurs - * [hashHistory] (https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#hashhistory) - * [createMemoryHistory] (https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#creatememoryhistory) - -* routes la configuration des routes + history il peut y en avoir 3 types : + [browserHistory] (https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#browserhistory) est celui recommandé d'aprés la doc officielle pour les applications sur navigateurs + [hashHistory] (https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#hashhistory) + [createMemoryHistory] (https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#creatememoryhistory) + routes la configuration des routes : const routes = { - path: '/', - component: App, - indexRoute: { component: Vignettes }, - childRoutes: [ - { path: 'infos/:origin', component: GenGrille }, - { path: 'infos/:origin/:id' , component : Details }, - { path: '\*' , component : NotFound } - ] + path: '/', + component: App, + indexRoute: { component: Vignettes }, + childRoutes: [ + { path: 'infos/:origin', component: GenGrille }, + { path: 'infos/:origin/:id' , component : Details }, + { path: '\*' , component : NotFound } + ] } module.exports = routes; From c52e54f6a404ae4724ef32f16379dcb8acef1cdb Mon Sep 17 00:00:00 2001 From: AbelDelannoy Date: Tue, 3 May 2016 10:29:10 +0200 Subject: [PATCH 3/4] Update Introduction.md --- docs/guides/Introduction.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/guides/Introduction.md b/docs/guides/Introduction.md index 9a2acaf..aa09431 100644 --- a/docs/guides/Introduction.md +++ b/docs/guides/Introduction.md @@ -11,13 +11,14 @@ Vous êtes maintenant dans le dossier du projet il faut installer le Back et les |depuis le dossier notification || | 1) cd Back | 1) npm run install | |2) python setup.py develop | 2) npm run start | -|3) modifier le fichier development.ini ligne 30 avec les bons paramètres pour la variable sqlalchemy.url |3) webpack-de-server se lance sur http://127.0.0.1:8080/ | +|3) modifier le fichier development.ini ligne 30 avec les bons paramètres pour la variable sqlalchemy.url |3) webpack-dev-server se lance sur http://127.0.0.1:8080/ | |4) lancer le serveur avec la commande : pserve development.ini --reload | | |5) le back doit se lancer et il est accessible par defaut http://127.0.0.1:6544 (voir le fichier Back/alerting_app/Views/__init__.py pour voir les routes accessible et Back/alerting_app/Views/ pour voir la logique et les requetes) | | -#Pour un cas plus général et en vracs : +Cet exemple se place dans le cas d'un Back Python comme nous l'avons fait, mais le Back peut être gêré de moult manières, sans problèmes de compatibilité. +#Pour un cas plus général et en vracs : http://courses.reactjsprogram.com/courses/reactjsfundamentals Est un tuto gratuit en anglais (mais il faut s'inscrire sur le site ) assez bien expliqué pour sur l'ecosystem et les paramétrage du debut (pour npm et surtout WEBPACK) afin d'avoir une base pour commencer un projet react From c50b32c5b72961aa7ba1f4453fdca71bfedc56a0 Mon Sep 17 00:00:00 2001 From: AbelDelannoy Date: Tue, 3 May 2016 17:26:52 +0200 Subject: [PATCH 4/4] Update React.md --- docs/guides/React.md | 43 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/docs/guides/React.md b/docs/guides/React.md index 2d313be..066d970 100644 --- a/docs/guides/React.md +++ b/docs/guides/React.md @@ -2,4 +2,45 @@ React a l'air d'être une librairie trés puissante et qui devient assez intuitive aprés un temps d'adaptation - +Il est recommandé, mais non obligatoire, d'utiliser une syntaxe jsx avec REACT. Cette syntaxe sera interprêtée par babel que vouus aurez installé avec Npm. Babel permet aux différentes version de javascript de communiquer entre elles en interprétant le code des versions non-compatibles pour le rendre compatible. + +La notion de composant React. + +Le principe de React est qu’absolument TOUT est un composant, doté d’une fonction render, qui renvoie un élément du DOM. +Voici la façon dont un élément se présente dans le code : + + class App extends React.Component{ + render() { + return( +
Ce texte apparaîtra sur la page
+ ); + } + } + +Ici nous avons un exemple de syntaxe Jsx : Les éléments html à l’intérieur de la fonction render sont interprétés grâce à Babel. +Ainsi, cette ligne de codes + +
Ce texte apparaîtra sur la page
+ +Sera comprise comme + + var div = document.CreateElement('div'); + div InnerHTML = "Ce texte apparaîtra sur la page" + +On voit ainsi l’intérêt d’employer la syntaxe Jsx. Même si du Javascript normal fonctionne parfaitement bien, Jsx permet de réduire grandement la taille du code, et est en réalité assez intuitif passé la première impression. +La syntaxe Jsx permet l’utilisation de code javascript à l’intérieur de symboles { } , de cette façon-là : + + class App extends React.Component{ + render() { + return( + var loc1=2; + var loc2=2; + var locRes=4; +
{loc1} + {loc2} = {locRes}
+ ); + } + } + +Ici notre exemple affichera "2 + 2 =4" + +On peut ainsi y mettre une variable, une expression, une fonction…