Anatomy of a React App


Previous post: Installing React
Next section: The Basics

Anatomy of a React App

Ok, so hopefully you followed the previous tutorial, Installing React  (https://scattercode.blogspot.com/2022/11/installing-react.html) and now you have a basic React app, which we created using create-react-app. Before we start doing anything with it, let's have a quick run-through of what's in there.  None of this is essential information, so feel free to skip this post if you're not that bothered.

NOTE: Before we begin, it's important to remember that create-react-app is not by any means the only way to create a React app, and its structure is not the only way to structure a React app.  The process which creates a React app is referred to as a 'toolchain', and as well as create-react-app, there are various out-of-the-box solutions out there (a couple of popular ones at the time of writing are Gatsby.js and Next.js). Different toolchains work well for different scenarios (eg Gatsby is good for making a static website; others may be better for making a CMS, or various other apps). However, create-react-app is the easiest one to start with, so we'll run with it.

In the my-app folder (or whatever you called it), you should have the following:

NOTE: the list below is correct as of July 2021; it may change slightly from time to time

README.md

The ubiquitous ReadMe file. This one contains instructions on getting your app up and running, but you can edit it to add more information – this is especially handy for a group project, or if you’re a bit forgetful, as it can contain instructions or a reminder about any special features of your app.

NOTE: README.md is a ‘markdown’ file (hence the .md). Markdown files allow you to add formatted elements to your text without learning HTML. For instance, if you put # at the start of a line in a markdown file, that line will show up as a heading. Here’s a handy Cheat Sheet: https://www.markdownguide.org/cheat-sheet/.  However, you can develop React perfectly happily without ever touching this file.

package.json

This is a list of all the packages you’re using in your app, and which version of each one you’re using. Initially there are only a few packages in there – react, react-dom and react-scripts are all basically the bare bones of React; then there are some testing packages and web-vitals (which helps you optimise your app).

When you add more packages to your app (again, we’ll talk later about what packages are, why you would want to add them, and how to do that) they’ll be added automatically to package.json.

package-lock.json

Some of your packages will depend on other packages, which may depend on other packages and so on. React needs to know which version of each package to use, and these are listed in package-lock.json. React looks after the contents of this file for you, so you don’t ever need to edit it. If you accidentally delete it, React will just recreate it when it needs it (although this takes a while, so it's best not to delete it if you don't have to).

.gitignore

If you plan to use Git (and you probably should), this file lets you tell it which files to ignore.

node_modules

This contains the actual packages referred to in package.json.  npm (Node Package Manager, which you got when you installed Node.js in the previous post) is used to create node_modules from package.json.  It's a huge folder, so don't check it into Git, or send it to anyone if you're sending them your code.  Likewise, if you receive a React project from someone else, or pull one from Git, it won't have node_modules within it. But as long as package.json is in there, all you need to do is navigate to your project directory in a terminal, and run

    npm install

- this will take a minute or two, and at the end, node_modules will appear. This should always be your first step when you receive (or check out) a project, as it won't run without doing this.

public

This is the folder that the browser will look for when you run your React app. It contains some images, and, most importantly, index.html – the outline of your HTML page. You can open index.hmtl in a web browser, and you will see a blank page, because index.html contains the following (open it in a text editor like Notepad to see this text):

    <body>
        <noscript>
            You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>

which shows a blank page (unless you don’t have JavaScript enabled, in which case you’ll see a message asking you to enable it - it's highly unlikely that this will happen, unless you're using a REALLY old browser).

It may not look like it, but index.html provides the foundation for your entire app. The empty div with the id root is where your app will be shown – React is going to take your code, build it into HTML, and then put that HTML into root. You can add other content into this file if you want (although generally that's not the done thing), but you must leave root in there, and it must be an empty div, or else*.

(* Or else what? I don't know. Feel free to try it and see what happens.)

src

This is where all the action happens, and where all your code will go. We’ll ignore some of the files in there (setupTests.js, reportWebVitals.js and App.test.js - we won't need to do anything with those). We’ll also skip past the css files, which are just used for styling, and the logo, which should be self-explanatory. Our starting point (and what React itself looks for first) is index.js. This contains the vital line:

    ReactDOM.render(
        <React.StrictMode>
          <App/>
        </React.StrictMode>, 
        document.getElementById('root'));

ReactDOM.render is a function which takes 2 arguments – first, some HTML content, and second, an element to display it in. So in this line we’re telling it to "go and make an <App> component, and then display it in the div with the id root". You will recollect that we have defined a <div> with the id root in public/index.html, so that’s where it gets displayed.

App.js

But what's an <App/> component?  Well, that’s whatever you want your app to be, and you'll define it in App.js. Take a look in there (by opening it in a text editor) and you’ll see the initial App component – it’s basically some HTML-like stuff called JSX. The result of this component is what you see when you look at it in your browser - you should be able to roughly match up the various parts of the code with what the browser shows.

NOTE: JSX is a kind of mixture of JavaScript and HTML.  We'll see plenty of examples shortly.

Feel free to try changing some of the output from App.js by making changes to the text output from the return statement (leave the rest of the file contents alone for now). For example, look for the line of code which says "Learn React".  Make a change to the text, and save the file - when you look at the app in the browser, you should see the change you made.

Summary

And that’s it. You’ve created your first React app, and we’ve looked at how it works.

To summarise:

  1. React begins by looking for public/index.html and src/index.js*
  2. In index.html it finds a div called root
  3. In index.js it's told to create an App component (which it can import from App.js), and then to display it in root
  4. App.js tells React what an App component looks like

(* How does it know that it needs these 2 files specifically?  I don't know, but I think it's something to do with Node.js - anyway, don't rename either of these files or nothing will work)

Next we’ll take a look at how to get going to add some content of our own.


Previous post: Installing React
Next section: The Basics

Comments

Post a Comment