React has become one of the most influential and popular Javascript libraries since it first appeared on the scene. However, it can be quite overwhelming to get started with, due to abstract concepts and the fact that you need to know about a few other technologies aside from React itself, such as Babel (transpiler) or Webpack (module bundler), to be able to properly use it. Although Babel and Webpack play essential roles for React production, they may not be the first thing you want to learn when you decide to get your feet wet in the world of React.

If you are looking for an easier way to start a React project, I have good news for you, because there is a perfect tool that suits your needs. Give a round of applause to the Create React app! It installs and preconfigures whatever is needed for an optimal environment to build a React app, so you can jump into the coding stage right away.
In this article, we will go over installing the Create React App, up to saying Hello to the world.

Installation

The following commands will install the Create React app, and create a directory named “react-app.”

$ npm install -g create-react-app
// or
$ yarn global add create-react-app
$ create-react-app react-app

After the Create React app safely finishes its job, you will see brief descriptions of what it’s done, and npm commands that you can use inside the directory.

Figure 1–1

Let’s cd into react-app and run npm start. It will start the development server on port 3000 by default, and automatically open localhost:3000 in your browser (you will see a page like Figure 1–2). It will reload every time you make a change.

Figure 1–2

Editing

Before we move forward, we’ll take a quick look at the directory tree of react-app, with extra attention on highlighted files.

Figure 2–1

/public/index.html is the HTML file that all of your React files will be rendered into. You can change the title tag, and add link and script tags, or edit DOM elements if needed. /src/index.js is the entry point of the project that React will be looking into before any other files. (Keep in mind that these two files should never be moved or renamed.) Last but not least, /src/App.js is what we need to work on to change the welcome page into a “Hello world” page.

Let’s open up /src/App.js to make some magic happen. This file is written in a HTML/XML-like language, which is called JSX. It is recommended to use JSX when working with React, because it performs faster and describes the UI better than plain JavaScript. The only downside is that JSX is not browser-friendly, so it needs to be transpiled with Babel. If you want to learn more about JSX as used in React, please visit here.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      

        

          
          
Welcome to React
        
        

          To get started, edit src/App.js and save to reload.
        
      
    );
  }
}

export default App;

/src/App.js contains a React component, “App.” A component is like an instruction you write to tell React what you want it to render on the screen. There are a few different built-in methods you can use in a component, or you can even make your own methods, but the most important and commonly used method is render. You can use render to return a React element: a description of how it should look on the screen. I made some changes in render so now App.js can display Hello World. (Note that if you want to return multiple elements, you must wrap them in an enclosed element like that below.)

import React, { Component } from 'react';
// Removed logo since we don't need it anymore
import './App.css';
class App extends Component {
  render() {
    return (
      

        
Hello World!
        
I just created my first React App
      
    );
  }
}

export default App;

I also sprinkled some styles in src/App.css.

.container {
  text-align: center;
}

.container > h1 {
  color: steelblue;
}

Delivery

The src/index.js file is responsible for App component delivery to the final destination. It imports App — We exported it at the end of the App.js file — and renders it into a container (DOM node) in public/index.html, using ReactDOM.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();

ReactDOM.render accepts two arguments: a React element and a DOM node to render it. In this case, what we need to pass as an element is what the App component returns. To reference a component, we can use an HTML-like tag, like or .

Deployment

If you kept localhost:3000 open in your browser, you might have noticed your screen is already showing you the updated page—and yes, we could say we are done for today. But when your app gets complicated and bigger, what you have right now won’t be quite ideal for deployment.
Running npm run build will create a directory called “build” and produce optimized and minified builds of the app, ready to be served with the best performance. This is where Babel comes in and transpiles JSX into browser-compatible language, and Webpack bundles up the modules and dependencies.

Figure 2–2

To serve it on your localhost, you can run:

$ npm install -g serve
$ serve -s build // serving contents of "build" directory

and it will show you the following message.

Figure 2–3

Now let’s open localhost:5000 in your browser to check our result.

Figure 2–4

Congratulations, you just Reacted “Hello World!”

Resources:
https://facebook.github.io/react/