Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to make your first React app!
Wumi4 (552)

What's up everyone!

Today, I will show you how to make your first React app in few simple steps! This tutorial is designed for everyone, so feel free to follow the tutorial! If you have any questions or helps, make sure comment down below!

Ok, let's prepare some stuff to create our app!

Prepare

First, we will need to make sure that nodejs and npm has been installed in your computer. If you are unsure, type the following:

This will show the version of Nodejs and npm in your computer. If not, you will need to install it. If you are using Windows or MacOS or want to build your Nodejs from source code, check out the Download page, if you are using Linux, use any package manager available on your system like apt or pacman.

If you have Nodejs and npm installed on your computer, go to a directory you want to create your first app and type:

This will create a React app called my_app, Of course you can rename it to any name you like. But make sure that in your project name don't have capital letters (like myApp) or you will get this error:

You have done creating your first React app, now let's open the project using your favorite text editor or IDE to start coding, mine is Atom.

If you look at the project tree, you should see somewhat like this:

In this tutorial, we will only care about the App.js and App.css in src folder since they are essential files. In the App.css file, you will see some CSS code, if you dont like it, just delete them all.

App.js file is where you edit the app content. It will look something like this (the comments are added by me, you will not see it in your project):

Now, we will replace the <header> tag and all its children inside by a new one created by us.

If you wonder Why i can type HTML on JS like this?, well, because of JSX, a syntax extension for JS, like template langs. Check out this to know more about JSX.

We are very done at making our app now, the only thing to do is type the following in your Terminal to start our app!

You will need to wait for a while for it to start the server and the app. It will also automatically open a new tab on your browser. If all the things works correctly, you will see the content of your app!

You have just finished your first React app, pretty easy, right?

That's the end of this tutorial, if you have any questions, leave a comment down below. See ya at another post! ;)

Some useful links:
Reactjs doc: https://reactjs.org/docs/getting-started.html

Nodejs offcial download web: https://nodejs.org/en/download/

Reactjs tutorial on w3schools: https://www.w3schools.com/react/

Comments
hotnewtop