Starting a new ReactJS App and Setting Up the Environment
First, Understand the Basics
React is a great framework to build websites and prepare you for the workforce! It’s a super popular framework designed by Facebook which makes organizing your code and laying out reusable JavaScript easily! It can be a bit to wrap your head around, but once it clicks with the developer it makes your life so much easier. Tossing around components, props, holding data in state, using the store with Redux and JSX will all be second nature once you spend some time with React! The ultimate purpose of ReactJS is to show HTML to users and handle the interactions.
Lets Create a new ReactJS App!
To get started, all we have to do is open up our code editor of choice and jump right into the terminal. Once we have our project folder selected (where ever you’d like to save your files), we can get started. I would personally, as well, have your favorite browser ready since you’ll be updating it in real time as you code!
In the terminal we need to be downloading some node packages, and to do so there are a couple of different ways to start. An older way would be installing with npm, but I’m going to suggest using the npx route when creating as it cuts out one of the steps for initialization!
Here is the code to start a new ReactJS app:
npx create-react-app myapp
This is what we type into the terminal. npx is the newer way to use npm, which stands for node package manager. The ‘myapp’ here is going to be whatever name you want to use for your project. Don’t use spaces or even camel case here — just type it out in one word (keep it simple!).
Once that is done, make sure that we cd into our new app! This is typically where a lot of new React developers get annoyed — “I just made the app; why won’t it start?” Since we used a project folder to make it, we actually have to actually get ourselves into the project.
Once inside the project itself, we can start it up!
Starting the React App
To start the ReactJS app, we once again type into the terminal a command:
npm start
This will start the ReactJS app on a localhost, or a hosted site that is offline that we can only see. This allows us to update and modify it in real time as we code! It should be on localhost:3000 unless another local host is running on your machine, to which it may go to localhost:3001, 3002, etc…
Note: to stop our localhost, while in the terminal press “control + c”
When you start up your ReactJS app and the localhost pops up, you’ll see a website open with the React logo and a couple of words. This is what is built in to React to show a user that their local host is running. What we want to do, though, is get rid of this pre-made code so we can work on our project from scratch!
To do this, we need to know what files are brought in when we start the app, what to delete, and what to replace.
What Files to Delete and Remake
We will have multiple folders appear after we create our react app. They’re as follows:
src — This stands for the source folder. This is where we put our source code.
public — This contains all our different static files. Static files are our HTML files that don’t change, our image files and so forth.
node modules — This has different dependencies for the projects, and this is something that we will almost never touch.
package.json — This configures our project from all the different dependencies. You’ll be doing a lot of work for data control in here!
package-lock.json — This records the exact version of the packages we install.
README.md — This is the read me file for the project; it’ll contain instructions (written by you!) on what we create.
.gitignore — This puts the files and folders that git should ignore together while we change our code base.
To start from scratch, delete everything in the src folder (but not the folder itself!) so we can make our own app. Once that happens, everything we see on the localhost should go blank. Now, we create an index.js file to put in our src folder which is where we will create our app!
Lastly, We Will Setup a very Simple React App
To set our ReactJS app up, we will need to import files, make a functional component (we will get into class based components in another blog) and have our DOM render.
To import, write this at the top of your index.js file:
import React from ‘react’;
import ReactDOM from ‘react-dom’;
These two lines will import necessary react libraries to make sure that we’re actually using it within our ReactJS app (uh, we need that!).
To make a functional component to start, we add this code within the index.js file under our imports:
const App = () => {
return <div>Hello world </div>;
};
An arrow function is made with the name ‘App’ simply for example. Within the arrow function it looks like we made some HTML (what??) but really it’s just JSX! This is unique JavaScript made with React to look like HTML to make our lives oh-so-much easier. We will get into functional/class based components and JSX more in a later article. Just start here to make the app run!
To have our app render, we finally add this code to the bottom of our index.js file:
ReactDOM.render(
<App />, Document.querySelector(‘#root’)
);
This gets our ReactJS app to render to the DOM (document object model), and takes in our App component and querySelects the root from our document (that we downloaded when we created our react app in the public folder). It can seem a little convoluted, but this is something that’ll become second nature to write when you make a new app and won’t be much trouble.
Nice work!
Now we can see in our localhost that it says “hello world” just like we had in our <div> from our functional component return! If you know some HTML, play around with the JSX and write in some different things. Congrats; you didn’t only start a ReactJS app but also made yourself a scratch index.js file with the correct files imported and rendered! Now we just have to take on our creativity and organization as we broaden our knowledge in React. Keep it up!
