Getting Started with React
How to Create Your First React App
This is a practical article; We are not going to stop at concepts or basic knowledge, we are going to create our application in React and understand the whole process.
If you want to know more about React, you can read this article.
Let’s start creating our first React app and our first component.
The first step; Generating our app
Node.JS
To generate a React application we need to have Node.js installed on our system.
The easiest way to install Node.js on your system is, without a doubt, to use the installer from the official website where you can decide between using the LTS version or the current one.
The recommendation is always to use the LTS version, if you already have node installed on your system remember that to use the latest version of React, you will need to have Node >= 14.0.0 and npm >= 5.6 installed on your machine.
Once you install Node.js you can create your React application.
Create React App
Create React App is the best way to start creating a new React app.
This command configures your development environment so that you can use the latest Javascript features, providing a good development experience and optimizing your application for production.
To create a new project, run the following in a terminal:
After executing these commands, we will see a message in the console that tells us that we can now see our application in the web browser locally and our React page will automatically open.
We can also type: http://localhost:3000 in our browser and see our React page.
Congratulations, you’ve already created your first React site, one command was enough, it’s like magic!
Second step; Creating the folder structure for our project
Visual Studio Code
It’s a source code editor that runs on Windows, macOS, and Linux and is the best choice for JavaScript and web developers, with many extensions to support almost any programming language.
This is the editor we are going to use to work on our React app.
Once the Visual Studio code is downloaded and installed, we open our React project folder in Visual Studio.
Folders
With our project open, we’re going to see some files and folders that make up our entire React project. There is only one folder that we are interested in and that folder is src. Inside that folder, we are going to create our components and do 99% of the things we have to do in our React app.
Inside the src folder, we are going to create the following folders;
components; In this folder, we are going to create all the reusable components of our application.
pages; This folder is where we are going to create all of our main containers or pages.
Once we have created these two folders, we are going to create the ones we need inside the components folder.
assets; In this folder, we are going to store our images, fonts, animations, and all the static elements of our projects.
elements; This folder is for components with a lower hierarchy, which will be reused by more complex components with more business logic.
layouts; Our design templates live here, they are the ones that are going to contain an initial layout with the reusable blocks in our app, for example, where the navigation bar, footer, sidebar, and that kind of things remain consistent throughout the app will be.
sections; They are the sections that can be reused on the site, a section is a component that is reused as a general block, such as a slide, a price table of your services, the comments of your users, or the logos of your clients and things like that.
Third and last step; Creating the first component
Once we have created the structure of our project, we can start creating our first component, but first;
App.js
This file is the main container for all the other components of our app, it is located at the root of the src folder. When I say general container, I mean that all the code of the components that we create for our app lives in it, inside that file we can then add logic to navigate between components and containers to manage state, this is our starting point.
This is what our file looks like;
Before we can create our first component we are going to do a little refactoring and cleanup.
First, we are going to convert our traditional function into an arrow function type method (if you want to know how to convert a traditional function into an arrow function you can see it in this article);
Now we are going to remove all the html code and leave only an empty fragment, they are elements that return multiple child elements. By default react only allows one child component inside a container, that’s why we use these fragments.
Adding a fragments is easy, we just add the tags <> </>.
Then our App.js file would be ready to start developing our app.
Creating the home component
We can now start creating our first component, for that we have to understand how to create a component in React.
There are several ways to create components (Functional and class components), we are going to use functional components, which is basically creating a function in javascript (yes, it’s that simple).
To create a component I first have to create a JSX file (or TSX if you are using TypeScript), we are going to create it inside our pages folder since it’s going to be the first page of our application.
Now we open our src/pages/Home.jsx file and create our component by writing a simple arrow function in javascript
In return for my function, I’ll add a fragment, because it’s there where I’m going to write all the visual code of our app, that is, the HTML elements, other components, and everything that the user sees.
Now our Home component, I’m going to add the content and thus finish my first component, for now, I’m going to add a title and a paragraph. My Home.jxs component would look like this.
Importing and using a component
Once we have created our component, we can import it into our App.js file which is the main container for our app. Once there, the user can already view the content of our component.
Importing a component; to import a component we have to use import and point to the path where the component is located, we do this outside the of the component function, for example;
Using a component; To use a component is basically the same as using any HTML tag, we just have to understand that sometimes we have auto-closing tags like <img /> and other non-auto-closing tags like <div> </div> .
Most of the basic components are auto-closing, our Home component is not going to be the exception for now. Applying the logic of HTML tags, we can use our home element like this;
Wrap things up
If we already imported our Home component and we know how to use it, we can start putting together all the pieces in App.js to show our component to the user, remember that the components that are going to be shown have to be inside the return of the function.
Now let’s finish cleaning the App.js file, for that we are going to remove the import of the logo and the style sheet that React brought by default (App.css).
Once we have removed the elements that we are not going to use, we import our Home component and add it inside the App function so that the user can see it. Our finished App.js file would look like this;
We’re done
Now to see the result in the browser, we have to make sure that the npm start command is still running in our terminal and if it is not running we run it again in the project folder.
If you did everything right, you can already see the result of your incredible effort!
See you in the next article to continue building this awesome React app.
You can download the code for this article here; https://github.com/nievesjesus/medium-react-first-steps
