Commit17 //JavaScript React [Organize Your React Code]

Photo of Sunday morning roller derby practice

I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!

Greetings! ✌️ Forging ahead on my React JS classes. Today I searched for "best music to code to" and stumbled across Stellardrone. 👽🪐🛸 Looks like they stopped making music in 2013. It's electronic outerspace soundscapes from what I can tell. What do you like to listen to when you are coding or researching? Sound off in the comments below!

Using ES6 To Organize Your React

ES6 (ECMAScript 6) - A JavaScript syntax

1. Arrow Functions
2. Modules

Interestingly enough I actually dipped my toes into Arrow Functions in one of my JavaScript30 challenges on Day 4. Now, of course, I didn't really understand what I was doing. So I'm excited that Skillcrush is going to break it down for me!

Here's an example of the difference between ES5 and ES6.

//ES5
function es5Function (name) {
   return "Hello, " + name + "!";
}

//ES6
const es6Function = name => "Hi, " + name + "!";

Arrow Function - It's called this because of the "fat arrow" =>. Using => in a simple function is called an implicit return.

If you only have one argument or parameter you don't need to use the parenthesis ().

Curly braces will still come into play when using more than one expression and after the block of expressions you'll need to use return. This is called explicit return.

Modules
Separate files that hold each component definition you write.

Importing
The process of pulling in one or more variables from another file.

Exporting
The process of making one or more variables in a file importable for other files.

Default Exports
Simplest type of exports; only allow for one export per module.

I actually have some experience with the import/export as well from the random project that I did building the Pong Game.

Named Exports
Allow you to use multiple functions.

The ES6 Toolbox

The way Skillcrush works is they generally have a video lesson and then a written lesson at the beginning of each module. I'm writing a post for each module I go through. So sometimes I will pick up things on the first (video) lesson within the module and then I picked up on more things in the written lesson. Oftentimes I will even go back and rewatch the video after reading the lesson to see if there's anything I missed.

Here are things that I think I missed on my first time through:

No Parameters
You need to use empty parenthesis () to signify the lack of parameters.

const noParameters = () => "I accept no arguments";
// pass no arguments when calling this function
console.log(noParameters());

Multiple Parameters
You must use parenthesis and commas in between when there are multiple parameters.

const manyParameters = (param1, param2, param3) => 
  "I have " +
  param1 +
  ", " +
  param2 +
  ", and " +
  param3 +
  " living in my home!";
// pass three arguments when calling this function
console.log(manyParameters("cats", "dogs", "kangaroos"));

Third-Party Modules
This is for when you need to import third-party code easily.

// import React from the node-modules folder
import React from "react";

Using ES6 to Keep Your Code Organized Cheatsheet

A great part of being in the Skillcrush bootcamp is all of the support documentation they provide us with. They will provide us with "cheatsheets" so we have reference materials when we get into our project/challenge based work.

Working with Modules

On to our first challenge. Looks like we need to add some import and export statements to get everything functioning.

Basically we had 3 different JavaScript files. We created export statements in the greetings.js and helpers.js files and then in our main index.js file we imported all of the necessary data points.

Pretty straight forward, but I did reference the solution code to make sure I had it correct.

Originally in the import statement for the components coming in from the helper.js I made two statements. However, as you can see in the image they illustrated how to pull in two using curly braces.

See the final work in full here!

Turn this ES5 into ES6

For this challenge we will convert some functions from the old ES5 syntax to the new ES6 syntax.

I had to rely on the solution code to complete a couple of these. From my perspective, Arrow Function doesn't really make the statements any shorter when there are multiple elements.

See the ES5 and ES6 code here!

Build A Module Using Arrow Functions

Pretty simple challenge of writing an export statement in one file and an import in another. I wrote the statements and then used the solution code to fix what I wrote, but I was close!

Check it out.

Quiz: Organize Your React Code

100% correct! Which feels good because sometimes I don't feel like I'm getting it, but I was able to determine the answers.

Moving right along! What are your thoughts and experiences with Arrow Functions? Share below!