Let’s learn the basics of what React does, how to write React code, and also some of the fundamentals things we need to understand when building an application in React.
We will use a tool called “create react app” which is a tool built by Facebook to help developers start building react projects very quickly. React is written in a version of JavaScript that is more advanced than the version of JavaScript that our browsers understand. There are these two tools called Babel and Webpack that take the React code that we write, and convert them into the older version of JavaScript and HTML that our browser is able to understand.
The Facebook team realized it would be a lot of work for new developers to learn configuration regarding Webpack or Babel. There should be a quick way to start writing a React project. So this tool helps us spin up a project that already has this configuration done for this.
We can see how “create react app” works under the hood. We can see some of the Webpack and some of the Babel so we can understand how to do it ourselves. For now let’s just start learning React.
We need to call “npx create-react-app” followed by the name of the application in our command line. So before we begin we need to make sure we are using the latest version of Node.
So what happens next is “create-react-app” is now building out our project and setting up files… the Webpack, the Babel, all the stuff we’ll need to start using React.js right away! And after this project gets built, we can “cd” into the newly created folder (directory) and see what “create-react-app” gives us.
When we look at what “create-react-app” has given us, we will see it’s generated a project template for us to use. When we hit “ls”, we will see it’s created a project for us. We will see it’s generated all the dependencies within the “node_modules”, and it’s got a “package.json”, and a few other folders and files. So if we open this up, and take a look let’s take a look at the “package.json” file. We see that its included for us “react” and “react-dom” which is great. As well as this other library called “react scripts”. Now what “react scripts” does for us is what makes “create react app” so great. It’s what allows us to not worry about knowing about Webpack and Babel. It includes these four scripts for us and it calls that library “react scripts” to do those four things: “start, build, test, and eject”. “Start” actually starts the project. Yarn start, npm start, serves up this sample application of react inside of our local host.
We can also look at the next one called “build”. Now before we actually start looking at this script, let’s actually take a look at the two folders “public” and “src”.
The src folder is where our application lives. All the React code that we write for our application, is actually gonna go into our src folder. The public folder is where all the files I mentioned earlier will be stored, where our browser needs an older version of JavaScript and HTML to understand. This is the folder where all of that is gonna go. So when we call this “build” script, what “create react app” is gonna do is turn all the React code in our src folder into that version the browser understands and put it inside of this public folder. “Test” just runs the test code we are gonna write (we will talk more on this in future posts) and “eject” takes out all the configuration files that’s hidden from us in Babel and Webpack in case we wanted to manage it ourselves. Now that we understand the basics of what “create-react-app” does for us, let’s look at some of the code.
First thing I want us to look at is the app.js file. It may look overwhelming but we can just take it line by line.
First we are gonna import all the things from React that we need. And it’s called React right? So we import react from react. And that’s gonna hold everything related to react that we need into this file.
Then we are gonna import the logo from logo.svg.
Then we are gonna import the css.
And now let’s look at the actual meat of this file.
You should notice a function called App that returns a block of HTML. That’s all it is. So everything we see here is just the HTML here. Now how it works is when we look at the index.js file we see that we import that app function that we were looking at, and then there’s this react Dom library that calls render, and it renders our app function in the form of what looks like an html tag, and then we see this document.getElementById root. So what this is, is it’s looking on the document object for some element with an Id of root and it’s replacing it with this function that we saw returns html. So it’s gonna replace that element with the id of root with all of that html from our function. And where that div is with id of root is inside of index.html. Inside of this body tag in the index.html file, is a single div with the id of root. And this is the entry way for our application. It’s essentially just.. this library(ReactDOM)….. replacing that div with the id of root with our function that returns some html.
Now one of the great things about create react app is if we make any of these changes to any of our files, it will automatically update inside of our local host. So if I wanted to change this to hi it will change it without refreshing anything. We just code and it will just make those changes live. Now let’s get started with converting the project template to a real life project!
We will discuss this in future posts.
Photo credit: https://codeburst.io/why-is-reactjs-so-popular-c4ae7c385239
