홈 탐색 도움말
로그인
py
/
react-python-tdd-tutorial
원본 프로젝트 : bh/react-web-tutorial
1
0
포크 0
파일
소스 검색

Gros refactor

Benoît Hubert 7 년 전
부모
8ac7601aeb
커밋
f3a140c1f6
12개의 변경된 파일과 324개의 추가작업 그리고 147개의 파일을 삭제
분할 보기 변경상태 보기
  1. 98 19
      css/style.css
  2. 12 43
      index.html
  3. 1 1
      react-tuto/gulpfile.js
  4. 56 0
      react-tuto/src/components/About.js
  5. 34 0
      react-tuto/src/components/Home.js
  6. 26 0
      react-tuto/src/components/Navbar.js
  7. 56 0
      react-tuto/src/components/Page.js
  8. 22 79
      react-tuto/src/index.js
  9. 4 3
      react-tuto/src/markdown/2. Manipuler le HTML/01. L'API DOM.md
  10. 3 1
      react-tuto/src/markdown/2. Manipuler le HTML/06. Exercice.md
  11. 11 0
      react-tuto/src/resources/const.js
  12. 1 1
      react-tuto/src/markdown.json

+ 98 - 19
css/style.css
파일 보기 

@@ -14,6 +14,8 @@
 
 }
 
 
 /* Styles for React app */
 
+
 
+
 
 html {
 
   height: 100%;
 
 }
 
@@ -21,48 +23,109 @@ body {
 
   min-height: 100%;
 
   overflow: hidden;
 
 }
 
-footer {
 
-  position: absolute;
 
-  bottom: 0;
 
-  width: 50%;
 
-}
 
+
 
+/* Columns */
 
 .col-1-2 {
 
   width: 50%;
 
   position: absolute;
 
   top: 0;
 
+  bottom: 0;
 
 }
 
-.col-1-2:first-child {
 
+#left-panel {
 
   border-right: 1px solid #ddd;
 
-  bottom: 50px;
 
+  overflow-y: scroll;
 
 }
 
-.col-1-2:last-child {
 
+#right-panel {
 
   left: 50%;
 
-  bottom: 0;
 
 }
 
+
 
+/* Nav */
 
+
 
 #logo-container img {
 
-  margin-top: 12px;
 
+  margin: 12px 12px 0 0;
 
   max-height: 40px;
 
 }
 
-.page-footer .footer-copyright img {
 
-  max-height: 30px;
 
-}
 
-#root {
 
-  padding: 30px;
 
+
 
+@media only screen and (min-width: 993px) {
 
+  nav .brand-logo {
 
+    padding-left: 30px;
 
+  }
 
+  nav .hide-on-med-and-down {
 
+    padding-right: 30px;
 
+  }
 
+  .main {
 
+    padding: 30px;
 
+  }
 
 }
 
-.nav-wrapper,
 
-.page-footer .footer-copyright {
 
-  padding: 0 30px;
 
+
 
+@media only screen and (max-width: 992px) {
 
+  nav .brand-logo {
 
+    padding-left: 20px;
 
+  }
 
+  nav .hide-on-med-and-down {
 
+    padding-right: 20px;
 
+  }
 
+  .main {
 
+    padding: 20px;
 
+  }
 
 }
 
+
 
+
 
+/* Pagination */
 
+
 
 .pagination-wrapper {
 
+  /*  */
 
+  text-align: center;
 
+}
 
+.abs-bottom {
 
   position: absolute;
 
   bottom: 10px;
 
   left: 0;
 
   width: 100%;
 
-  text-align: center;
 
 }
 
 .pagination {
 
   display: inline-block;
 
 }
 
+@media only screen and (max-width: 1024px) {
 
+  .pagination li:first-child a,
 
+  .pagination li:last-child a {
 
+    padding: 0;
 
+  }
 
+}
 
+@media only screen and (max-width: 600px) {
 
+  .pagination li a {
 
+    font-size: 0.9rem;
 
+    padding: 0 3px;
 
+  }
 
+  .pagination li i {
 
+    margin-top: 0.35rem;
 
+    font-size: 1.4rem;
 
+  }
 
+}
 
+@media only screen and (min-width: 601px) and (max-width: 800px) {
 
+  .pagination li a {
 
+    font-size: 1rem;
 
+    padding: 0 4px;
 
+  }
 
+  .pagination li i {
 
+    margin-top: 0.25rem;
 
+    font-size: 1.6rem;
 
+  }
 
+}
 
+@media only screen and (min-width: 801px) and (max-width: 1024px) {
 
+  .pagination li a {
 
+    font-size: 1.1rem;
 
+    padding: 0 7px;
 
+  }
 
+  .pagination li i {
 
+    margin-top: 0.15rem;
 
+    font-size: 1.8rem;
 
+  }
 
+}
 
+
 
+
 
+/* Breadcrumb */
 
+
 
 .breadcrumb-wrapper .breadcrumb i {
 
   font-size: 22px;
 
 }
 
@@ -75,9 +138,25 @@ span.breadcrumb::before {
 
   margin: -4px 2px 0 2px;
 
   font-size: 22px;
 
 }
 
+
 
+/* Styles for page content */
 
+.main {
 
+  /* overflow-y: scroll; */
 
+}
 
+.page {
 
+  /* max-height: 100px; */
 
+  /* overflow-y: scroll;
 
+  padding-right: 20px;
 
+  margin-right: -20px; */
 
+}
 
 .page li {
 
   margin-bottom: 6px;
 
 }
 
 .page blockquote {
 
   border-left: 5px solid #ffb74d;
 
 }
 
+
 
+/* About page images */
 
+.about img {
 
+  max-height: 48px;
 
+}

+ 12 - 43
index.html
파일 보기 

@@ -13,49 +13,18 @@
 
 
 </head>
 
 <body>
 
-    <div class="main">
 
-      <div class="col-1-2" style="overflow-y: scroll">
 
-
 
-        <nav class="light-blue lighten-1" role="navigation">
 
-          <div class="nav-wrapper"><a id="logo-container" href="" class="brand-logo">
 
-            <img src="img/logo-wcs.png" alt="logo WCS" />
 
-            <img src="img/logo-js.png" alt="logo JS" />
 
-          </a>
 
-            <ul class="right hide-on-med-and-down">
 
-              <li><a href="#">Navbar Link</a></li>
 
-            </ul>
 
-
 
-            <ul id="nav-mobile" class="side-nav">
 
-              <li><a href="#">Navbar Link</a></li>
 
-            </ul>
 
-            <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
 
-          </div>
 
-        </nav>
 
-
 
-        <div id="root"></div>
 
-
 
-      </div>
 
-
 
-      <div class="col-1-2">
 
-      <iframe
 
-        id="iframe"
 
-        src="empty.html"
 
-        frameborder="0"
 
-        marginheight="0"
 
-        marginwidth="0"
 
-        height="100%" width="100%"
 
-        style="overflow:hidden;width:100%;height:100%;"></iframe>
 
-      </div>
 
-    </div>
 
-
 
-    <footer class="page-footer black" style="padding-top: 0">
 
-      <div class="footer-copyright">
 
-        Fait avec&nbsp;
 
-        <a href="http://materializecss.com"><img src="img/logo-materializecss.png" alt="logo MaterializeCSS" /></a>&nbsp;
 
-        et&nbsp;<a href="https://reactjs.org/"><img src="img/logo-react.png" alt="logo React" /></a>&nbsp;&mdash;
 
-        Hébergé sur Gogs&nbsp;<a href="https://git.hubbros.fr/bh/react-web-tutorial"><img src="img/logo-gogs.png" alt="logo Gogs" /></a>
 
-      </div>
 
-    </footer>
 
+  <div id="left-panel" class="col-1-2"></div>
 
+
 
+  <div id="right-panel" class="col-1-2">
 
+  <iframe
 
+    id="iframe"
 
+    src="empty.html"
 
+    frameborder="0"
 
+    marginheight="0"
 
+    marginwidth="0"
 
+    height="100%" width="100%"
 
+    style="overflow:hidden;width:100%;height:100%;"></iframe>
 
+  </div>
 
 
 
   <!--  Scripts-->

+ 1 - 1
react-tuto/gulpfile.js
파일 보기 

@@ -101,7 +101,7 @@ function extractMarkdown() {
 
       []
 
     ))
 
     .then(JSON.stringify)
 
-    .then(markdownJson => fs.writeFileAsync('src/markdown.json', markdownJson))
 
+    .then(markdownJson => fs.writeFileAsync('src/resources/markdown.json', markdownJson))
 
   // });
 
 }

+ 56 - 0
react-tuto/src/components/About.js
파일 보기 

@@ -0,0 +1,56 @@
 
+import React from 'react';
 
+
 
+class About extends React.Component {
 
+  render() {
 
+    return (
 
+      <div class="about">
 
+
 
+        <p>Cette appli a été réalisée avec les technos open-source suivantes.</p>
 
+
 
+        <div className="row valign-wrapper">
 
+          <div className="col s3">
 
+            <a href="https://reactjs.org">
 
+              <img src="img/logo-react.png" alt="logo React" className="responsive-img" />
 
+            </a>
 
+          </div>
 
+          <div className="col s9">
 
+            <span className="black-text">
 
+              <a href="https://reactjs.org">React</a> est le désormais célèbre framework front-end créé par Facebook.
 
+            </span>
 
+          </div>
 
+        </div>
 
+
 
+        <div className="about row valign-wrapper">
 
+          <div className="col s3">
 
+            <a href="http://materializecss.com">
 
+              <img src="img/logo-materializecss.png" alt="logo MaterializeCSS" className="responsive-img" />
 
+            </a>
 
+          </div>
 
+          <div className="col s9">
 
+            <span className="black-text">
 
+              <a href="http://materializecss.com">MaterializeCSS</a> est un framework CSS basé sur Material Design.
 
+            </span>
 
+          </div>
 
+        </div>
 
+
 
+        <div className="about row valign-wrapper">
 
+          <div className="col s3">
 
+            <a href="https://gogs.io">
 
+              <img src="img/logo-gogs.png" alt="logo Gogs" className="responsive-img" />
 
+            </a>
 
+          </div>
 
+          <div className="col s9">
 
+            <span className="black-text">
 
+              <a href="https://gogs.io">Gogs</a> est un service d'auto-hébergement de dépôts Git,
 
+              que j'utilise pour partager le <a href="https://git.hubbros.fr/bh/react-web-tutorial">code source</a> sur mon propre serveur.
 
+            </span>
 
+          </div>
 
+        </div>
 
+
 
+      </div>
 
+
 
+    );
 
+  }
 
+}
 
+
 
+export default About;

+ 34 - 0
react-tuto/src/components/Home.js
파일 보기 

@@ -0,0 +1,34 @@
 
+import React from 'react';
 
+import ReactMarkdown from 'react-markdown';
 
+import { Link } from 'react-router-dom';
 
+import { intro } from '../resources/const';
 
+const markdown = require('../resources/markdown.json');
 
+
 
+function getSectionLinks() {
 
+  return (
 
+    <ul>
 
+    {markdown.map((section, sIndex) => (
 
+      <li key={sIndex}><Link to={section.path}>{section.title}</Link></li>
 
+    ))}
 
+    </ul>
 
+  );
 
+}
 
+
 
+class Home extends React.Component {
 
+  render() {
 
+    return (
 
+      <div className="page">
 
+        <div className="breadcrumb-wrapper">
 
+          <span className="breadcrumb light-blue-text"><i className="material-icons">home</i></span>
 
+          <span className="breadcrumb grey-text">Accueil</span>
 
+        </div>
 
+        <h4 className="header orange-text">Accueil</h4>
 
+        <ReactMarkdown source={intro} />
 
+        {getSectionLinks()}
 
+      </div>
 
+
 
+    );
 
+  }
 
+}
 
+
 
+export default Home;

+ 26 - 0
react-tuto/src/components/Navbar.js
파일 보기 

@@ -0,0 +1,26 @@
 
+import React from 'react';
 
+import { Link } from 'react-router-dom';
 
+
 
+class Navbar extends React.Component {
 
+  render() {
 
+    return (
 
+      <nav className="light-blue lighten-1" role="navigation">
 
+        <div className="nav-wrapper"><Link id="logo-container" to="/" className="brand-logo">
 
+          <img src="img/logo-wcs.png" alt="logo WCS" />
 
+          <img src="img/logo-js.png" alt="logo JS" />
 
+        </Link>
 
+          <ul className="right hide-on-med-and-down">
 
+            <li><Link to="/a-propos">&Agrave; propos</Link></li>
 
+          </ul>
 
+
 
+          <ul id="nav-mobile" className="side-nav">
 
+            <li><Link to="/a-propos">&Agrave; propos</Link></li>
 
+          </ul>
 
+          <a href="#" data-activates="nav-mobile" className="button-collapse"><i className="material-icons">menu</i></a>
 
+        </div>
 
+      </nav>
 
+    );
 
+  }
 
+}
 
+
 
+export default Navbar;

+ 56 - 0
react-tuto/src/components/Page.js
파일 보기 

@@ -0,0 +1,56 @@
 
+import React from 'react';
 
+import ReactMarkdown from 'react-markdown';
 
+import { Link } from 'react-router-dom';
 
+
 
+let first = true;
 
+class Page extends React.Component {
 
+
 
+  constructor(props) {
 
+    super(props);
 
+    this.onResize = this.onResize.bind(this);
 
+  }
 
+
 
+  componentDidMount() {
 
+
 
+    // Re-highlight with Prism
 
+    Prism.highlightAll();
 
+
 
+    // Display li with bullets
 
+    this.div = $('.page');
 
+    this.div.find('ul').addClass('browser-default');
 
+
 
+    this.onResize();
 
+    $(window).on('resize', this.onResize);
 
+  }
 
+
 
+  /**
 
+   * Fix pagination at bottom if content height < window height
 
+   */
 
+  onResize() {
 
+    if($('.main').outerHeight() + $('nav').height() <= $(window).height()) {
 
+      $('.pagination-wrapper').addClass('abs-bottom');
 
+    }
 
+    else {
 
+      $('.pagination-wrapper').removeClass('abs-bottom');
 
+    }
 
+  }
 
+
 
+  render() {
 
+    const { title, content } = this.props.page;
 
+    const { section } = this.props;
 
+    return (
 
+      <div className="page">
 
+        <div className="breadcrumb-wrapper">
 
+          <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
 
+          <Link to={section.path} className="breadcrumb light-blue-text">{section.title}</Link>
 
+          <span className="breadcrumb grey-text">{title}</span>
 
+        </div>
 
+
 
+        <h4 className="header orange-text">{title}</h4>
 
+        <ReactMarkdown source={content} escapeHtml={false} />
 
+      </div>
 
+    );
 
+  }
 
+}
 
+
 
+export default Page;

+ 22 - 79
react-tuto/src/index.js
파일 보기 

@@ -2,59 +2,18 @@ import React from 'react';
 
 import ReactDOM from 'react-dom';
 
 import ReactMarkdown from 'react-markdown';
 
 import { Switch, Route, HashRouter, Link } from 'react-router-dom';
 
-const markdown = require('./markdown.json');
 
-const intro = `
 
-Cette appli est un petit guide pour débuter en JavaScript, qui s'adresse à ceux
 
-qui connaissent déjà un autre langage - Java en l'occurence.
 
+import About from './components/About';
 
+import Home from './components/Home';
 
+import Navbar from './components/Navbar';
 
+import Page from './components/Page';
 
+const markdown = require('./resources/markdown.json');
 
 
-On va présenter les bases nécessaires pour interagir avec une page web, sans
 
-entrer dans les détails du langage.
 
-
 
-Précisons que le fait qu'il soit disponible sur tous les navigateurs et machines
 
-(ordinateurs, tablettes, smartphones), fait de JavaScript la plate-forme d'exécution
 
-de programmes **la plus répandue**.
 
-`;
 
-
 
-class Page extends React.Component {
 
-  componentDidMount() {
 
-    Prism.highlightAll();
 
-    $('.page ul').addClass('browser-default');
 
-  }
 
-  render() {
 
-    const { title, content } = this.props.page;
 
-    const { section } = this.props;
 
-    return (
 
-      <div className="page">
 
-        <div className="breadcrumb-wrapper">
 
-          <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
 
-          <Link to={section.path} className="breadcrumb light-blue-text">{section.title}</Link>
 
-          <span className="breadcrumb grey-text">{title}</span>
 
-        </div>
 
-
 
-        <h4 className="header orange-text">{title}</h4>
 
-        <ReactMarkdown source={content} escapeHtml={false} />
 
-      </div>
 
-    );
 
-  }
 
+const $leftPanel = $('#left-panel');
 
+const $window = $(window);
 
+function onResize() {
 
+  $leftPanel.css('max-height', $window.height());
 
 }
 
-
 
-class Home extends React.Component {
 
-  render() {
 
-    return (
 
-      <div>
 
-        <div className="breadcrumb-wrapper">
 
-          <span className="breadcrumb light-blue-text"><i className="material-icons">home</i></span>
 
-          <span className="breadcrumb grey-text">Accueil</span>
 
-        </div>
 
-        <h4 className="header orange-text">Accueil</h4>
 
-        <ReactMarkdown source={intro} />
 
-        {getSectionLinks()}
 
-      </div>
 
-
 
-    );
 
-  }
 
-}
 
-
 
+$window.on('resize', onResize);
 
 
 function getSection(sectionIndex) {
 
   const section = markdown[sectionIndex];
 
@@ -119,16 +78,6 @@ function getSectionPageLinks(section) {
 
   );
 
 }
 
 
-function getSectionLinks() {
 
-  return (
 
-    <ul>
 
-    {markdown.map((section, sIndex) => (
 
-      <li key={sIndex}><Link to={section.path}>{section.title}</Link></li>
 
-    ))}
 
-    </ul>
 
-  );
 
-}
 
-
 
 function getSectionRoutes(section, sIndex) {
 
   const routes = [{
 
     key: sIndex, path: section.path, component: getSection(sIndex)
 
@@ -137,29 +86,23 @@ function getSectionRoutes(section, sIndex) {
 
     path: section.path + page.path,
 
     component: getPage(sIndex, pIndex)
 
   })));
 
-  // return <Route key={sIndex} exact path={section.path} component={getSection(sIndex)} />;
 
   return routes.map(r => <Route key={r.key} exact path={r.path} component={r.component} />);
 
 }
 
 
 ReactDOM.render(
 
     <HashRouter>
 
-      <div>
 
-        {/*}<ul>{
 
-          markdown.map((section, sIndex) => (
 
-            <li key={sIndex}><Link to={section.path}>{section.title}</Link>
 
-            {getSectionPageLinks(section)}
 
-            </li>
 
-          ))
 
-        }
 
-          <li><Link to="/">Home</Link></li>
 
-        </ul>*/}
 
-        <Switch>
 
-          <Route exact path="/" component={Home} />
 
-          {
 
-            markdown.map(getSectionRoutes)
 
-          }
 
-        </Switch>
 
+      <div id="react-wrapper">
 
+        <Navbar />
 
+        <div className="main">
 
+          <Switch>
 
+            <Route exact path="/" component={Home} />
 
+            <Route exact path="/a-propos" component={About} />
 
+            {
 
+              markdown.map(getSectionRoutes)
 
+            }
 
+          </Switch>
 
+        </div>
 
       </div>
 
   </HashRouter>,
 
-  document.getElementById('root')
 
+  document.getElementById('left-panel')
 
 );

+ 4 - 3
react-tuto/src/markdown/2. Manipuler le HTML/01. L'API DOM.md
파일 보기 

@@ -17,6 +17,7 @@ correspondant à une certaine balise (tag). Il y a forcément **une seule** bali
 
 
 Tu dois apparaître quelque chose comme `[html]`. Clique dessus pour le "déplier".
 
 
-Tu peux constater que cet élément/noeud a de nombreuses propriétés, comme `children` (où
 
-on trouve logiquement les noeuds `head` et `body`), `innerHTML` (le contenu HTML),
 
-ou encore `style` (les propriétés CSS).
 
+Tu peux constater que cet élément/noeud a de nombreuses propriétés, comme `innerHTML` (le contenu HTML),
 
+`style` (les propriétés CSS), et `children`. "Déplie" le contenu de cette dernière : on y
 
+on trouve logiquement les noeuds `head` et `body`. En examinant les `children` de cette façon
 
+à partir du noeud racine, on peut explorer tout l'arbre.

+ 3 - 1
react-tuto/src/markdown/2. Manipuler le HTML/06. Exercice.md
파일 보기 

@@ -5,5 +5,7 @@ var ingredients = garniture.split(',');
 
 ```
 
 Je t'encourage à examiner son résultat (`console.log` est ton ami), pour te renseigner sur ce qu'elle fait.
 
 
-A partir de cet exemple et du précédent, et tes connaissances en CSS, construis une belle liste
 
+A partir de cet exemple et du précédent, et de tes connaissances en CSS, construis une belle liste
 
 d'ingrédients, en utilisant JS. Je veux que les caractères apparaissent en italique, et avec la police Georgia.
 
+
 
+Tu peux réutiliser une grande partie du code des exemples précédents !

+ 11 - 0
react-tuto/src/resources/const.js
파일 보기 

@@ -0,0 +1,11 @@
 
+export const intro = `
 
+Cette appli est un petit guide pour débuter en JavaScript, qui s'adresse à ceux
 
+qui connaissent déjà un autre langage - Java en l'occurence.
 
+
 
+On va présenter les bases nécessaires pour interagir avec une page web, sans
 
+entrer dans les détails du langage.
 
+
 
+Précisons que le fait qu'il soit disponible sur tous les navigateurs et machines
 
+(ordinateurs, tablettes, smartphones), fait de JavaScript la plate-forme d'exécution
 
+de programmes **la plus répandue**.
 
+`;

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 1 - 1
react-tuto/src/markdown.json