cssquirrel · January 3, 2018 16:58 · Jan 3, 2018 · Jan 3, 2018 · Jan 3, 2018
diff --git a/react-v16-components.md b/react-v16-components.md
@@ -1,10 +1,12 @@
-Suppose that you are calling a ```Foo``` component in your React code like so:
+Here's a quick rundown on what's going on with React v16 components.
+
+Suppose that you are calling a `Foo` component in your React code like so:
 
 ```
   <Foo name="Fred" />
 ```
 
-In earlier versions of React, ```Foo``` may have looked something like this, using ```React.createclass()```:
+In earlier versions of React, `Foo` may have looked something like this, using `React.createclass()`.
 
 ```
 var Foo = React.createClass({
@@ -48,3 +50,4 @@ const Foo = (props) => {
 }
 ```
 
+You can learn a bit [more about functional stateless components here](https://javascriptplayground.com/blog/2017/03/functional-stateless-components-react/), [more about ES6 classes here](https://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/), and [more about fat arrow notation here](https://developer.ibm.com/node/2015/09/21/an-introduction-to-javascript-es6-arrow-functions/).
diff --git a/react-v16-components.md b/react-v16-components.md
@@ -1,7 +1,11 @@
+Suppose that you are calling a ```Foo``` component in your React code like so:
+
 ```
   <Foo name="Fred" />
 ```
 
+In earlier versions of React, ```Foo``` may have looked something like this, using ```React.createclass()```:
+
 ```
 var Foo = React.createClass({
   render: function() {
@@ -10,6 +14,8 @@ var Foo = React.createClass({
 });
 ```
 
+Since React v15, this has been deprecated and React now uses ES6 classes for declaring stateful components. Which looks like:
+
 ```
 class Foo extends React.Component {
   constructor (props) {
@@ -22,8 +28,23 @@ class Foo extends React.Component {
 };
 ```
 
+However, React also now includes the ability to use what are known as **functional stateless components** for enabling the consistent rendering of simpler components that don't need to have internal state management. It's considered a best practice to use FSCs whenever possible, as it makes the code smaller, easier to read, and forces the developer to keep logic and rendering seperate whenever possible.
+
+An FSC can look like this:
+
+```
+const Foo = function(props) {
+  return (<div>Hello, {props.name}!</div>);
+}
+```
+
+Something you'll notice right away is that it's just a normal function instead of a class or an object literal, with the props being passed in as a parameter, and the return value being the JSX component itself. There's no React lifecycle functions (since it itself is a function), and the returned JSX component is what is rendered. There's also no need for `this`, so `this.props` becomes `props`.
+
+Furthermore, modern JS usage includes ES2015 functionality like arrow functions, which utilize the "fat arrow" (`=>`), which causes our FSC to look instead like this:
+
 ```
 const Foo = (props) => {
   return (<div>>Hello, {props.name}!</div>);
 }
-```
+```
+
diff --git a/react-v16-components.md b/react-v16-components.md
@@ -0,0 +1,29 @@
+```
+  <Foo name="Fred" />
+```
+
+```
+var Foo = React.createClass({
+  render: function() {
+    return (<div>Hello, {this.props.name}!</div>);
+  }
+});
+```
+
+```
+class Foo extends React.Component {
+  constructor (props) {
+    // Can do constructery stuff here
+  }
+  
+  render () {
+    return (<div>Hello, {this.props.name}!</div>);
+  }
+};
+```
+
+```
+const Foo = (props) => {
+  return (<div>>Hello, {props.name}!</div>);
+}
+```
No results found