Basic React App - Pt.I

First, make sure you have Node installed in your code environment. Type in

node -v

to your console to check that it will return a version such as v12.11.0. If you do have a version return, you have Node installed and we can proceed.

npx create-react-app name-with-dashes

The command above will create a boilerplate React app, much like

rails new insert-name

Commands to be aware here are

npm start

which will allow us to run our development environment and watch our app change as we make changes

npm run build

will create a deployable version of the app to be added to a server and accessed online.

Now let’s get acquainted with our files. First, let’s check out the index.js file inside our src folder. Note that the src folder holds the meat and potatoes of our app. Now, let’s inspect the index.js file. From lines 7–12 we see that there is a function rendering App (line 9) to an element with an ID of ‘root’ in our linked index.html file found in our public folder, sibling folder to src.

(refer to this image for when we clean the index.js file)

In the index.html file, we find the div tag with the ID of ‘root’ where the function in our index.js file is rendering ‘App’, as you can see below on line 31.

and what is this App that is rendering to the html file? Well it is this file called App.js in the src folder which at this moment has this boilerplate code (line 6–21) that renders out to…

… this default page for a new React app.

Now to make our site, first we have to clean house and get rid of everything we don’t need for our app. So let’s get rid of the boilerplate code in our App.js file until it looks like this. This will get rid logo and css imports, if your code has the following line, do not delete it though note that its used for older versions of React so an update may be in order. But for the most part our App.js will look like the following image.

import React from 'react';

In your src folder we will delete the App.test.js, your .css files, and logos. You should only have your js files. In our index.js file, we can get rid of our reportWebVitals code and import css and reportWebVitals code till your files come to look like this. (below). In the image, we see the src folder cleaned out of all unneeded files, the App.js file, and the index.js file and our app in the browser will a blank page

Now we are ready to code.

Lets replace the null in App.js to this instead in the image below. We are calling a TodoList function from a JS file of the same name (which we are about to create in our src folder)

Now let’s make that file, TodoList.js, in our src folder.

And for the next step to be a bit easier, install this extension to your VSCode.

Once you’ve installed it, let’s keep on moving. Type

rfc

in your newly created TodoList.js file and hit enter/return and this code will appear after hitting enter. The extension we installed auto-filled a workable code for this file, using its filename as the function’s name and importing react to it as well.

Now let’s import our TodoList file and function to our App.js file by typing the following to the top of the App.js file

import TodoList from './TodoList'

Now let’s test our code to see if we linked them correctly and App is calling the function TodoList. So to do that lets type in “Hello World” in between the div tags inside the TodoList function, like so (image below).

Huzzah! We have liftoff.

Our app in browser

Now, because a JSX function can only return one element at a time we, as such the following code will not work.

To bypass this limitation, we can add a fragment, an empty tag like this (code snippet below) to the beginning and end of our function, like so (image below)

<>
</>

Now our function is technically returning one element again because the fragments wrap the other tags. So now our app will look like this in our browser.

Let’s add a bit more to our App.js. Lets put in 2 buttons, an add todo button, a clear todos button and a div that states how many we have left. Your code should like something like this…

<>
<TodoList />
<input type="text" />
<button>Add Todo</button>
<button>Clear Completed</button>
<div>0 left to do</div>
</>

…and render in the browser like this

So, now let us set up our state so that when we make a change to our list it will re-render our list to present the changed state. So, in our App.js, let’s code a useState into our import (which wasn’t there but let’s add it anyway) and inside the App function useState will use an empty array to start, since we don’t have any list items to begin with so our list (array) is empty.

We will continue this tutorial in Part II so stay tuned and have a wonderful day!