add React - Component Lifecycle

Author: Bunlong

_posts/2018-05-11-react-component-lifecycle.markdown

@@ -0,0 +1,21 @@
+---
+layout: post
+title: React - Component Lifecycle
+date: 2018-05-07
+description: 
+img: react-component-lifecycle.png
+tags: [react, reactjs, learn react]
+---
+
+ReactJS components have three main parts of their lifecycle:
+
+* ***Mounting:*** A component is being inserted into the DOM.
+
+* ***Updating:*** A component is being re-rendered to determine if the DOM should be updated.
+
+* ***Unmounting:*** A component is being removed from the DOM.
+
+React provides lifecycle methods that you can specify to hook into this process. 
+
+We provide `will` methods, which are called right before something happens, and `did` methods which are called right after something happens.
+

_site/index.html

@@ -110,6 +110,18 @@ <h3 class="contact-title">Contact</h3>
 </aside> <!-- End Sidebar -->
 <div class="content-box clearfix">
 
+<article class="post">
+  
+    <a class="post-thumbnail" style="background-image: url(/assets/img/react-component-lifecycle.png)" href="/react-component-lifecycle/"></a>
+  
+  <div class="post-content">
+    <h2 class="post-title"><a href="/react-component-lifecycle/">React - Component Lifecycle</a></h2>
+    <p>ReactJS components have three main parts of their lifecycle: Mounting: A component is being inserted...</p>
+    <span class="post-date">2018, May 07&nbsp;&nbsp;&nbsp;—&nbsp;</span>
+    <span class="post-words">1 minute read</span>
+  </div>
+</article>
+
 <article class="post">
 
     <a class="post-thumbnail" style="background-image: url(/assets/img/react-accessing-child-properties.png)" href="/react-accessing-child-properties/"></a>
@@ -194,18 +206,6 @@ <h2 class="post-title"><a href="/react-advanced-jsx/">React - Advanced JSX</a></
   </div>
 </article>
 
-<article class="post">
-  
-    <a class="post-thumbnail" style="background-image: url(/assets/img/react-introducing-jsx.png)" href="/react-introducing-jsx/"></a>
-  
-  <div class="post-content">
-    <h2 class="post-title"><a href="/react-introducing-jsx/">React - Introducing JSX</a></h2>
-    <p>What is JSX? JSX is a JavaScript syntax extension that looks similar to XML. You...</p>
-    <span class="post-date">2018, May 03&nbsp;&nbsp;&nbsp;—&nbsp;</span>
-    <span class="post-words">2 minute read</span>
-  </div>
-</article>
-
 
 <div class="container">
   <nav class="pagination" role="pagination">

_site/sitemap.xml

@@ -41,6 +41,10 @@
 <lastmod>2018-05-06T00:00:00+07:00</lastmod>
 </url>
 <url>
+<loc>/react-component-lifecycle/</loc>
+<lastmod>2018-05-07T00:00:00+07:00</lastmod>
+</url>
+<url>
 <loc>/</loc>
 </url>
 <url>

_site/tags/index.html

@@ -118,13 +118,13 @@ <h1>Tags in Blog</h1>
 <!--  cycles through tag list and creates header row of all tags used in site with accompanying per-tag counts...-->
 
 
-    <li ><a href="#learn+react" class="tag">learn react <span>(10)</span></a></li>
+    <li ><a href="#learn+react" class="tag">learn react <span>(11)</span></a></li>
 
 
-    <li ><a href="#react" class="tag">react <span>(10)</span></a></li>
+    <li ><a href="#react" class="tag">react <span>(11)</span></a></li>
 
 
-    <li ><a href="#reactjs" class="tag">reactjs <span>(10)</span></a></li>
+    <li ><a href="#reactjs" class="tag">reactjs <span>(11)</span></a></li>
 
   </ul>
 <!--cycles through tag list and creates subheader for each tag name...-->
@@ -133,6 +133,11 @@ <h1>Tags in Blog</h1>
   <h2 id="learn+react">learn react</h2>
 <!--  lists all posts corresponding to specific tag...-->
 
+    <div class="tag-list">
+        <span><a href="/react-component-lifecycle/">React - Component Lifecycle</a></span>
+        <small><span>| 07 May 2018</span></small>
+    </div>
+    
     <div class="tag-list">
         <span><a href="/react-accessing-child-properties/">React - Accessing Child Properties</a></span>
         <small><span>| 06 May 2018</span></small>
@@ -188,6 +193,11 @@ <h2 id="learn+react">learn react</h2>
   <h2 id="react">react</h2>
 <!--  lists all posts corresponding to specific tag...-->
 
+    <div class="tag-list">
+        <span><a href="/react-component-lifecycle/">React - Component Lifecycle</a></span>
+        <small><span>| 07 May 2018</span></small>
+    </div>
+    
     <div class="tag-list">
         <span><a href="/react-accessing-child-properties/">React - Accessing Child Properties</a></span>
         <small><span>| 06 May 2018</span></small>
@@ -243,6 +253,11 @@ <h2 id="react">react</h2>
   <h2 id="reactjs">reactjs</h2>
 <!--  lists all posts corresponding to specific tag...-->
 
+    <div class="tag-list">
+        <span><a href="/react-component-lifecycle/">React - Component Lifecycle</a></span>
+        <small><span>| 07 May 2018</span></small>
+    </div>
+    
     <div class="tag-list">
         <span><a href="/react-accessing-child-properties/">React - Accessing Child Properties</a></span>
         <small><span>| 06 May 2018</span></small>