This article is the first on in the Productive with React series. My goal here is to show you how to build a production ready React app from setting up to deployment. By the end of this serie you will know how to use React with external and internal APIs, add Redux for state management, understand basic DOM principles, and deploy to a production server. It’s not required that you have a prior experience with React but I am assuming that you have some knowledge with bash and git. Before we get our hands wet, let me explain to you a very brief history and the current landscape of front-end development.

The web we see today is nothing like the web in the 90’s. The very first web was created to share text documents between universities. As the requirement of the users was very limited, the web pages were as simple as just text and hyper links. In the process to modern day web HTTP, HTML, CSS, and Javascript were created along side each other to advance the web’s capabilities.

The turning point of the web was when Javascript was used on both the server-side and client-side. You can see overwhelming popularity of NodeJS, server-side web framework based on Javascript. Has the browser’s capabilities increased fuel the development of front-end focused web apps and mobile apps. Responsibilities shifted rapidly from the backend to frontend. In a way, this is the most exciting time to be a front-end developer.

As the total number of websites reached over 1 billion and growing, you want your website to load faster, reduce server cost, have better user experience and be more intuitive than others. In the past we could write spheghetti javascript code to show some animated effects on your webpage. Now web applications are capable of real-time data flow. Widespread use of mobile devices changes user behaviors and expectations of what a website should be. Traditionally, the web pages reload at every client-server request or when the user navigate to another URL. This is called server-side rendering. Instead, we want something snappy like a mobile app. This is where the role of front-end frameworks come in.

Using a Javascript frontend framework can guarantee that interactive user experience is not jeopardized by “page load”. This can be achieved by client-side rendering. The browser loads the initial page the cliet requested from the server along with resources (scripts, stylesheets) required for the whole app. When there’s a user interaction with the app, the Javascript code already loaded at the initial page load handles the data flow via AJAX. Then it dynamically updates a portion of the DOM tree or the page with new data where necessary. (resource: https://stackoverflow.com/questions/21862054/single-page-application-advantages-and-disadvantages)

Over the past 7 years or so frontend libraries and frameworks have their ups and downs. You can see the Google trend data of the most prominent front-end libraries and frameworks below.

 " " \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \"google-trends-fe-dev.png\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"""

The data shows that there’s a steady support for React while Vue is gaining a lot of attention. Choosing either of these two depending on your need is the right choice for you.

The toolings and software that can support growing needs of front-end development are rather overwhelming. Here’s a list of software and Javascript tools that I use as part of my workflow:

Software

Source control: Git

Remote repository: GitHub / GitLab / BitBucket

IDE: Atom / VSCode

JavaScript tools

Module bundler: Webpack / RequireJS

CSS Preprocessors: SASS / LESS

JavaScript Transpiler: Babel

Code linting: ESLint

Testing: Mocha / Jest / Enzyme

/// Future edit: In this article, I have explained how to use these software and toolings.

Why React?

First of all, React is declarative. When the state is changed within the component, the view will update by itself according to the state change. Writing your HTML code in your javascript code in the form of JSX, a preprocessor step that adds XML syntax to JavaScript, means that you can easily see how your page looks like right away. React is easy to learn compare to its contemporaries such as Angular. It only has a few API interfaces and concepts to learn. React also has a strong community support and comes with great tooling and OSS libraries.

Vue may be the faster than React at development due to built-in routing, but in terms of the ecosystem, overall usage benefits and developer experience, React is the winner. Another advantage React has is the ability to create native mobile applications using React Native.

Without further ado, let’s start coding with React. You can read more about React on their official website.

Setting up development environment

Install NodeJS

If you don’t have node in your computer, you will need it to install required libraries for development.

Install the latest stable version of node with nvm by following node's official installation guide. We want to install the latest version of node and all dependent libraries we use as well so that we can avoid the technical debt later on.

Install Yarn

Even though npm is a de facto package manager, we are going to use yarn here because yarn is super fast compare to npm since it uses offline cache; meaning a library you install is cached in your disk instead of directly downling tar ball from the npm registry every time you install packages with yarn. To install yarn you can do:

npm install yarn --global  

--global flag here is used so that yarn will be install in your computer instead of your project directory only. You can see how package.json works in the next article in this series.

But if you are using OSX installing via homebrew is recommended:

brew update

brew install yarn

Creating a React application

React’s build systems and dev environment is complex enough that starters usually shy away at this point. Complexity is not a bad thing for React development here since the benefits are overwhelming, but for somebody who’s just starting, I would recommend using a pre-built app, a boilerplate or a build tool to create a React app. Later on if you want to understand how React library itself works you can do that as well.

Here we will be using a command line tool called create-react-app to build our first app. By using this we can create React apps without build configuration. Supported by the community and, 300+ contributors, 33,000 stars on Github by the time I am writing this article, you can see the effort on this.

Install create-react-app

Simply install create-react-app using yarn.

 " " \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \"install_create-react-app_with_yarn.png\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"""

Then, you can change your desired directory to create your app. We will create a news client using public news API where you can overview new posts’ headlines from different sources. I am going to call the app hatchy-news. ​

 " " \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \"create-react-app_create.png\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"""

You will see the project scaffolds and dependencies under the main project folder, all installed for you by create-react-app. Take a look at package.json file under your project root directory.

 " " \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \"package.jsonfile.png\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"""

You will see that there’re three key value pairs in dependencies. Those are the based libraries you need to run the app built by create-react-app.

The key-value pairs in scripts are the bash commands accessible via yarn (or npm) to start and stop the project.

When you created the app, you will see the following output:

$ create-react-app hatchy-news

Success! Created hello-world at /Users/novasaint/hatchy-news Inside that directory, you can run several commands:

yarn start Starts the development server.

yarn build Bundles the app into static files for production.

yarn test Starts the test runner.

yarn 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 hatchy-news yarn start

Happy hacking!

yarn start

This will start a dev server at http://localhost:3000. Without further ado, let’s start the project you have created using yarn dev.

 " " \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \"yarn_start_project.png\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\""" Voila! If you go to http://localhost:3000

, you will see the started template created for you.

 " " \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \"sample_page.png\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"""

yarn build

This will “bundle” the app into static files for production. This means that it’s going to grab all the code, compile scripts that the browsers can’t read into browser readable versions, minify the code into the smallest possible version so that it can be downloaded faster so that your app is more responsive.

yarn test

 " " \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \" \"yarn_test.png\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"""

We are using

Jest, a Javascript testing library that supports React out of the box, to test the application here. Every time you run yarn test it will test all the files under src folder with the name test.js at the end. In this case we are testing, src/App.test.js. The green mark beside the file name indicates that it passed.

yarn eject

What this does is it removes create-react-app context from your application and convert your app configuration into a standard webpack build. This allows you to add advanced or customized webpack configurations for your app.

Now that you know what we need to do to create a React app, we will explore adding features, APIs and Redux to your app. Before that, it’s better to know how things are connected under the hood of your project, how your project architecture works and what’s a good way to organize your code. In the next article, I explain the project architecture of this React app and how to simplify and organize the files.

Happy Hacking!!


This article was last updated at: Tuesday, November 28, 2017 3:34 PM