added images and internal files for fullstackreact.com

fullstackreact · Aug 29, 2018 · 4fea191 · 4fea191
1 parent 5cc3497
commit 4fea191
Show file tree

Hide file tree

Showing 177 changed files with 640 additions and 0 deletions.
diff --git a/_params.yaml b/_params.yaml
@@ -0,0 +1,21 @@
+note: 'This file is for fullstackreact.com internal use'
+series: 30-days-of-react
+isPrinting: false
+published: false
+draft: false
+author: ari
+autotoc: true
+fileMetaKeyHeadingsAllowed: true
+containerintro: 'partials/series/30-days-of-react/what-is-this.html'
+containerfooter: 'partials/series/30-days-of-react/postcontents.html'
+bodyClasses: thirty-days landingpage
+editOnGithubUrl: __GITHUB_REPO__/blob/__PERMALINK__/post.md
+githubRepo: https://github.com/fullstackreact/30-days-of-react
+articleEntry: '30-days-of-react/__PERMALINK__-code/index'
+codeRoot: '__FILE_PATH__/code/__DAY_DIR__'
+imagesDir: '../../../assets/images/series/30-days-of-react/__DAY_DIR__'
+githubRepo: 'https://github.com/fullstackreact/30-days-of-react'
+variables:
+  __DAY_DIR__: dayDir
+  __GITHUB_REPO__: githubRepo
+  __PERMALINK__: permalink
diff --git a/images/04/breakdown-2.jpg b/images/04/breakdown-2.jpg
diff --git a/images/04/breakdown-2.png b/images/04/breakdown-2.png
diff --git a/images/04/breakdown.jpg b/images/04/breakdown.jpg
diff --git a/images/04/breakdown.png b/images/04/breakdown.png
diff --git a/images/04/part4.sketch b/images/04/part4.sketch
diff --git a/images/12/app.jpg b/images/12/app.jpg
diff --git a/images/12/app.png b/images/12/app.png
diff --git a/images/12/build.jpg b/images/12/build.jpg
diff --git a/images/12/build.png b/images/12/build.png
diff --git a/images/12/chrome-start.jpg b/images/12/chrome-start.jpg
diff --git a/images/12/chrome-start.png b/images/12/chrome-start.png
diff --git a/images/12/create-app.jpg b/images/12/create-app.jpg
diff --git a/images/12/create-app.png b/images/12/create-app.png
diff --git a/images/12/index-html.jpg b/images/12/index-html.jpg
diff --git a/images/12/index-html.png b/images/12/index-html.png
diff --git a/images/12/install-create-react-app.jpg b/images/12/install-create-react-app.jpg
diff --git a/images/12/install-create-react-app.png b/images/12/install-create-react-app.png
diff --git a/images/12/npm-start.jpg b/images/12/npm-start.jpg
diff --git a/images/12/npm-start.png b/images/12/npm-start.png
diff --git a/images/12/tree.jpg b/images/12/tree.jpg
diff --git a/images/12/tree.png b/images/12/tree.png
diff --git a/images/13/children-map.jpg b/images/13/children-map.jpg
diff --git a/images/13/children-map.png b/images/13/children-map.png
diff --git a/images/13/run-no-key.jpg b/images/13/run-no-key.jpg
diff --git a/images/13/run-no-key.png b/images/13/run-no-key.png
diff --git a/images/14/install-fetch.jpg b/images/14/install-fetch.jpg
diff --git a/images/14/install-fetch.png b/images/14/install-fetch.png
diff --git a/images/17/install-react-router.jpg b/images/17/install-react-router.jpg
diff --git a/images/17/install-react-router.png b/images/17/install-react-router.png
diff --git a/images/19/home-time.jpg b/images/19/home-time.jpg
diff --git a/images/19/home-time.png b/images/19/home-time.png
diff --git a/images/19/install-redux.jpg b/images/19/install-redux.jpg
diff --git a/images/19/install-redux.png b/images/19/install-redux.png
diff --git a/images/19/no-reducer.jpg b/images/19/no-reducer.jpg
diff --git a/images/19/no-reducer.png b/images/19/no-reducer.png
diff --git a/images/19/structure.jpg b/images/19/structure.jpg
diff --git a/images/19/structure.png b/images/19/structure.png
diff --git a/images/20/home-time.jpg b/images/20/home-time.jpg
diff --git a/images/20/home-time.png b/images/20/home-time.png
diff --git a/images/20/login-logout.gif b/images/20/login-logout.gif
diff --git a/images/23/first-tests.jpg b/images/23/first-tests.jpg
diff --git a/images/23/first-tests.png b/images/23/first-tests.png
diff --git a/images/23/second-tests.jpg b/images/23/second-tests.jpg
diff --git a/images/23/second-tests.png b/images/23/second-tests.png
diff --git a/images/24/failing-test-1.jpg b/images/24/failing-test-1.jpg
diff --git a/images/24/failing-test-1.png b/images/24/failing-test-1.png
diff --git a/images/24/failing-test-2.jpg b/images/24/failing-test-2.jpg
diff --git a/images/24/failing-test-2.png b/images/24/failing-test-2.png
diff --git a/images/24/navbar.jpg b/images/24/navbar.jpg
diff --git a/images/24/navbar.png b/images/24/navbar.png
diff --git a/images/24/passing-test-1.jpg b/images/24/passing-test-1.jpg
diff --git a/images/24/passing-test-1.png b/images/24/passing-test-1.png
diff --git a/images/25/enzyme-test-1.jpg b/images/25/enzyme-test-1.jpg
diff --git a/images/25/enzyme-test-1.png b/images/25/enzyme-test-1.png
diff --git a/images/25/enzyme-test-2.jpg b/images/25/enzyme-test-2.jpg
diff --git a/images/25/enzyme-test-2.png b/images/25/enzyme-test-2.png
diff --git a/images/25/enzyme-test-3.jpg b/images/25/enzyme-test-3.jpg
diff --git a/images/25/enzyme-test-3.png b/images/25/enzyme-test-3.png
diff --git a/images/26/nightwatch-1.jpg b/images/26/nightwatch-1.jpg
diff --git a/images/26/nightwatch-1.png b/images/26/nightwatch-1.png
diff --git a/images/26/nightwatch-2.jpg b/images/26/nightwatch-2.jpg
diff --git a/images/26/nightwatch-2.png b/images/26/nightwatch-2.png
diff --git a/images/26/nightwatch-3.jpg b/images/26/nightwatch-3.jpg
diff --git a/images/26/nightwatch-3.png b/images/26/nightwatch-3.png
diff --git a/images/26/npm-start.jpg b/images/26/npm-start.jpg
diff --git a/images/26/npm-start.png b/images/26/npm-start.png
diff --git a/images/26/selenium.jpg b/images/26/selenium.jpg
diff --git a/images/26/selenium.png b/images/26/selenium.png
diff --git a/images/28/bitballoon.jpg b/images/28/bitballoon.jpg
diff --git a/images/28/bitballoon.png b/images/28/bitballoon.png
diff --git a/images/28/gh-pages.jpg b/images/28/gh-pages.jpg
diff --git a/images/28/gh-pages.png b/images/28/gh-pages.png
diff --git a/images/28/git-branch.jpg b/images/28/git-branch.jpg
diff --git a/images/28/git-branch.png b/images/28/git-branch.png
diff --git a/images/28/github-pages.jpg b/images/28/github-pages.jpg
diff --git a/images/28/github-pages.png b/images/28/github-pages.png
diff --git a/images/28/github-repo.jpg b/images/28/github-repo.jpg
diff --git a/images/28/github-repo.png b/images/28/github-repo.png
diff --git a/images/28/github-url.jpg b/images/28/github-url.jpg
diff --git a/images/28/github-url.png b/images/28/github-url.png
diff --git a/images/28/heroku-create.jpg b/images/28/heroku-create.jpg
diff --git a/images/28/heroku-create.png b/images/28/heroku-create.png
diff --git a/images/28/heroku-deploy.jpg b/images/28/heroku-deploy.jpg
diff --git a/images/28/heroku-deploy.png b/images/28/heroku-deploy.png
diff --git a/images/28/heroku-login.jpg b/images/28/heroku-login.jpg
diff --git a/images/28/heroku-login.png b/images/28/heroku-login.png
diff --git a/images/28/heroku-plugin.jpg b/images/28/heroku-plugin.jpg
diff --git a/images/28/heroku-plugin.png b/images/28/heroku-plugin.png
diff --git a/images/28/heroku-static-init.jpg b/images/28/heroku-static-init.jpg
diff --git a/images/28/heroku-static-init.png b/images/28/heroku-static-init.png
diff --git a/images/28/heroku.jpg b/images/28/heroku.jpg
diff --git a/images/28/heroku.png b/images/28/heroku.png
diff --git a/images/28/npm-build.jpg b/images/28/npm-build.jpg
diff --git a/images/28/npm-build.png b/images/28/npm-build.png
diff --git a/images/28/pancake.jpg b/images/28/pancake.jpg
diff --git a/images/28/pancake.png b/images/28/pancake.png
diff --git a/images/28/s3.jpg b/images/28/s3.jpg
diff --git a/images/28/s3.png b/images/28/s3.png
diff --git a/images/28/surge-deploy.jpg b/images/28/surge-deploy.jpg
diff --git a/images/28/surge-deploy.png b/images/28/surge-deploy.png
diff --git a/images/28/surge.jpg b/images/28/surge.jpg
diff --git a/images/28/surge.png b/images/28/surge.png
diff --git a/images/29/deploy-fail.jpg b/images/29/deploy-fail.jpg
diff --git a/images/29/deploy-fail.png b/images/29/deploy-fail.png
diff --git a/images/29/deploy-script.jpg b/images/29/deploy-script.jpg
diff --git a/images/29/deploy-script.png b/images/29/deploy-script.png
diff --git a/images/29/travis-activate-repo.jpg b/images/29/travis-activate-repo.jpg
diff --git a/images/29/travis-activate-repo.png b/images/29/travis-activate-repo.png
diff --git a/images/29/travis-output.jpg b/images/29/travis-output.jpg
diff --git a/images/29/travis-output.png b/images/29/travis-output.png
diff --git a/images/29/travis-select-repo.jpg b/images/29/travis-select-repo.jpg
diff --git a/images/29/travis-select-repo.png b/images/29/travis-select-repo.png
diff --git a/images/29/travis-setup.jpg b/images/29/travis-setup.jpg
diff --git a/images/29/travis-setup.png b/images/29/travis-setup.png
diff --git a/images/headings/1.jpg b/images/headings/1.jpg
diff --git a/images/headings/10.jpg b/images/headings/10.jpg
diff --git a/images/headings/10_wide.jpg b/images/headings/10_wide.jpg
diff --git a/images/headings/11.jpg b/images/headings/11.jpg
diff --git a/images/headings/11_wide.jpg b/images/headings/11_wide.jpg
diff --git a/images/headings/12.jpg b/images/headings/12.jpg
diff --git a/images/headings/12_wide.jpg b/images/headings/12_wide.jpg
diff --git a/images/headings/13.jpg b/images/headings/13.jpg
diff --git a/images/headings/13_wide.jpg b/images/headings/13_wide.jpg
diff --git a/images/headings/14.jpg b/images/headings/14.jpg
diff --git a/images/headings/14_wide.jpg b/images/headings/14_wide.jpg
diff --git a/images/headings/15.jpg b/images/headings/15.jpg
diff --git a/images/headings/15_wide.jpg b/images/headings/15_wide.jpg
diff --git a/images/headings/16.jpg b/images/headings/16.jpg
diff --git a/images/headings/16_wide.jpg b/images/headings/16_wide.jpg
diff --git a/images/headings/17.jpg b/images/headings/17.jpg
diff --git a/images/headings/17_wide.jpg b/images/headings/17_wide.jpg
diff --git a/images/headings/18.jpg b/images/headings/18.jpg
diff --git a/images/headings/18_wide.jpg b/images/headings/18_wide.jpg
diff --git a/images/headings/19.jpg b/images/headings/19.jpg
diff --git a/images/headings/19_wide.jpg b/images/headings/19_wide.jpg
diff --git a/images/headings/1_wide.jpg b/images/headings/1_wide.jpg
diff --git a/images/headings/2.jpg b/images/headings/2.jpg
diff --git a/images/headings/20.jpg b/images/headings/20.jpg
diff --git a/images/headings/20_wide.jpg b/images/headings/20_wide.jpg
diff --git a/images/headings/21.jpg b/images/headings/21.jpg
diff --git a/images/headings/21_wide.jpg b/images/headings/21_wide.jpg
diff --git a/images/headings/22.jpg b/images/headings/22.jpg
diff --git a/images/headings/22_wide.jpg b/images/headings/22_wide.jpg
diff --git a/images/headings/23.jpg b/images/headings/23.jpg
diff --git a/images/headings/23_wide.jpg b/images/headings/23_wide.jpg
diff --git a/images/headings/24.jpg b/images/headings/24.jpg
diff --git a/images/headings/24_wide.jpg b/images/headings/24_wide.jpg
diff --git a/images/headings/25.jpg b/images/headings/25.jpg
diff --git a/images/headings/25_wide.jpg b/images/headings/25_wide.jpg
diff --git a/images/headings/26.jpg b/images/headings/26.jpg
diff --git a/images/headings/26_wide.jpg b/images/headings/26_wide.jpg
diff --git a/images/headings/27.jpg b/images/headings/27.jpg
diff --git a/images/headings/27_wide.jpg b/images/headings/27_wide.jpg
diff --git a/images/headings/28.jpg b/images/headings/28.jpg
diff --git a/images/headings/28_wide.jpg b/images/headings/28_wide.jpg
diff --git a/images/headings/29.jpg b/images/headings/29.jpg
diff --git a/images/headings/29_wide.jpg b/images/headings/29_wide.jpg
diff --git a/images/headings/2_wide.jpg b/images/headings/2_wide.jpg
diff --git a/images/headings/3.jpg b/images/headings/3.jpg
diff --git a/images/headings/30.jpg b/images/headings/30.jpg
diff --git a/images/headings/30_wide.jpg b/images/headings/30_wide.jpg
diff --git a/images/headings/3_wide.jpg b/images/headings/3_wide.jpg
diff --git a/images/headings/4.jpg b/images/headings/4.jpg
diff --git a/images/headings/4_wide.jpg b/images/headings/4_wide.jpg
diff --git a/images/headings/5.jpg b/images/headings/5.jpg
diff --git a/images/headings/5_wide.jpg b/images/headings/5_wide.jpg
diff --git a/images/headings/6.jpg b/images/headings/6.jpg
diff --git a/images/headings/6_wide.jpg b/images/headings/6_wide.jpg
diff --git a/images/headings/7.jpg b/images/headings/7.jpg
diff --git a/images/headings/7_wide.jpg b/images/headings/7_wide.jpg
diff --git a/images/headings/8.jpg b/images/headings/8.jpg
diff --git a/images/headings/8_wide.jpg b/images/headings/8_wide.jpg
diff --git a/images/headings/9.jpg b/images/headings/9.jpg
diff --git a/images/headings/9_wide.jpg b/images/headings/9_wide.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,176 @@
+<!--
+title: 30 Days of React
+layout: page.html
+series: 30-days-of-react
+permalink: ''
+pageJS: 30-days.js
+isIndex: "true"
+numFree: 22
+published: false
+bodyClasses: landingpage
+noInclude: true
+-->
+
+<!-- Note, this file is for fullstackreact.com internal use -->
+
+{% import 'partials/macros/common.nunjucks' as common %}
+{% import 'partials/macros/homepage.nunjucks' as home %}
+{% import 'partials/macros/burger.nunjucks' as burger %}
+
+{% block content %}
+<div class="thirty-days">
+  <main class="main">
+    <div class="intro-banner" >
+			<img src="/assets/images/30days/30-days-of-react-header.jpg" alt="30 Days of React">
+    </div><!-- /.intro-banner -->
+
+    <div class="section-marketing">
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-2 col-md-1 col-sm-1">
+          </div>
+          <div class="col-lg-6 col-md-8 col-sm-7 col-xs-12">
+
+            <div class="section-body">
+              <p>Interested in Learning React but having trouble getting started?</p>
+
+              <!--
+                  <p class='feeling-lost'>Are you feeling a little lost in all the jargon?</p>
+
+              <p class='jargon'><tt>JSX</tt>, <tt>Props</tt>, <tt>Webpack</tt>, <tt>Redux</tt>, <tt>Enzyme</tt>, <tt>Presentational Components</tt>, <tt>Middleware</tt>, <tt>State</tt>, <tt>Hooks</tt>, <tt>Pure Components</tt>... </p>
+
+              <p>Does it feel like <b>everyone else</b> seems to know how these things fit together?</p>
+              -->
+
+              <p>We'll teach you how it all works - <em>for free</em></p>
+
+              <p>Over the next 30 days, we'll walk through everything you need to know to work with React. From the <b>very beginning</b> through <b>testing and deployment</b> of our first app.</p>
+            </div><!-- /.section-body -->
+
+            <div class="section-foot">
+              <a href="https://app.monstercampaigns.com/c/opsh28ygz42xhvtlq4vd/" target="_blank" class="manual-optin-trigger btn btn-default" data-optin-slug="opsh28ygz42xhvtlq4vd">Download the free 300+ page PDF</a>
+            </div><!-- /.section-foot -->
+          </div>
+
+          <div class="col-lg-2 col-md-3 col-sm-4 hidden-xs">
+            <div class="mini-book-preview">
+              <img src="/assets/images/30days/30-days-of-react-book-cover-2-as-book-220.png" alt="30 Days of React Mini-Ebook">
+            </div>
+          </div>
+        </div>
+      </div><!-- /.container -->
+    </div><!-- /.section-cta -->
+
+    <div class="section-chapters">
+      <div class="container">
+        <div class="section-body">
+          <div class="row">
+
+          {% for day in collections.thirtyDays %}
+            {% if day.protectedPreview %}
+              {{ burger.nolinkDayPost(day, loop.index0) }}
+            {% else -%}
+              {{ burger.dayPost(day, loop.index0) }}
+            {% endif -%}
+          {% endfor -%}
+
+          </div>
+        </div><!-- /.section-body -->
+      </div><!-- /.container -->
+    </div><!-- /.section-chapters -->
+
+    <div class="section-promo">
+      <div class="container">
+        <div class="promo-box">
+          <div class="promo-box-bg"></div><!-- /.promo-box-bg -->
+
+          <div class="promo-box-inner">
+            <div class="promo-box-image">
+              <img src="/assets/images/icon-orange.png" alt="" width="257" height="281">
+            </div><!-- /.promo-box-image -->
+
+            <div class="promo-box-body">
+              <h2>FAQ</h2>
+
+              <dl>
+                <dt>What is this?</dt>
+                <dl>This course is a series of articles which teach you how to use React from the ground up. The series provides a step-by-step process you can use to learn React from an empty folder to a deployed React app.</dl>
+
+                <dt>What if I get stuck?</dt>
+                <dl>Just <a href="mailto:react@fullstack.io">send us an email</a> and we'll be happy to help you get unstuck</dl>
+
+                <dt>Who wrote this?</dt>
+                <dl>We're the authors of the <a href="/">Fullstack React Book</a> </dl>
+
+                <p class="promo-box-action">
+                  <a href="https://app.monstercampaigns.com/c/opsh28ygz42xhvtlq4vd/" target="_blank" class="manual-optin-trigger btn btn-default" data-optin-slug="opsh28ygz42xhvtlq4vd">Enroll in this free course</a>
+              </p>
+            </div><!-- /.promo-box-body -->
+          </div><!-- /.promo-box-inner -->
+        </div><!-- /.promo-box -->
+      </div><!-- /.container -->
+    </div><!-- /.section-promo -->
+
+    <section class="section-authors">
+      <div class="container">
+        <header class="section-head">
+          <h1 class="section-title">
+            <span>Course Author</span>
+          </h1><!-- /.section-title -->
+        </header><!-- /.section-head -->
+
+        <div class="section-body">
+          <div class="author-simple">
+            {% include "partials/bios/ari.html" %}
+          </div><!-- /.author-simple -->
+        </div><!-- /.section-body -->
+      </div><!-- /.container -->
+    </section><!-- /.section-authors -->
+
+    <section class="section-promise section-promise-alt"
+      style="background-image: url(/assets/images/backgrounds/section-sample-code.jpg)"
+    >
+      <div class="container">
+        <div class="section-inner">
+          <header class="section-head">
+            <h1 class="section-title white">Get started now</h1><!-- /.section-title -->
+
+            <p>Join us on our 30-day journey in React. Join thousands of other professional React developers and learn one of the most powerful web application development frameworks available today. </p>
+          </header><!-- /.section-head -->
+
+          <div class="section-body">
+            <form class="form-inline" target="_blank" novalidate=""
+                  accept-charset="UTF-8" action="https://fd338.infusionsoft.com/app/form/process/a6e7d4fdf2891b50a87effa8540f834d" class="infusion-form" method="POST"
+                  >
+              <input name="inf_form_xid" type="hidden" value="a6e7d4fdf2891b50a87effa8540f834d" />
+              <input name="inf_form_name" type="hidden" value="30 Days of React Form Submitted" />
+              <input name="infusionsoft_version" type="hidden" value="1.59.0.51" />
+
+              <div class="section-entry">
+                <div class="form-row">
+                  <label for="field-email" class="form-label">email</label>
+
+                  <div class="form-controls">
+                    <input type="email" class="field" id="inf_field_Email" name="inf_field_Email" placeholder="Put in your email address">
+                    <input type="hidden" name="FORMID" value="DailyUI-Landing-a">
+
+                    <small>No spam ever. Easy to unsubscribe.</small>
+                  </div><!-- /.form-controls -->
+                </div><!-- /.form-row -->
+              </div><!-- /.section-entry -->
+
+              <div class="section-actions">
+                <button type="submit" id="mc-embedded-subscribe" class="btn btn-default">
+            <i class="glyphicon glyphicon-envelope"></i>
+            DOWNLOAD 30 DAYS OF REACT PDF (FREE)
+          </button>
+              </div><!-- /.section-actions -->
+            </form>
+          </div><!-- /.section-body -->
+        </div><!-- /.section-inner -->
+      </div><!-- /.container -->
+    </section><!-- /.section-promise -->
+  </main><!-- /.main -->
+</div><!-- /.wrapper -->
+
+{% endblock %}