Intro to JavaScript and React

Now that we actually have our local application running it is time to start coding. First, we will install a code editor. Most of the Web Devs at DraftKings, along with myself, prefer VSCode. It’s great to use, nice to look at, and has a lot of different extensions you can take advantage of.

After we get set up with VSCode, we will run through some basic JavaScript / coding exercises to get our feet wet. The lesson will end with applying some of these coding exercises within React and actually displaying our solutions on the page.

Also, please use Google Chrome as your browser for all of your development going forward.

Visual Studio Code

Navigate to https://code.visualstudio.com/download and download the correct version for your operating system.

This is what we will use to edit our source code.

Now let’s install a linter. A linter will tell us when we are are writing invalid code or making style mistakes. It should be helpful as a JavaScript beginner to highlight any syntax errors. You can customize your linter by adding rules to your config. We will keep this config simple and just use the built in react-app linter.

1. Create a file at the root directory of the project called .eslintrc
2. Paste the following into your config { "extends": ["react-app"], "rules": { "additional-rule": "warn" } }
3. Go to the extensions and download ESLint. This extension will pick up on your .eslintrc config and actually highlight and rule violations in your code editor. (you may need to restart VSCode)

VSCode has all sorts of extensions for varying projects. You can get cool themes for your editor too. I’d recommend exploring. One other extension I love is called TabNine. It's a machine learning powered autocomplete for coding that will actually look at the code in your repo and learn what patterns you use.

JavaScript

The following video should be helpful for understanding some basic programming concepts, such as variables and types, and for applying those concepts to JavaScript (feel free to skip this if you are already familiar with these concepts). Start from 16 minutes. https://www.youtube.com/watch?v=W6NZfCO5SIk.

Also, we will need to use loops to solve some of the exercises for this lesson. I suggest watching this video to familiarize yourself with JavaScript loops https://www.youtube.com/watch?v=Kn06785pkJg.

Clean Up App.js

Now let’s get back to our actual project. You’ll notice that your App.js file came with a lot of junk. Let’s delete it and just render a simple <h1> tag.

Here is what your App.js file should look like.

import React from 'react';
import './App.css';
function App() {
    return (
        <h1>Hello World</h1>
    );
}
export default App;

Now we are ready to start on some of our exercises.

Coding Exercises

In these exercises, we will be implementing pretty basic functions. They may involve loops or using built in JavaScript methods. If you are having a difficult time, I highly recommend stepping through each example (ask yourself what each line of the function should do when it executes). Google is also your friend to look up coding concepts, not solutions. I’m happy to talk through any of these concepts that you are unfamiliar with, but those videos should be most of what you need. Also, console.logs are your friend. Drop them at diff sections of your code and look in the Chrome Console (right click on web page, select inspect, then navigate to the console) to see them.

Also, we will be introducing import and export statements. It is pivotal in larger projects to break out your functionality into helper functions. It makes the file sizes more manageable and keeps the whole project more organized.

Paste the following into a new file called lesson3.js

1. Create a new folder at the same level as App.js called lessons
2. Create a new file in that folder called lesson3.js
3. Paste the following into that file.

/* Implement the following functions */
// Return a string that repeats n times
export function repeatString(str, n) {
    console.log('implement me');
};
// Return the boolean value of when you take the || (or) of each element
export function or(arr) {
    console.log('implement me')
}
// Return the boolean value of when you take the && (and) of each element
export function and(arr) {
    console.log('implement me')
}

Now let’s go back to our App.js file and import these helper functions.

At the top of App.js paste the following import {repeatString, or, and} from './lessons/lesson3.js'; Let's break down what this import statement does.

• It specifies each function that it wants to import inside the curly braces.
• It specifies the path to the file that it wants to import them from.

If you hover over those functions, VSCode will show you the interface of that function.

JSX

Now let’s show the data they return in our React Application using JSX. JSX is how we will dynamically inject HTML into our React App using JavaScript.

Let’s paste this into the return statement in our App.js file.

<div>
    <h1 style={{color: 'blue', textDecoration: 'underline'}}>Repeat String</h1>
    <h1>{repeatString('abc ', 10)}</h1>
    <h2>{repeatString('yo ', 25)}</h2>
    <h3>{repeatString('hello ', 5)}</h3>
    <h1 style={{color: 'blue', textDecoration: 'underline'}}>OR</h1>
    <h1>{or([0, 0, false, false, 0, undefined, null]).toString()}</h1>
    <h2>{or([true, 123, 'hello']).toString()}</h2>
    <h3>{`${or([true, true, false])}`}</h3>
    {or([true, false]) && <h1>this was true</h1>}
    <h1 style={{color: 'blue', textDecoration: 'underline'}}>AND</h1>
    <h1>{and([0, 0, false, false, 0, undefined, null]).toString()}</h1>
    <h2>{`${and([true, 123, 'hello'])}`}</h2>
    <h3>{`This is the return value: ${and([true, true, false])}`}</h3>
    {and([true, true]) && <h1>this was true</h1>}
</div>

If you refresh your React App, you should only see the titles for each set of test cases. However, if you open your console, you will see the logs for implement me that are getting executed. We need to return something for each function, via a return statement.

Let’s take a closer look at what is going on in our JSX.

• HTML: everything in <> is html. Those are called tags. So we have a collection of <div> <h1> <h2> <h3> tags
• CSS: we are using inline CSS to style our <h1> tags. Going forward we will want to use classes to be more organized, but don't worry we will get there.
• JavaScript: inside the curly braces {} within and HTML tag, we can actually execute JavaScript. That is how we are calling our helper functions. This is how we can dynamically inject data.
• Syntax trick: In the and / or parts of our JSX, you will notice that we are calling a toString() method to convert the booleans to strings. A good way to combine strings is with For the<h3>tags you see we are doing ``This is the return value: ${and([true, true, false])}`` This allows us to inject the return value of theandhelper function into a string. You will need to wrap your JavaScript in${}` to have it executed.

Now let’s look at each individual exercise so I can provide some hints. These exercises may be easy for some of you and difficult for others, depending on your loop experience, but loops will be very important to understand for your own coding experience and for React development.

*** **Disclaimer: The following are hints. Use them as you need ******

Repeat a String n times

This function will require you to use a loop that executes n times. There are many ways to accomplish this, but I would recommend using a for loop with a variable that increments (0, 1, 2, 3,…, n-1). The loop should only execute when that variable is less than n. For each iteration, "concatenate" (combine) with and accumulator that has all of the strings that you have already accumulated. Return that accumulator at the end of the function.

OR

This function will require you to loop over the elements of an array. You can access an element of an array by using an index (the position of it in the array, starting at 0) or you can loop directly over the elements. You will want to use the || to simulate or. This is saying if a || b === true then either a or b is true. I would use an accumulator to maintain this information.

AND

This function is very similar to OR and will require you to loop over the elements of an array. Challenge: try using a different kind of loop than you did for OR. You will want to use the && to simulate or. This is saying if a && b === true then both a and b are true.