React Installation
The Create React App makes it easier to create a project by installing a lot of modules, so let's go over what we get when we install the project with create-react-app.
Let's open this folder up in Visual Studio Code.
A Couple of Notes: If you're comfortable with React Installations, you might want to skip this video. Also, if you're working withour Github Repo, like I am, you'll see some additional files like the CONTRIBUTING, LICENSE, NOTICE, the .github folder and a different README.md file than the default installation. Those are required for us to add the projects on Github, but the rest is the default installation.
Modules
Webpack is a JavaScript bundler. It's main job is to manage how your application is assembled and the loading of your different modules into an application.
Babel is a JavaScript compiler, it lets you write code with the latest javascript features and it will convert that so that it works with older browsers.
ES Lint is a JavaScript linter, which analyzes your code against certain rules and helps you fix them. You might need to have an extension installed on your editor to use this. You can find one for Visual Studio code at this link.
You also get Jest a testing framework if you want to run tests on your javascript code.
And then you get something called Web Vitals, which is a performance monitoring tools for your site measuring peformance, acessibility and best practices.
Project Config
Let's take a look at the actualy installation.
First is the README.md file, it has a few of the instructions about the project. This might look a bit different if you look at our GitHub Repository because we customize these for GitHub Release.
The package.json file is the file that node.js creates to manage the project. You can see a list of the default dependencies, which has some of the modules we just talked about.
You can also see a browserslist section here, which helps your modules like WebPack know which browsers you're targeting for the build. You can see here that we're targeting browsers that are not opera mini. You can find more information about configuring on the Github repo.
The .gitignore file is a git document that helps you control which documents are tracked by github. I already added a link to a file I'll be creating in the future.
If you're using a Github repo, you might also see some additional file that we add for legal compliance like the LICENSE, NOTICE, CONTRIBUTING and other files. They're pretty self explanatory.
Public Folder
Now, let's see how this React project is put together. The files in are in two main folders,
The public folder has files that Webpack will manage. They will also be moved to the server when our project is deployed. You can see that there are icons and logos here that show up when we preview our application.
There is also a manifest.json file which is an experimental file for PWA or Progressive Web Applications. They allow your web projects to be installed in mobile browsers without building apps.
The robots.txt gives web crawlers information about your sites. These are applications that search engines like Google use to get more iformation about your sites.
The index.html file is the entry point for browsers, You can add thing and modify this file, but webpack will use this file to inject the javascript code you write as well as react code and other css.
The single most important thing is the <div id="root"></div> tag. This is where your application will be loaded.
React Files
The entry point for all your scripts is the index.js file let's take a look at that.
This file imports a lot of code from different library including the React and ReactDOM libraries. React is the main library for working with React. ReactDOM manages how the Document Object Model works with React.
These are being loaded by node.js using what's listed as dependencies from your package.json file. If you're looking for them, you'll find them in the node_modules folder.
Since we're using WebPack, you can include your CSS as an import with import './index.css'; instead of using a link tag in your HTMl. This lets you have a CSS file for your entire application.
We're also importing a configuration file reportWebVitals.js for the web vitals module we talked about earlier. We're calling that function at the bottom.
Another import we're doing is for a React Module called App, although you don't see the extension, this is loading the file called App.js. You can ignore extensions when you load other javascript files.
We're using the ReactDOM library inside our render command, you see some code to put React in strict mode during development. Strict mode will complain if you write potentially dangerous code.
The render command then loads up the App component as a module and then looks for an item with an id of root on your index.html file.
App.js
Since we loaded up App.js from index.js. Let's take a look at it next.
There is a load command for a file here called logo.svg which is in the same folder. You can include images and logos in here, but they will be managed by webpack, which can be useful in automating things like compression.
We're also loading a test for this document that's in a file called App.test.js. We installed the Jest testing library and this code shows some sample test code. There's a related file called setupTests.js.
In the same way, we're loading up some CSS that will be tied to this component from an App.css file.
Then we have a function that defines our component. I should mention that the code that although the code that follows looks like JavaScript, it's written in a language called JSX, which is a combination of JavaScript and HTML. So you can see that the we use a return statement that returns HTML looking code.
I should also mention that this code uses the more modern React function syntax instead of the Class based syntax. We'll be using this throughout our project.
JSX isn't exactly like HTML, so you'll see that whenever we want to use a class, we use a keyword called className instead. Standalone tags like <img> have to have the self closing slash at the end. Also note that to load the SVG icon, we use the import and then use the name we assigned to the import, which is logo.
So, that's how our application loads. There's a lot going on here, but hopefully everything makes sense.