Getting started with react in 4 minutes

Max Moeschinger
Sep 4, 2018 · 2 min read

Welcome to this tutorial where I will teach you how to get started with react. I will assume that you have no prior knowledge about react so this tutorial will be very simple.

The first ting we need to do is to setup our project. For that we will use a tool called create-react-app. It is developed by facebook to make our lifes easier when creating react applications. You need to run this command in order to setup your project:

npx create-react-app my-app

This will setup your project in a folder called my-app. Below is the folder structure of this folder.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js

As you can see create react app has setup everything for us. The public folder is where you are going to upload your statics to and in the src folder you will have all of the source code. Now let’s run two commands to start our webserver for development.

cd my-app
yarn start

This will open a new tab in your browser where you should see an image similar to this one

Create react app home screen

Now let’s edit the App.js file to change “Welcome to React” to “Welcome to slugin.io” and save your changes.

<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to slugin.io</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>

You should now see that your browser has automatically been updated with the new text. How awesome is that?

We have setup everything we need to get started with creating react applications. You can now conquere the world! With “some” practice.

Max Moeschinger

Written by

Founder of @momentechnologi. Full stack developer (React, php and nodejs).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade