Build Your First React Application In 15 Minutes

You might have heard on React or even saw some cool project examples, but can you imagine you’ll be able to build your own react-based application in nor more then 15 minutes? 
Well… now you can!

Prerequisites

  1. Basic knowledge in JavaScript.
  2. Node.js installed.
  3. Optional: Supported IDE (such as: VS Code, Atom, WebStorm, or any other alternative you’d like).

The full source-code can be found on my Github: https://github.com/izikorgad/my-first-react-app

Project Setup

First, create a new directory — let’s call it ‘my-first-react-app’.
Now, open a new console/terminal from that new directory path and type the following command:

npm init

npm init is a command that trigger project-setup process, it will ask you a several questions during that process — you can just hit Enter and stick with the default properties (which is perfectly OK), ot specify your own values.

When npm init is complete, it will create a new file called “package.json”.
This file is basically our project file under npm framework (similar to .proj file on other frameworks).
Lets focus on the major sections:

  1. name: the name of your project/package.
  2. scripts: each entry in this section will be a legal npm execution caomman.
    For example, we can use the default ‘test’ script and run:
npm run test

The result of the above execution would be:

“Error: no test specified”

Lets add our own new script entry: “start”: “node .”

“scripts”: {
“start”: “node .”,
“test”: “echo \”Error: no test specified\” && exit 1"
},

3. dependencies: other npm packages that are required by your package (e.g. react)

4. devDependencies: npm packages that are needed for your development/build environment. Those package won’t be installed on your consumers during npm install command.

Now, lets add some basic requirements.
Execute the following command (note that the current shell path is your project directory):


npm install --save react react-dom

This will add react and react-dom as dependencies (the -save flag will also update your package.json)

Transpilation & Packing

Transpilation
The JavaScript language is on a constant enhancement process.
JavaScript follows the Ecma standard which declares new features and capabilities on each new version.
Browsers

In order to be able to writ our code using the latest ES version (which will make our code cleaner and much more readable), but still function on any browser - we need to use a transpailer.
The most common transpailer is babel.
Babel has a very wide and active community, that supplies many useful plugins framework.

Packing
 
On the other hand, there is the packing phase: 
A typical Javascript project contains multiple source files and many other resources (css, icons, fonts, etc.), which make the final application deployment to a painful process.

One of the most popular tools is webpack.
It allow us to run our application from a single (or several pre-defined) .js file.

Another very useful tool is webpack dev server, which enable us to decouple front-end development from web server implementation, by acting as local web-server that serves our single page application.
Webpack dev server watches our source file, so any change we’ll make will take affect immediately, without the tedious build+compile+run process.

So, for the next phase, let’s add all those necessary modules as dev-dependencies:

npm install --sav-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server

Now, create a new folder named ‘config’ under your project root directory.
Under the new config folder create new file ‘webpack.config.js’:

On the same directory create a new file called .babelrc (this is the babel configuration file):

One last thing, before we’ll start the real fun…
Change the npm script ‘start’ we’ve created eralier into:

"start": "webpack-dev-server — config ./config/webpack.config.js — colors”

Single Page Application

In a single page application we only one html file with almost zero content.
When this page (usually named index.html) is served, it asked for additional resources file from the server - on our case a single .js file.
Then, the real magic happens: our whole application, embedded in a single javascript file, starts to dynamically create new DMO elements and appending them into the single html file.
Basically- react uses this html as a sketch-board.

Create a new folder ‘src’ under the project root directory.
Just beneath it, create another one called ‘components’.
Add an index.html file under the root directory:

Your project should have the following structure by now:

- my-firts-react-app
- config
webpake.config.json
.babelrc
- node_modules
- src
- components
index.html
package-lock.json
package.json

Now, create our starting point script index.js under the src directory (you can think of it as the ‘main’ in other languages):

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'components/app';
ReactDOM.render(<App/>, document.getElementById('app'));

As you can see, the code above just looks for a div with id=’app’ render new content <App/> within that element.
But, wait a second - what is this new <App/> HTML tag???
All react rendered elements are not html tags, they just looks alike, those are really JSX Elements.

The way to produce and render JSX we use React components.

React Components

React application is built from an hierarchy of well-defined components.
Each component acts as a single Lego part.

Let’s create our first and missing component - App:
Create new file under the ‘components’ folder named ‘app.jsx’:

Now, you can run your application by executing the npm script we’ve defined earlier:

npm start

Your application will be available on http://localhost:3000, and should look like that:

Your first react app

all there left is to create and add new components to enrich your new application.

Enjoy!