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
git. Before we get our hands wet, let me explain to you a very brief history and the current landscape of front-end development.
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.
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.
Source control: Git
Remote repository: GitHub / GitLab / BitBucket
IDE: Atom / VSCode
Module bundler: Webpack / RequireJS
CSS Preprocessors: SASS / LESS
Code linting: ESLint
Testing: Mocha / Jest / Enzyme
/// Future edit: In this article, I have explained how to use these software and toolings.
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
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.
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 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.
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.
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.
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
The key-value pairs in
scripts are the bash commands accessible via
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
This will start a dev server at http://localhost:3000. Without further ado, let’s start the project you have created using
Voila! If you go to http://localhost:3000
, you will see the started template created for you.
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.
We are using
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.
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.
This article was last updated at: Tuesday, November 28, 2017 3:34 PM