Alright.. by now you should have a basic understanding of HTML, CSS, and Javascript. Please go back to the last 2 sections and review the resources if you are still confused or ask your PL for any questions you may have! This section will begin the React tutorial. This tutorial is meant to be a summarized version of everything you need to know, but not super in depth. I recommend that you go through these sections then read the resources in the Resources tab.

What is React?

• React is the V in MVC

• It is a Javascript library that allows you to make reusable UI components (you can think of them as nodes in HTML).

JSX

Instead of pure HTML, React uses something called JSX which essentially allows HTML-like code to be processed into Javascript.

Sample JSX code:

<HomePage>
    <BlueprintLogo />
    <Title>This is a Title<Title>
    <Button>Click Me!</Button>
</HomePage>

As you can see, it closely resembles HTML, but the code is compiled into Javascript when it renders. React.createElement() is called for each of the tags when it compiles. The nodes, are called components in React.

Because JSX is still javascript, it allows you to write Javascript code within by putting the JS code in {curlyBrackets}. Here are some different use cases when you might want to use javascript in the JSX code.

1. You want to access variables:

<HomePage>
    <BlueprintLogo />
    <Title>{titleText}<Title>
    <Button>{buttonText}</Button>
</HomePage>

2. You want to check for conditionals:

<HomePage>
    <BlueprintLogo />
    <Title>This is a Title<Title>
    { isSonia && 
        <div>You are Sonia</div>
    }
</HomePage>

Here, the div "You are Sonia" will only be shown if isSonia is true

3. You want to perform some logic within the JSX code:

<HomePage>
    <BlueprintLogo />
    <Title>This is a Title<Title>
    <div>What is five plus three?</div>
    <div>It is {3 + 5}</div>
</HomePage>

1. Mapping functions {insert example}

Of course, there are many other use cases and you will encounter them very soon!