Workshop B

Functions

You can define functions in JavaScript like this:

function double(number) {
    return number * 2
}

You can also define an arrow function, which is the exact same thing with different syntax:

const double = number => {
    return number * 2
}
// "const" is how you define a constant variable in JavaScript, meaning it can't change. 
// So here, we're assigning a function to the variable "double". 
// But it's the same as the "function" syntax above; they're interchangeable. 
// "let" allows you to define a variable that can be changed later, not constant. 
// "var" has been replaced by "let" and "const" and shouldn't be used anymore. 

One fun trick about arrow functions is that, if you don't add the {curly braces}, they automatically return the expression. So you can write a concise one-line function if it makes sense for your function:

const double = number => number * 2
// Notice the lack of curly braces and lack of "return"! 
// "number * 2" is simply returned automatically. 

React

Anatomy of a component

Before we start going through React's features, I just want to put down the basic structure of a React component file:

// Filename: ExampleComponent.jsx
// jsx is a special version of js, or JavaScript, that's used for React

import { something } from "some-package";

// Depending on how your group does CSS styling, this will be different. 
import "./example-component.css";

// "export default" means "when another component does:
// import MyComponentName from "../path/to/ExampleComponent"
// this is what will be exported.
export default function ExampleComponent() {
    // Variables / logic go here
    return (
        <div>Component HTML goes here!</div>
    )
}

Components

React apps are made out of components. A component is a piece of the user interface that has its own appearance and logic that governs how it behaves. A component can be as small as a button, or as large as an entire page.

React components are JavaScript functions that return markup (essentially HTML):

function MyButton() {
    return (
        <button>I'm a button!</button>
    )
}

Now that you've declared MyButton, you can use it in another component:

function App() {
    return (
        <div>
            <MyButton />
        </div>
    )
}

Notice that <MyButton /> starts with a capital letter. That's how you know it's a React component. React components must always start with a capital letter, while HTML tags are lowercase (like div, p, etc).

const MyButton = () => {
    return (
        <button>I'm a button!</button>
    )
}

Variables

If you have a variable and want to insert it into your React component, you do so using {curly braces}.

function Greeting() {
    const name = "Ben"

    return (
        <p>Hello there, {name}</p>
    )
}
// Renders "Hello there, Ben"

You can use any JavaScript expression in the curly braces, not just a variable.

function Greeting() {
    const name = "Ben"

    return (
        <p>Hello there, {name.toUpperCase()}</p>
    )
}
// Renders "Hello there, BEN"

function RandomNumber() {
    return (
        <p>Your random number is {Math.random()}</p>
    )
}
// Renders "Your random number is 0.27577077597245814"

Conditionals

Let's say you want to render a piece of the user interface conditionally, so sometimes it shows up and sometimes it doesn't.

To do this, we'll take advantage of the ternary operator, which is a common operator in programming languages (it's also present in C++!). It's a bit like a condensed one-line if statement. Here's a simple example of using the ternary operator:

const icyConditions = true
const carWheelsToEngage = icyConditions ? 4 : 2
// "If `icyConditions` is true, then `carWheelsToEngage` is 4. Otherwise, it's 2. 

// Another way to write this without a ternrary operator:
let carWheelsToEngage
if (icyConditions) {
    carWheelsToEngage = 4
} else {
    carWheelsToEngage = 2
}
// As you can see, the ternary operator is more concise. 

To use the ternary operator in React, we'll put it within {curly braces}, so React executes it as JavaScript code:

function Greeting() {
    const niceWeather = false

    return (
        <div>
            <p>Good morning!</p>

            {niceWeather ? (
                <p>Nice weather, isn't it?</p>
            ) : (
                <p>Horrid weather out there, isn't it</p>
            )}
        </div>
    )
}

If you want to skip the else branch of the ternary operator, you can render null (nothing), like niceWeather ? <p>...</p> : null. Or you can use the && operator, which is like a ternary operator with no else:

function Greeting() {
    const niceWeather = false

    return (
        <div>
            <p>Good morning!</p>

            {!niceWeather && (
                <p>Sorry about the weather!</p>
            )}
        </div>
    )
}

Loops

In React, loops are done with the map function that's built-in to arrays. The map function takes every item in an array and transforms it into something else. For example:

const numbers = [1, 2, 3, 4]
const doubleNumbers = numbers.map(function (num) {
    return num * 2
})
// doubleNumbers: [2, 4, 6, 8]

// Using the arrow function syntax discussed above, this is equivalent to:
// const doubleNumbers = numbers.map(num => num * 2)

For React, we want to map our array into markup (HTML), so that it shows up on the screen — going from an array of data to an "array of UI" that will get rendered on the screen.

function NumberPicker() {
    const numbers = [1, 2, 3, 4]

    return (
        <div>
            <p>Please pick a number:</p>

            {numbers.map(num => (
                <button key={num}>{num}</button>
            )}
        </div>
    )
}

Nesting

You can nest components within each other to reuse them in different places:

function User() {
    return (
        <p>This is where a user record would go.</p>
    )
}

function HomePage() {
    return (
        <div>
            <p>Look at all our users:</p>

            <User />
            <User />
            <User />
        </div>
    )
}

function UserPage() {
    return (
        <div>
            <p>Here's one user:</p>

            <User />
        </div>
    )
}

Props

Not all instances of a component should look the same. That's where we can use "props" or "properties", to pass information into the component that affects the way it looks or behaves.

function User(props) {
    return (
        <p>
            {props.firstName} {props.lastName}

            {props.admin && (
                <span> (admin)</span>
            )}
        </p>
    )
}

function HomePage() {
    return (
        <div>
            <p>Look at all our users:</p>

            <User firstName="Adam" lastName="Smith" />
            <User firstName="Bella" lastName="Jones" />
            <User firstName="Cynthia" lastName="Miller" admin={true} />
        </div>
    )
}

Props arrive in the component as a JavaScript "object" (in other languages, a "hash" or "map"). Naming it props is conventional, but you can name it anything.

// In the above example, this is how the "props" argument would look for the last <User />:
props = {
    firstName: "Cynthia",
    lastName: "Miller",
    admin: true
}

Often in React we destructure the props. Destructuring is a feature of Javascript that allows us to "split open" an object into its various parts, giving them variable names. Here's the same component as above using destructuring:

// "Destructuring" the props into independent variables allows us
// to write "firstName" instead of "props.firstName". 
function User({ firstName, lastName, admin }) {
    return (
        <p>
            {firstName} {lastName}

            {admin && (
                <span> (admin)</span>
            )}
        </p>
    )
}