Create your first React app in 5 easy steps!
Hello everyone! If you are a part of the coding world you certainly know that React is quickly becoming a go-to JavaScript library to create your projects. Today I wanted to give a quick rundown on how to create your first React app in 5 quick steps, so let’s jump right in!
Step 1. The first thing we want to do is open up our terminal. Then navigate to where you would like to store your project, and type in npx create-react-app project-name. As it shows below I created my app with the name project-name just to make it easy to visualize.
This can take a few minutes so be patient. Once it’s complete you can then type code . to automatically open it in vscode. If you don’t use vscode or don’t have this extension, a quick google search will help you install it. Now that we have our project up we can move on to step 2.
Step 2. Now let’s get the app up and running so we know everything is working so far. In your terminal in VScode or whichever text editor you use, you can type in npm start.
Once you’ve done that you will see the React base framework load in your browser on localhost:3000, or whichever port you are currently using. You will know everything is working properly when you see the spinning React logo as shown below.
Great! Now we have our app created and up and running. Now we can clean up a bit of the files that were given to us when we first created the app, which we will do in the next step.
Step 3. Right off the bat, we can get rid of 4 files that we will not be using (if you would like to know what these files are for, you can again do a quick google search, however for the purpose of this quick overview we’re simply going to get rid of them.) The files will be listed in the src folder and shown below. Feel free to delete them now.
Next, let’s go into our App.js Folder and clean that up as well. You can simply delete all the code inside the
single <div> as shown here.
You can then replace it with an h1 tag as a simple placeholder, as I’ve done here with Time to Code!
Now that you’ve done that your app should no longer show the spinning React logo and script, it should only show your h1 tag like mine here.
Awesome! We’re almost done with setting up our first React app. Next, we can create our folder that will hold our components.
Step 4. Our components will need to be stored in the src folder, so first navigate to that folder and right-click to create a New folder.
Great, we now have our components folder! Inside that, we are going to create new files for each component that we need. For this app, I’ve created a simple Todo List, which is built using 3 components, so I’ve created a new file in the components folder for each. To do so, right-click on the components folder and select New File.
Once I created all my needed component files, my component folder looks like this.
Now for the final step, starting to create your react functions.
Step 5. To get started with creating your functions you should first make sure you have the ES7 React extension installed. This will make your life so much easier when working on React apps. If you don’t have it installed simply type in ES7 React in your extensions finder until you locate the extension shown below.
Once you have that installed you will then have access to multiple shortcuts to make your life easier, including an auto-fill feature for starting React functions. For demonstration, I’ve gone into my Todo.js file and typed rfce. This will bring up the shortcut as shown here.
Once you hit enter, the React function framework will auto-populate for you like magic! It even includes the import line at the top, and names your function based on the file name.
So there you have it! We’ve gone from never using React, to starting and running our very first one in 5 easy steps! Now is when the fun really starts, happy coding everyone!
