In this article, you are going to build your first React application. React is the most popular front-end framework and it’s for good reasons. One reason is that React will only update the parts of your website that got changed.
The why behind React
React.Js (or React) was developed by Jordan Walke, a software engineer at Facebook.
Since then, React has become the most popular front end framework.
One of its main advantages is that you can build single-page web applications. A single-page web application behaves like a normal website. The difference is that everything happens within one page.
Top companies using React
Technology is evolving fast. The languages or frameworks that are popular today might not be in the next years. But React seems to be reliable as some of the greatest companies are using it. Here are some examples:
- Facebook: Of course — they created ReactInstagram
- Codecademy (one of my favorite places)
- Netflix
- Uber
- Dropbox
- Airbnb
- Hackernook
- Even Medium :-)
Companies prefer to use React for many reasons. One of them is its performance due to the Virtual DOM. The virtual DOM is a new concept you can look at here (not mandatory). But understand that it’s faster than using plain Javascript.
Installing React in your computer
In this tutorial, we learn by doing. So get ready to follow the above instructions.
First, you need Node JS and npm. So make sure you get the last version here.
After doing that, using React becomes easy. You just need to install the create-react-app command to create your React application.
In your terminal, run :
sudo npm install -g create-react-appThis will install create-react-app globally in your computer
Note: If you are on a PC, run npm install create-react-app as an administrator.
What is create-react-app?
The create-react-app helps you get the files ready for your React application. It’s the best way to get started with React. There is another way of installing your React application. But this one is the easiest and the fasted way. So open your terminal and type:
npm create-react-app react-appThis is a command that will install your React app in a folder ‘react-app’. If everything works well, you will see a new folder with the name ‘react-app’.
Next, you need to open your React application from the command line. Note I will use VS Code for this tutorial, but you can use the one you prefer. So after the create-react-app finishes running, you can type:
(to cd into your react app folder)cd react-app
(to open your React app with Visual Studio code. Don’t forget the dot)code .
If you don’t use VS Code, it doesn’t matter. Right-click on the react-app folder and open it with your code editor. You will see your React application open in your code editor like this:
Yay! we are on React!
Wait, what are all these folders?
The folders you are seeing in your code editor are what will make React work. We’ll talk about what each of those does later in this article.
Starting your React app
React comes with a lot of handy commands. One of them is the npm start command. If you open the package.json file, you’ll see it in the scrips part. This command will start your react app so you can change it and personalize it.
So in your code editor’s terminal, run the command npm start.
That’s it! You should see a new window opening like this (by the time I’m writing this article, we are on React 16):
Using React
Ok, you launched the application with success, that’s great. Now installing and launching the application is the first step. You want to make the application your own. This means bringing back your styling and app logic.
Nowadays, you can do almost anything with React (that’s what I like about it).
Yet, we won’t try to do any complex customization. But, I will help you understand the different parts of the application. That way, you will be more equipped to build the things you want. So let’s see what makes the default app:
Node Modules
The node_modules folder is where you have all your dependencies. It’s like an installation folder. Everything you want to install will be available in the node modules.
Public Folder
This is the folder that holds your HTML file (index.html). It’s the folder where React will look into to display your work. Even if this folder doesn’t hold that many files, it’s very important.
Source Folder
The source folder (or src folder) is where you will work. This is where you will use React to build your front-end application.
The remaining files in the root folder are also important. One of them is the package.json where all your dependencies, scripts, etc will be.
Exercise: Styling your React app
Let’s do a little exercise where you’ll style your React application and change some of its content. To do so, we’ll change the default content of your web app and write something cool instead.
So in your code editor, open the src folder → App.js
App.js is a component. A component is a piece of reusable code you can use multiples times. I don’t want to overwhelm you and that’s why I won’t go further. But there is good documentation here.
One thing to notice is that React uses a language that is like HTML. This is not HTML though, but something we call JSX (or JavaScript XML). It’s a way to make it easy to write your React code without too much hassle.
So let’s remove the <header></header> of App.js to have something like this:
You can also remove the logo import (on line 2 of your App. I already did it here)
Save your file, and run npm start again. You’ll see that your content changed!
You can also change the styling of the App.js using the App.css file (in the same folder). Like a normal CSS file, you can give it a class (in React it’s className) and change it as you want.
For example, we can target our h1 and change its color like this (in App.css):
h1 {color: blue;}React will update the page whenever there is a new change in your code. You don’t need to run any command after saving the file.
Congratulations! You know how to install React, launch it, and bring your modifications. React is an awesome framework, and there are many things you can build with it. For further reading, you can look at the React official documentation.
Until then!
Previously published at https://medium.com/@mouhadiouf/how-to-create-your-first-react-application-c5a824ebe91