New react articles (skillrecordings#140)

* added new 'wtf is react' article

* updated nav links on main pages

* added wtf is jsx article

* added outline of es6 article

* added js before react article

Co-authored-by: Maggie Appleton <maggie.fm.appleton@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/pages/learn/javascript/es6.mdx

@@ -0,0 +1,61 @@
+export const meta = {
+  title: `A Guide to ES6`,
+  contributors: ['Hiro Nishimura'],
+}
+
+import FancyGuideLayout from 'layouts/fancy-guide'
+export default ({children}) => (
+  <FancyGuideLayout frontMatter={meta}>{children}</FancyGuideLayout>
+)
+
+<ProseSection>
+
+
+## What is ES6?
+
+- ECMAScript 6, JavaScript 6, or ECMAScript 2015
+  - ECMAScript: European Computer Manufacturers Association
+- “6th version” of JavaScript, released in 2015
+- Some notable features include:
+  - addition of Constants
+  - Block-Scoped Variables and Functions
+  - Arrow Functions
+  - Default Function Parameters
+
+## Why does ES6 exist?
+
+## Short history of JavaScript
+
+https://webapplog.com/es6/
+
+1995: JavaScript is born as LiveScript
+1997: ECMAScript standard is established
+1999: ES3 comes out and IE5 is all the rage
+2000–2005: XMLHttpRequest, a.k.a. AJAX
+2009: ES5 comes out (this is what most of us use now) with forEach, Object.keys, Object.create, and standard JSON
+2015: ES6/ECMAScript2015 comes out;
+
+## “Top 10 Best Features”
+
+https://webapplog.com/es6/
+
+- Default Parameters in ES6
+- Template Literals in ES6
+- Multi-line Strings in ES6
+- Destructuring Assignment in ES6
+- Enhanced Object Literals in ES6
+- Arrow Functions in ES6
+- Promises in ES6
+- Block-Scoped Constructs Let and Const
+- Classes in ES6
+- Modules in ES6
+
+Resources:
+https://www.w3schools.com/Js/js_es6.asp
+https://www.educba.com/what-is-es6/
+https://www.tutorialspoint.com/es6/index.htm
+http://es6-features.org
+https://webapplog.com/es6/
+
+</ProseSection>
+

src/pages/learn/react/beginners/index.mdx

@@ -0,0 +1,12 @@
+export const meta = {
+  title: `React for Beginners`,
+}
+
+import UltimateGuide from 'layouts/ultimate-guide'
+export default ({children}) => (
+  <UltimateGuide frontMatter={meta}>{children}</UltimateGuide>
+)
+
+- [WTF is React?](/learn/react/beginners/wtf-is-react)
+- [WTF is JSX?](/learn/react/beginners/wtf-is-jsx)
+- [JavaScript Prerequisites before React](/learn/react/beginners/js-before-react)

src/pages/learn/react/beginners/js-before-react.mdx

@@ -0,0 +1,49 @@
+export const meta = {
+  title: `JavaScript Prerequisites before React`,
+  contributors: ['Hiro Nishimura'],
+}
+
+import FancyGuideLayout from 'layouts/fancy-guide'
+export default ({children}) => (
+  <FancyGuideLayout frontMatter={meta}>{children}</FancyGuideLayout>
+)
+
+<ProseSection>
+
+
+While we don’t believe you need to be a JavaScript Master (™) in order to begin learning about React, it will benefit you to have the core JavaScript concepts and syntax under your belt before embarking on your React journey.
+
+Anything you do with React, you can do with “vanilla” JavaScript. This is because React is a JavaScript framework. To learn more about the relationship between JavaScript and React, we recommend that you check out our [Introduction to React](/learn/react/beginners/wtf-is-react).
+
+You should also be fairly comfortable with HTML and CSS before you start, as you’ll be building on those skills along with JavaScript fundamentals when you begin coding in React.
+
+## JavaScript Fundamentals Checklist
+
+- [The Real Introduction to JavaScript]()
+  - JavaScript is a programming language that is written using “scripts,” and can be written directly into the website HTML. It is loaded automatically when the website is loaded in the browser, and its major purpose is to enhance user interaction on a website.
+- ECMAScript 6 (ES6)
+  - ES6 (aka: ECMAScript 6, JavaScript 6, or ECMAScript 2015) is the “6th version” of JavaScript, released in 2015. Some notable features include the addition of Constants, Block-Scoped Variables and Functions, Arrow Functions, and Default Function Parameters, amongst others.
+- JavaScript Syntax Fundamentals
+  - Arrays, Objects
+  - Data Types (string, number, boolean, null, undefined, array, object)
+  - Spread Operator
+  - Destructuring
+  - Ternary Operator
+- [The Document Object Model (DOM)](/learn/javascript/the-dom)
+
+## Modern JavaScript Essentials for React
+
+Sometimes, when you don’t come in with extensive background in JavaScript development, you might get a little confused on what part of “React” you’re writing or using is React, and what part is actually just vanilla JavaScript.
+
+Dave Ceddia has created a course to help you decipher just that, called “[Modern JavaScript Essentials for React](https://egghead.io/courses/modern-javascript-essentials-for-react).” Even if you have experience with coding in JavaScript, taking this course may be a great way to review some vital concepts that will help you begin learning React with confidence!
+
+<Callout>
+
+
+Watch [Modern JavaScript Essentials for React](https://egghead.io/courses/modern-javascript-essentials-for-react)
+
+</Callout>
+
+
+</ProseSection>
+

src/pages/learn/react/beginners/wtf-is-jsx.mdx

@@ -0,0 +1,100 @@
+export const meta = {
+  title: `WTF is JSX?`,
+  contributors: ['Hiro Nishimura'],
+}
+
+import FancyGuideLayout from 'layouts/fancy-guide'
+export default ({children}) => (
+  <FancyGuideLayout frontMatter={meta}>{children}</FancyGuideLayout>
+)
+
+<ProseSection>
+
+
+When you peer closely at some React code, you might begin to find some suspiciously-HTML-like code embedded inside the JavaScript.
+
+<!-- [Insert example of simple React code with some JSX] -->
+
+What is this suspiciously-HTML-like code, and how does it work within React?
+
+## JSX: JavaScript XML
+
+These snippets of suspiciously-HTML-like code are not HTML, but a syntax extension to JavaScript based on ES6 called “JavaScript XML.”
+
+More commonly referred to as “JSX,” JavaScript XML is a form of markup that allows us to write HTML in React by converting HTML tags into React elements.
+
+Utilizing JSX allows us to write HTML elements in JavaScript, which is then rendered to the DOM.
+
+<Callout>
+
+
+ES6 (aka: ECMAScript 6, JavaScript 6, or ECMAScript 2015) is the “6th version” of JavaScript, released in 2015. Some notable features include the addition of Constants, Block-Scoped Variables and Functions, Arrow Functions, and Default Function Parameters, amongst others.
+
+</Callout>
+
+
+Let’s take a look at an example of what happens when JSX is “translated” into React!
+
+<!--[insert example comparison code that compared JSX and JSX output (not this one; this one was yoinked from here)] -->
+
+Comparing the JSX code to the output, you might notice that when JSX is “translated” into React, it adds quite a bit of complexity to the code.
+
+Utilizing JSX instead of writing directly in React allows you to write cleaner code that is easier to write, edit, and read.
+
+When you write code in JSX, it is converted “behind the scenes” into JavaScript during runtime. The “translation” from JSX into JavaScript and React is done through the use of [Babel](https://babeljs.io/), which compiles your code into an older version of JavaScript (ES5) that all browsers support.
+
+By “translating” your ES6 into ES5, you don’t have to worry about your code not working on various browsers that don’t yet support ES6!
+
+As you can see, each tag in JSX serves as a “function call” that creates an element using
+`createElement()`.
+
+With the magic of Babel “translation,” you don’t have to worry about inserting the `createElement()` yourself!
+
+## Why JSX?
+
+Using JSX when writing React is not a requirement, but it makes creating React applications easier, allowing you to describe what the UI should look like in HTML. According to its creators, JSX is a “template language” that comes with the “full power of JavaScript.”
+
+Not only do people find JSX to be helpful visual aids when working with JavaScript UI, utilizing JSX allows React to show more useful error messages and warnings for easier debugging. If HTML is not correct or misses a parent element, JSX will throw an error your way so you can immediately correct it.
+
+When coding, one option is to separate the markup and logic in separate files. React decided to combine them into loosely coupled units called “components.” Utilizing JSX allows us to combine the markup (JSX) and logic (JavaScript), creating an output that is “translated” into JavaScript function calls.
+
+## JSX Syntax
+
+First, let’s review some good housekeeping tips to write clean JSX code:
+
+- Split code over multiple lines to make it easier to read
+- Wrap the function in parentheses ( ) to avoid automatic semicolon insertion
+- HTML must be wrapped in _one_ top-level element
+- Write expressions inside curly braces { }
+- Use an array when you have more than one child element
+
+Each tag in JSX is a” function call” that creates an element. When the JSX is “translated” in to React, you get back something like this:
+
+`function createElement(elementType, props, ...children) {}`
+
+This is because each tag creates an element using the `createElement()` function.
+There are 3 parameters passed into
+`createElement()`:
+
+`elementType` define type of element to create
+
+`props` define attributes for element (ie: `id` or `style`)
+
+`props` stands for “properties,” and they are arguments passed into React components
+
+`children` define the element’s child(ren) - if any
+
+<!--[insert example comparison code that compared JSX and JSX output (not this one; this one was yoinked from here) - this is same one from above!!] -->
+
+Looking back again at the JSX and output example from above, can you identify how the 3 parameters are being declared in JSX to be rendered into React?
+
+- Parameter 1:
+- Parameter 2:
+- Parameter 3:
+
+### In Conclusion.. JSX is cool!
+
+JSX stands for “JavaScript XML,” and it is a syntax extension to JavaScript based in ES6, the newest “version” of JavaScript. JSX allows you to write HTML in React by converting HTML into React components, helping you to more easily create user interfaces for your web applications. While it’s not necessary to use JSX when coding in React, it makes the development and debugging process easier for many developers.
+
+</ProseSection>
+

src/pages/learn/react/beginners/wtf-is-react.mdx

@@ -0,0 +1,113 @@
+export const meta = {
+  title: `WTF is React?`,
+  contributors: ['Hiro Nishimura'],
+}
+
+import FancyGuideLayout from 'layouts/fancy-guide'
+export default ({children}) => (
+  <FancyGuideLayout frontMatter={meta}>{children}</FancyGuideLayout>
+)
+
+<ProseSection>
+
+
+“What should I learn if I want to get started with web development?” You might ask. “I learned HTML and CSS, and am ready to move on to bigger and greater things!”
+“You should totally learn React!” the internet might respond.
+“Sounds good,” you say. “So… What is React?"
+
+## React in a Flash
+
+- React is an open-source JavaScript library
+- Used to build quick and interactive user interfaces
+- For both Web and Mobile applications
+- Uses reusable “components” to speed up development
+
+## What _is_ React?
+
+For the 8th year in a row, JavaScript was cited as the most commonly used programming language according to [Stackoverflow’s 2020 Developer Survey](https://insights.stackoverflow.com/survey/2020). After that came HTML and CSS.
+
+This is very convenient for us, because React is a JavaScript library! And an extremely popular one at that! According to the same survey, 36% of over 42,000 respondents said that they use React.js, second only to jQuery (another JavaScript library), which 43% of respondents use.
+
+React is a JavaScript library to create interactive user interfaces.
+
+<Callout>
+
+
+New to JavaScript?
+Read our [real introduction to JavaScript](/learn/javascript)
+
+</Callout>
+
+
+You can think of JavaScript like ingredients to the best burrito bowl of your dreams… And while you can very much spend a few hours sourcing all the best ingredients from a couple of grocery stores and reading the recipe, you could also order a meal kit with all the ingredients pre-portioned. When it arrives at your door, it’s ready for you to throw together to quickly create the meal. You’ll get a tasty burrito bowl either way, but one way is considerably quicker and easier than the other, and much easier to replicate time after time.
+
+## A "library"...?
+
+Now, you might be thinking, “What’s a ‘library’?” As you may have guessed, we aren’t talking about the publicly-funded location to borrow books.
+
+However, we are talking about an open-source location to “borrow” functions to use. Simply put, a library is a collection of “functions” that help speed up the development process.
+
+React is a “library” (or a “bunch of code files”) of pre-written JavaScript that helps to make websites more powerful and efficient for you, the developer.
+
+Like a meat sauce out of your favorite brand’s sauce jar, it’s made and ready for you to mix together with other ingredients to create your favorite pasta dish. Best part is, it’ll come out tasting the same every single time. Yum!
+
+React will allow you to utilize pre-coded “components” so that you can spend more time on parts of the web application that sets you apart from others.
+
+## Why React?
+
+You can do everything React does by writing your own code in “vanilla” JavaScript. However, the React team wrote a huge library of functions out for us to borrow and utilize, which makes our lives much easier.
+
+<!-- [insert imagery of starting from scratch building furniture vs ikea-y plan + pre-portioned materials] -->
+
+On one hand, we have a desire for a new dining table. We can create a plan for building a dining table, and with our shiny new plan, we can go into the woods, and find a tree to chop down and create all the parts of a dining table. Then, hopefully, you’ll be able to assemble it into a dining table without getting too many splinters… or splintered wood.
+
+On the other hand, we can go to IKEA and collect a kit filled with pre-cut, pre-painted, and pre-measured ingredients to create that picture-perfect dining table. And it even comes with instructions!
+
+There’s no “right” or “wrong” choice when you choose how you will build your dining table. But picking the IKEA kit will definitely make the process much simpler. It’ll also be much easier to replicate when all of your friends want one too!
+
+## React is very popular!
+
+If you do decide to learn React and utilize it for your corporate or personal project, you’re in good company! Major companies like Facebook, Dropbox, Reddit, and Postmates utilize React in production. On top of that, companies like Walmart, Tesla, and Wix utilize React Native, a framework for creating mobile applications using React to create their mobile applications.
+
+What’s more, 69% of those who use React say they love it, and 22% of those who currently don’t know React say they want to learn, according to [Stack Overflow’s Developer Survey 2020](https://insights.stackoverflow.com/survey/2020)! It is a skill that is in high demand, both by major corporations and developers.
+
+## React Components: Reuse Code at Will!
+
+One of the main features of React is that you utilize functions, called “components,” and save them as pre-built blocks of code to reuse over and over again within your application or website. With JavaScript, every time you wanted to reuse a specific function, you would need to rewrite the code from scratch. With React, you can create a “component” and toss it into your code to reuse whenever you want.
+
+<!-- [image of a flying meal-kit box and a completed meal?] -->
+
+If you’ve tried playing around with Cascading Style Sheets (CSS) to stylize your HTML pages, you might recognize that this concept is similar to utilizing “class.” In CSS, you can use “class” to create specific stylistic effects that you can apply in different parts of the web page without having to rewrite the code stored in the stylesheet.
+
+Long story short, you can think of React Components like “building blocks” that create the user interface for your website or application. Adding up the various “blocks” creates the full visitor experience we enjoy as users of the web application or site.
+
+<!-- lego blocks? -->
+
+To conceptualize what React Components may look like, let’s take a very basic webpage layout, with a Header, Navigation, Main Content Area, and Footer. Each section on the website can be a React Component.
+
+<!-- [Insert interactive (greensock?) diagram with a simple website with header, navigation, main area, and footer being split into different “components” with squares around them with labels] -->
+
+To drill down further, let’s think about a familiar Social Media frontpage.
+
+Here, we can see a lot of components. The navigation, the “Tweet” button, the search, the published tweets themselves, the input box… Can you identify some more potential “components” in a Twitter feed?
+
+<!-- [Wireframe version of Twitter to identify the components that reveal the “answer” to the question above once they scroll by separating out?] -->
+
+While you can do everything React can do using “vanilla” JavaScript, learning and utilizing React will allow you to create your web and mobile applications more efficiently. As one of the most popular frameworks utilized by large corporations, it is a skill that will likely benefit you in your developer career.
+
+## JavaScript before React?
+
+Because React is a JavaScript library, having fundamental knowledge of JavaScript is recommended before diving in. However, we don’t think you need to be a JavaScript Master (™) to begin learning React.
+
+Interested in learning React, but don’t know JavaScript? We’ll go over essential JavaScript concepts to learn before diving into React!
+
+<Callout>
+
+
+Read our article on the [JavaScript Concepts you Need to Learn before React]()
+
+</Callout>
+
+
+</ProseSection>
+

src/pages/learn/react/index.mdx

@@ -12,6 +12,7 @@ export default ({children}) => (
 
 If you want to learn React you are going to need to learn to **think** in React. Your JavaScript skills will get you started, but React will use everything you know about JavaScript (or TypeScript!) and take it to the next level.
 
+- [React for Beginners](/learn/react/beginners)
 - [React Hooks](/learn/react/hooks)
 - [Accessibility](/learn/react/accessibility)
 - [React Components](/learn/react/components)