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.
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
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
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 /> 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() 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.