Ext JS to React: Scaffolding

This is part of the Ext JS to React blog series. You can review the code from this article on the Ext JS to React Git repo.

In this post we’ll talk about how to get started with React. Coming from the Sencha ecosystem, you may be used to launching a project using Sencha Cmd to create a project folder, configuration file, and some initial file and folder scaffolding. The React universe is a bit less prescriptive in nature than with Ext JS. However, we do have access to a helpful utility that will offer us the same type of starting point: create-react-app.

Facebook Incubator’s create-react-app module installs globally on your Windows, Linux, or macOS environment. create-react-app generates a project folder, self-contained web server instance, unit testing framework, and an initial files and folder structure. The starter project hides the build config files resulting in less project overhead. The following steps will create an initial project. The following steps will create a starter app. Then we’ll incrementally add small React files to demonstrate the benefit of using create-react-app to learn the React ecosystem.

Installing create-react-app

The create-react-app README does a great job of detailing how to install and run create-react-app. For a full walkthrough, refer to the source documentation. For our purposes, we’ll hit on some of the high level steps sufficient to get us going. Install create-react-app using npm install.

Note: If you do not already have a Node + NPM environment, please refer to Mozilla’s guide on “Setting up a Node development environment”.

Use the following terminal commands in the folder of your choosing to install create-react-app and start its server instance:

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

These steps would be similar to installing Sencha Cmd and running:

sencha app init --ext@6.5.1 --modern MyApp my-app
sencha app watch

The npm start command starts the server instance which you can view within your browser by navigating to http://localhost:3000. You should see something like the following in the browser:

Generated Files

The generated application’s index.html page is located in {app-root}/public/index.html. You shouldn’t need to edit this file in most situations. Its primary use, for our purposes, is to create the target div that our React app will render to:

<div id="root"></div>

Taking a look at {app-root}/src/index.js we see the following line that renders our output from {app-root}/src/App.js to the “root” element defined in the index.html:

ReactDOM.render(<App />, document.getElementById('root'));

What we’re seeing in the browser is a result of the React component class found in {app-root}/src/App.js. The render() method from App.js returns the header, logo, and subsequent body text:

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>
       </div>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

The underlying build process links the final index.html page to the two CSS files responsible for application styling. Therefore, the overarching page styling is provided by the CSS rules defined in {app-root}/src/index.css:

body {
 margin: 0;
 padding: 0;
 font-family: sans-serif;
}

The elements output by the React component in App.js are then styled by CSS rules described in {app-root}/src/App.css.

.App {
 text-align: center;
}

.App-logo {
 animation: App-logo-spin infinite 20s linear;
 height: 80px;
}

.App-header {
 background-color: #222;
 height: 150px;
 padding: 20px;
 color: white;
}

.App-intro {
 font-size: large;
}

@keyframes App-logo-spin {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

The build’s CSS assets include App.css by using an include statement in the App.js file defining the React component meant to use the style rules. The import line in the App.js file incorporates the style rules for each build:

import './App.css';

Modifying Project Files

With “npm start” running, viewing changes you make to the starter app is easy. Simply add or modify content in your project and save it. The browser automatically refreshes on save to show your changes using Webpack’s Hot Module Replacement. Let’s update some text and the logo and save our project. Notice how create-react-app publishes our changes to the browser real-time.

In {app-root}/src/App.js let’s change:

<h2>Welcome to React</h2>

to

<h2>Welcome to Modus Create</h2>

Create a file named {app-root}/src/logo2.svg with the following:

<svg viewBox="0 0 50 46" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.41">
  <path fill="none" d="M0 0h49.77v45.37H0z"/>
  <g fill-rule="nonzero">
    <path d="M24.9 23.97c-.32 0-.63 0-.93-.03-.14 2.32-.6 4.54-1.35 6.64.75.07 1.5.1 2.27.1 12.35 0 22.42-9.86 22.76-22.16-2.6.34-5.02 1.32-7.07 2.78-1.58 7.23-8 12.67-15.7 12.67" fill="#ef3c23"/>
    <path d="M26.96 22.6v.05c2.28-.32 4.38-1.15 6.2-2.38 1.66-6.84 7.4-12.07 14.52-12.94-.06-2.56-.54-5.02-1.38-7.3C35.35 1.7 26.96 11.17 26.96 22.6" fill="#981936"/>
    <path d="M49.77 41.37c-7.35 0-13.62-4.65-16.03-11.17-1.57.63-3.2 1.1-4.92 1.37 3.5 8.12 11.56 13.8 20.95 13.8v-4z" fill="#f8981c"/>
    <path d="M0 45.37c12.6 0 22.8-10.22 22.8-22.8 0-8.63-4.77-16.13-11.8-20-.65 1.65-1 3.44-1 5.32 0 .9.08 1.8.24 2.7 4.16 3.1 6.85 8.06 6.85 13.66 0 9.44-7.68 17.1-17.1 17.1v4z" fill="#0a679b"/>
    <path d="M15.3 28.58c.38-1.37.6-2.82.6-4.3 0-1.14-.13-2.25-.36-3.3-4.08-2.93-6.74-7.7-6.74-13.1 0-2.07.4-4.06 1.12-5.88-2-.97-4.17-1.65-6.44-2-.9 2.46-1.4 5.1-1.4 7.88 0 9.17 5.4 17.07 13.22 20.7" fill="#179b48"/>
  </g>
</svg>

Next, edit {app-root}/src/App.js and change the import logo statement to include logo2.svg instead of logo.svg to see the image asset update real-time as you save.

Then, let’s halt the spinning behavior of the logo by commenting out the following line in {app-root}/src/App.css:

/*animation: App-logo-spin infinite 20s linear;*/

Save all files and switch back over to your browser to see the changes:

Build Errors

Build errors display in both the browser viewport and the browser dev tools console. Non-critical warnings will display in the dev tools console only. For example, if we modify our {app-root}/src/App.js file so that the closing </h1> tag as </h2> we’ll break the build by introducing a bug where the opening tag doesn’t match our closing tag. Saving the tag mismatch will throw the following error in our browser:

*Don’t forget to undo that intentional bug now!

Production Build

The steps we’ve taken so far have been in the development workflow. So, what about when you’re ready to package up all of the various CSS, JS, and other asset files for production? Fortunately, create-react-app makes building your files for production easy as well! The workflow will be similar to stopping Sencha Cmd’s app watch process and building using sencha app build production. First, press ctrl-c in your terminal window to stop the development server instance. Then, to build your project use the following statement in the terminal window (from the project’s root folder):

npm run build

Note: There are two package managers: npm and yarn. Nodejs installs npm and we’ll use that as our primary package installer. But, if you happen to be more familiar / fond of yarn, feel free to use it in place of npm throughout the blog series.

The resulting output is placed in the {app-root}/build folder including the page’s single {app-root}/build/index.html file that links to the optimized .js and .css assets used to run the single page application.

Onward to React

The create-react-app setup is by no means a requirement. You’re welcome to use it as-is, start with it and eject to supply your own build configuration, or even start completely from scratch. Additionally, we welcome you to clone our own starter app as a way to launch your React application using our custom scaffold designed to deliver the most speed and best user experience. For simplicity, we’ll assume through the course of this blog series that you’ve started with create-react-app as the examples will often define an <App> component to be rendered to a “root” element in your index page. With our scaffolding process outlined, we’re now ready to forge ahead into the React ecosystem starting with how to define and instantiate React component classes.