Create A React App

Creating a single page app using React is quite a simple set up and I’m going to provide a brief guide on getting started. First, for those who don’t know, React is a Javascript library used for creating user interfaces and/or UI components. Obviously it is a frontend tool and once you’re comfortable using it, it’s a quite nice alternative to using vanilla Javascript. If you are new to React and are a new developer, I’d encourage you to read the React docs provided by Facebook. I find them very user friendly and easy to navigate.

So onto the app set up!

The first step when creating your app is to make a new directory that you’d like your files to live in. This can be done from the command line using:

$ mkdir directory_name

Then cd into that directory.

$ cd directory_name

Once inside your new directory, we can start using the commands to create our React App. Run the next command.

npm create-react-app my-app

This command is a project generarator installed globally.

Next, we are going to run

create-react-app my-app-name

Voila! We have an app! Is it really that simple? Kind of…

After we open the app file, you will see that just about all the starter code is there for you. I call it starter code because now we have to write all the code to get the app of our dreams up and running. But we can take a look at what we have to start with.

Above is a screenshot of the folders that create-react-app command gives us. They are all very important but the folders you will more than likely only touch will be in the ‘src’ folder. Here is where you will find your index file which renders the App component. The App component is usually the highest or first component in your app. You can rename it or keep it as ‘App’. This is also where your code writing will more than likely start.

The code written in the App component is the default code for all React apps. The return statement is where most of your components will render to the DOM. Go ahend and remove the code from lines 7–20 and replace them with “Hello World”. Then run the next command.

npm start

A web browser should open up, and now you can see your App! The really cool thing about React is that the page refreshes on its own with every ‘save’, so you won’t have to manully refresh while building out the application.

Here are some links to help you along in case you’d like to create a backend or simply stick to a static website.

Create a New React App - React

Learn | Next.js

Welcome to the Gatsby Way of Building | Gatsby