Day 30: React

Lesson 1: React Setup

Setting up a React project takes a few steps, requires us to run some terminal commands and install dependencies. So to avoid that we are going to code in the browser again.

Head over to StackBlitz, select Frontend and then click React - JavaScript. It's really important you select the JavaScript version and not the TypeScript version.

You should now have a screen that looks like this.

It's basically a fancy version of the playground we used in the first half of this course.

Let's look at the file structure.

You have an index.html file, take a look in there. You'll see <div id="root"></div>.

Now look at index.js, you'll see a fancy way of importing code that we've not covered on this course, and then you'll see:

1const rootElement = document.getElementById("root");
2const root = createRoot(rootElement);

Which you should be able to work out. We get that root div and then use createRoot to create a root node. This is the first node that our whole React app will be build from.

The list lines look very different:

1root.render(
2  <StrictMode>
3    <App />
4  </StrictMode>
5);

This invokes the render method on root and then passes in some weird looking HTML tags.

Well, they aren't HTML tags. They are a new type of syntax made by the React team called JSX. Really under the hood these are calls to functions like createElement() and appendChild() wrapped up in a declarative style syntax.

In the middle you will see <App /> which, if you look at the top has been imported from ./App.

<App /> is a component, your whole React app will be made up of components.

Let's go look at that file since this is where we will spend the rest of our time.

App.js exports a function called App(), this is then used in index.js when we write <App />.

The App() function returns some HTML that will look familiar to you.

1<div>
2  <h1>Hello StackBlitz!</h1>
3  <p>Start editing to see some magic happen :)</p>
4</div>

And this is what is rendered on the screen. Change Hello StackBlitz to Hello All The Code and see it update when you save.