React App Development Setup on MacOs

Note: This post is work-in-progress learning-note and still in active development and updated regularly.

When I started learning JavaScript (JS) beginning of this year, I really wanted to understand ReactJS frame work. There were several posts suggesting that 2018 was a year of React. ReactJs is advanced JS framework it requires working knowledge of JS fundamentals. After completing this keyword and its use in ReactJs learning-note post last week, I spent some time reviewing blog posts, tutorials, books on ReactJs to side track from my regular JS learning.

I have not completed yet my JavaScript fundamentals and my fourth quarter learning plan includeES6 features and understanding DOM. Inspired by Robin Wieruch’s post – JavaScript fundamentals before learning React, I have made an attempt to discuss my current JS knowledge gaps required to understand terminology and various react components and ability to create and do small React App projects, in a separate post JavaScript Fundamentals Knowledge & React Learning.

Inspired by Robin Wieruch’s post – JavaScript fundamentals before learning React, this post is an attempt to start exploring learning React App landscape. In this post step by step procedures to install <a href="https://www.npmjs.com/package/create-react-app" target="_blank" rel="noopener">create-react-app</a> npm package is discussed.

Setup & Installation

NodeJs and NPM

Install Node.js and NMP (node package manager) if it is not installed in your machine. Check current version as shown below:

#!-- check nodejs installation  
node --version
*v6.10.2 
#!-- check npm installation 
npm --version
*3.10.10

Because development environment to create react app requires latest JS features with Node >= 6 and npm >= 5.2 on the machine. If its not, npm and node.js can be updated to current version as outline below.

Updating NodeJs and NPM

Using NPM, upgrade npm to latest stable version issue following commands in the terminal:

#! to upgrade npm to latest version
npm install npm@latest -g

#! version check
npm --version
v6.10.2

To upgrade node.js, npm‘s handy Node binary manager module ‘n’ is required. Then run the following code from the terminal:

#! clear npm cache
sudo npm cache clean -f #! clear cache
#! install n globally
sudo npm install -g n 
#! upgrade to latest stable version
sudo n stable  

#! check current running version
node --version
v10.12.0

Source: Node.js fundamentals: how to upgrade the Node.js version.

Laura Bernheim describes other ways How to Update Node.js to Latest Version (Linux, Ubuntu, OSX, Others).

Visual Studio Code For React Development

The popular Visual Studio Code editor contains instructions for React App development. Because VS Code is integrated with npm. Robin Wieruch, author of The Road to Learn react, recommends VS Code for React Development. I decided to use VS Code for my React App installation and setup development environment.

1. Lunch VS Code ‘Integrated Command Line’

In MacOS, terminal app can be use to use command line. VS Code has support of for the Node.js and npm out of the box, through integrated terminal. VS code integrated terminal can be lunched through view > integrated terminal. Because in my MacOS machine VS Code has been installed with ‘code’ command in PATH, shell command can be issued from any selected folder.

Tip: To test that Node.js and npm are accessible through command line window, type node --v or nmp --v which displays current versions of Node and npm currently running in the machine.

2. Create Project Directory

Lets create project directory folder through integrated command terminal as shown below:

#! create project folder
cd Documents
#! make react-projects folder
mkdir react-projects
#! change directory to react-projects
cd react-projects
3. Install Create-React-App

It is a npm package which creates React apps without any configuration. Install create-react-app as follows:

#! install with - g (global)
npm install -g create-react-app #! if asked use with sudo

#! check version installed
create-react-app --version 
*v2.0.3

The create-react-app is installed as global package in the machine so that it is available to run from any location. In some machine its requires sudo and password for the apple app installation.

4. Install React App in Project Folder
#! install app in project folder
create-react-app learn-react

For creating app, the above command is issued. The learn-react is the name of my react app. When installation process is completed the following message will appear in the screen:

Success! Created learn-react app at .../documents/react-projects/learn-react
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd learn-react
  npm start

Happy hacking!
5. Start React App Server

Start React App Development Server from the project folder (eg, learn-react) to ensure that the newly created learn-react app has no errors.

#! move to project directory
cd learn-react

#! start app
npm start

The next step is to change directory to project folder learn-react(line 2) and run npm from by issuing npm start from command line (line 5) to start the local development server. If there are no errors, the following message is displayed on the screen.

Compiled successfully!
 
 You can now view learn-react in the browser.
 Local:            http://localhost:3000/
 On Your Network:  http://000.000.0.00:3000/ #! network address hidden

 Note that the development build is not optimized.
 To create a production build, use npm run build.
 Compiled successfully!
 
Happy hacking!

The default browser will launch automatically and following screen will appear.

Fig: Screenshot of React App lunch in browser.

React App File Structure

React App creates following folders as well as developer settings, using webpack tool which transforms directories and files into static assets.

#! File structure
learn-react/
  README.md
  node_modules/
  package.json
  package-lock.json
  public/
    index.html
    manifest.json
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    serviceWorker.js
    logo.svg

node_modules: this folder contains all the dependencies and sub-dependencies required by the create-react-app.  These dependencies (as specified by package.json) gets downloaded from the core.

public: This folder contains the static files of the app project including default index.html file (an entry point for the web) and project favicon (header icon) and a manifest.json file.

src: This folder contains the all the React application related files.  This also contains index.js file, which is starting js file with codes to insert to output into React DOM.

package.json: This file lists of packages installed and outlines all the app settings. There is also a package-lock.json (locked version).

.gitignore: The list of files that should be ignored when the buildup files are uploaded.

For our React App development perspective, the following two folders are important.

The /public folder which contains index.html file is a rootdevelopment. All the ReactJS App code and  a manifest.jsonconfiguration file for Android applications.

The /src directory contains all the dependencies &  sub-dependencies of React App which will be processed by webpack. It contains main App Js component file (App.js), styles for the App (App.css) and a test suite file (App.test.js). The index.js its related index.css files are an entry into the App. The registerServiceWorker.js is kicked off by the index.js and provides file updating and caching for user.

To insure that our React App development set up is installed successfully lets make a small edit on the the following app.js file from the /src folder.

In the example below, the default app.js file is modified between lines 10-12. The header line was changed to Welcome to react (line 12) and text in line 15 was modified to Happy Learning & hacking! and placed outside of header div.

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">  
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2> // edited text
          </div>
          // header ends here
          <p className="app-intro">
            Happy Learning & hacking! // edited text
          </p>
         </div>
    );
  }
}

export default App;

Now save the file. The React App automatically compiles and refreshes the browser with edited data as shown below:

Fig: Screenshot modified React App lunch in browser.
Next Step

Now, that React App development environment is setup, next step to is to getting familiar with the React terminology and start with a simple react app project using official introduction to react.

Wrapping Up

In this learning-note post, steps to installed create-react-app (a npm package), using Visual Code integrated terminal successfully created React App starter app in my MacOS laptop.

NEXT POST: Learning to Create App Components with Create React App

Useful Resources and Links

While preparing this post, I have referred the following references extensively. Please to refer original posts for more detailed information.