首頁 探索 說明
登入
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 */
 
 /* Styles for React app */
 
+
 
+
 
 html {
 
 html {
 
   height: 100%;
 
   height: 100%;
 
 }
 
 }
 
@@ -21,48 +23,109 @@ body {
 
   min-height: 100%;
 
   min-height: 100%;
 
   overflow: hidden;
 
   overflow: hidden;
 
 }
 
 }
 
-footer {
 
-  position: absolute;
 
-  bottom: 0;
 
-  width: 50%;
 
-}
 
+
 
+/* Columns */
 
 .col-1-2 {
 
 .col-1-2 {
 
   width: 50%;
 
   width: 50%;
 
   position: absolute;
 
   position: absolute;
 
   top: 0;
 
   top: 0;
 
+  bottom: 0;
 
 }
 
 }
 
-.col-1-2:first-child {
 
+#left-panel {
 
   border-right: 1px solid #ddd;
 
   border-right: 1px solid #ddd;
 
-  bottom: 50px;
 
+  overflow-y: scroll;
 
 }
 
 }
 
-.col-1-2:last-child {
 
+#right-panel {
 
   left: 50%;
 
   left: 50%;
 
-  bottom: 0;
 
 }
 
 }
 
+
 
+/* Nav */
 
+
 
 #logo-container img {
 
 #logo-container img {
 
-  margin-top: 12px;
 
+  margin: 12px 12px 0 0;
 
   max-height: 40px;
 
   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 {
 
 .pagination-wrapper {
 
+  /*  */
 
+  text-align: center;
 
+}
 
+.abs-bottom {
 
   position: absolute;
 
   position: absolute;
 
   bottom: 10px;
 
   bottom: 10px;
 
   left: 0;
 
   left: 0;
 
   width: 100%;
 
   width: 100%;
 
-  text-align: center;
 
 }
 
 }
 
 .pagination {
 
 .pagination {
 
   display: inline-block;
 
   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 {
 
 .breadcrumb-wrapper .breadcrumb i {
 
   font-size: 22px;
 
   font-size: 22px;
 
 }
 
 }
 
@@ -75,9 +138,25 @@ span.breadcrumb::before {
 
   margin: -4px 2px 0 2px;
 
   margin: -4px 2px 0 2px;
 
   font-size: 22px;
 
   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 {
 
 .page li {
 
   margin-bottom: 6px;
 
   margin-bottom: 6px;
 
 }
 
 }
 
 .page blockquote {
 
 .page blockquote {
 
   border-left: 5px solid #ffb74d;
 
   border-left: 5px solid #ffb74d;
 
 }
 
 }
 
+
 
+/* About page images */
 
+.about img {
 
+  max-height: 48px;
 
+}

+ 12 - 43
index.html
查看文件 

@@ -13,49 +13,18 @@
 
 
 
 </head>
 
 </head>
 
 <body>
 
 <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-->
 
   <!--  Scripts-->

+ 1 - 1
react-tuto/gulpfile.js
查看文件 

@@ -101,7 +101,7 @@ function extractMarkdown() {
 
       []
 
       []
 
     ))
 
     ))
 
     .then(JSON.stringify)
 
     .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 ReactDOM from 'react-dom';
 
 import ReactMarkdown from 'react-markdown';
 
 import ReactMarkdown from 'react-markdown';
 
 import { Switch, Route, HashRouter, Link } from 'react-router-dom';
 
 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) {
 
 function getSection(sectionIndex) {
 
   const section = markdown[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) {
 
 function getSectionRoutes(section, sIndex) {
 
   const routes = [{
 
   const routes = [{
 
     key: sIndex, path: section.path, component: getSection(sIndex)
 
     key: sIndex, path: section.path, component: getSection(sIndex)
 
@@ -137,29 +86,23 @@ function getSectionRoutes(section, sIndex) {
 
     path: section.path + page.path,
 
     path: section.path + page.path,
 
     component: getPage(sIndex, pIndex)
 
     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} />);
 
   return routes.map(r => <Route key={r.key} exact path={r.path} component={r.component} />);
 
 }
 
 }
 
 
 
 ReactDOM.render(
 
 ReactDOM.render(
 
     <HashRouter>
 
     <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>
 
       </div>
 
   </HashRouter>,
 
   </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 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.
 
 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.
 
 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