Secret ingredients to quality software

SSW Foursquare

Rules to Better React - 13 Rules

If you still need help, visit our React consulting page and book in a consultant.

  1. Do you know why React is great?

    There are so many open-source platforms for making the front-end web application development easier, some people like Angular, some people like React. Let us take a look at the benefits of React.


    ReactJS is just simpler to grasp right away. The component-based approach, well-defined lifecycle, and use of just plain JavaScript make React very simple to learn, build a professional web (and mobile applications), and support it. React uses a special syntax called JSX which allows you to mix HTML with JavaScript. This is not a requirement; Developers can still write in plain JavaScript but JSX is much easier to use.

    Easy to learn

    Anyone with a basic previous knowledge in programming can easily understand React while Angular and Ember are referred to as Domain specific Language, implying that it is difficult to learn them. For React you just need basic knowledge of CSS and HTML.

    Native Approach

    React can be used to create mobile applications (React Native). And React is a diehard fan of reusability, meaning extensive code reusability is supported. So at the same time we can make IOS, Android and Web applications.

    Data Binding

    React uses one-way data binding and an application architecture called Flux controls the flow of data to components through one control point – the dispatcher. It's easier to debug self-contained components of large ReactJS apps.


    React does not offer any concept of a built-in container for dependency. You can use Browserify, RequireJS, EcmaScript 6 modules which we can use via Babel, ReactJS-di to inject dependencies automatically.


    ReactJS applications are super easy to test. React views can be treated as functions of the state, so we can manipulate state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc.

    Great Developer Tools

    Developer toolset is another important factor when you are choosing a development platform. There are 2 great tools you should be aware of:  React Developer Tools  and  Redux Developer Tools.  Both can be installed as Chrome extensions.


  2. Do you know when to use React?

    Angular is great for building large enterprise applications but it is a full framework that works best as a full application.

    React, however, is easier to embed on another framework or application such as Office 365 or Sharepoint.

  3. Here are the best collection of resources for Angular.:

    Free Resources

    Training Courses


    Free Events

  4. Create-React-App is a boilerplate provided by Facebook for almost any React project. Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

    create react app
    Good example: Use the create-react-app npm package

    1. Install Create-React-App
    2. Quick Start
    npx create-react-app my-app
    cd my-app
    npm start
    1. Open your Application localhost:3000

    Note: npx comes with npm 5.2+ and higher, see instructions for older npm versions.

    See Gatsby starter kits to create static websites with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.

  5. Creating a Production Build of a React project is complicated, you need great tools.


    Webpack  is a module bundler. It packs CommonJs/AMD modules. See:

    Create React App

    npm run build

    **Create React App ** uses Webpack under the hood.npm run build creates a build directory with a production build of your app. See:

  6. When working with JavaScript packages there are 2 common choices:

    npm logo
    Figure: npm is the backbone of JavaScript development but after the left-pad disaster of 2016 lots of developers wanted more power

    yarn logo
    Figure: Yarn is fast and enables offline support - If you've installed a package before, you can install it again without any internet connection (no more left-pad disasters)

  7. State management is complex and time-consuming. The redux pattern helps resolve this issue.

    maintaining state
    Figure: Bad example - Maintaining state on individual components

    redux logo
    Figure: Good example - use the redux pattern

    The 4 principles of the redux pattern

    1. The entire state of the application is represented in a single JavaScript object called a store.
    2. The store is acted upon using special functions called reducers.
    3. State is immutable and reducers are the only part of the application that can change state.
    4. Reducers are pure JavaScript functions. This means they cannot import external dependencies.

    Side Effects

    To perform operations that require external dependencies (such as communicating with a web server), we can implement side effects. These can use external dependencies but they cannot directly modify the store. They can invoke reducers to modify the store when the side effect is complete.

    Redux-Saga is a library that provides redux application side effects.

    The advantages of using Redux-Saga are:

    • Collects all asynchronous operations in one place, making the code clearer
    • Uses an ES6 feature called Generators to make asynchronous flows easy to read, write and test
    • Generators also let these asynchronous flows look like your standard synchronous code (kind of like async/await in C#). This solves “callback hell"
  8. There are many example projects created by the React community.  

    Below is a list of sample applications from

    • Calculator Implementation of the iOS calculator built in React
    • Emoji Search Simple React app for searching emoji
    • Github Battle App Battle two Github users and see the most popular Github projects for any language.
    • React Powered Hacker News Client A React & react-router-powered implementation of Hacker News using its Firebase API.
    • Pokedex The list of Pokémon with live search
    • Shopping Cart Simple ecommerce cart application built using React
    • Progressive Web Tetris Besides a beautiful, mobile-friendly implementation of Tetris, this project is a playground for integrating and experimenting with web technologies.
    • Product Comparison Page Simple Product Compare page built in React
    • Hacker News Clone React/GraphQL Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
    • Bitcoin Price Index Simple bitcoin price index data from CoinDesk API.
    • Builder Book Open source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB.
    • GFonts Space A space which allows user to play with Google fonts. Built with React, Redux and React-Router.
  9. When developing Angular or React, there are lots of choices for code editors. The best experience by far is to use Visual Studio Code.

    angular machine setup 1
    Figure: Good Example - Visual Studio Code is a free, lightweight IDE that runs on Windows, Linux and OS X. Visual Studio Code is the IDE of choice for many Angular developers and has lots of great extensions for Angular

    Many experienced teams are using Visual Studio for their C# backend and loving using Visual Studio Code for their Angular or React projects.

    The recommended extension for Visual Studio Code is **Angular Essentials** from John Papa

    Angular Essentials is actually a meta-package that includes a list of great extensions for Angular Development – and this list may be updated in the future as more extensions become popular.


    angular machine setup 2
    Figure: Good Example – the Angular Essentials extension will install a great suite of extensions to support Angular development

    You can find more extensions at Visual Studio | Marketplace.

    Open in Visual Studio Code

    This extension is for those times where you have a project open in Visual Studio and you want to be able to quickly open it in Visual Studio Code .

    open in vscode
    Figure: Get to Visual Studio Code quickly from within Visual Studio - Open in Visual Studio Code extension

    More: Why do others love VS Code?

  10. The whole React ecosystem improves every month. Tons of additional tools, libraries and components are released to simplify the developer’s job and minimize the required effort. 

    Starter kits

    Developers still struggle on making a decision on how to setup their React project when joining the React community. There are thousands of boilerplate projects to choose from and every boilerplate project attempts to fulfil different needs. They vary in a range of minimalistic to almost bloated projects. Here are 2 great Starter kits for React developers.

    • Create React App - An officially supported way to start a client-side React project with no configuration
    • Next.js - Framework for server-rendered or statically-exported React apps

    See more at Starter Kits recommended by the React Team.

    Utility Libraries for React

    JavaScript ES6 and beyond gives you plenty of built-in functionalities dealing with arrays, objects, numbers, objects and strings. One of the most used JavaScript built-in functionalities in React is the built-in map() Array.

    • Lodash is the most widespread utility library in JavaScript. Lodash comes with a powerful set of functions to access, manipulate and compose.
    • Ramda is also great utility library when leaning towards functional programming (FP) in JavaScript.

    Asynchronous Requests in React

    • native fetch API . Nowadays, recent browsers implement the fetch API to conduct asynchronous requests. It uses promises under the hood.
    • axios. It can be used instead of the native fetch API when your application grows in size. Another alternative is called superagent.

    State Management Helpers


    Creates a selector where the first functions passed in compute props for a final function. If none of those props have changed, then that function is not run and the result from the previous invocation is returned. This keeps the state from needlessly causing components to re-render.

    Global Serverless Deployments

    Now makes serverless application deployment easy.



    Testing suite that provides a click-and-check API for automated in-browser smoke tests.

  11. Practices - Do you write small components?

    The Single Responsibility Principle is a well understood, and well-accepted tenant of good code design. It states that a class should do one thing, and do it well - The same applies to Components used with Frameworks such as Angular, React, Vue and Blazor.

    When designing components, keep them small, modular and reusable. For example, if you have a menu, put it into a menu component, don’t put it in your app component.

    comp 1
    Figure: Bad example - Having just 3 components for the page makes it difficult to reuse, maintain and test

    comp 2
    Figure: Good example - Splitting up the page into 11 components means they are small and targeted - and thus easy to maintain and test. Components can be reused on other pages

  12. The main contenders for the best UI framework for React are:



    Ant Design


    MaterialUI is a set of React Components that Implement the Google’s Material Design Guidelines. When it comes to predefined components especially UI, one important thing we need to find is how many UI widgets are available and whether these can be customized with configurations. Material-UI has all components that you need and it is very configurable with a predefined color palette. Material UI is one of the best Reactjs based UI frameworks that have the most refined implementation of Material Design.

    Snipaste 2019 05 14 18 04 27
    Figure: MaterialUI is a set of React components that implement Google's Material Design

    Get started: react-material-ui-official-docs-example

    React Bootstrap

    Bootstrap is one of the most popular and widely used CSS frameworks. It is no surprise to have the duo of React and Bootstrap. React Bootstrap is a set of React components that implement the Bootstrap framework. React-Bootstrap currently targets Bootstrap v3 and the team is actively working on Bootstrap v4.

    Get started: react-bootstrap-ui-official-docs-example

    Ant Design

    Ant Design React is dedicated to providing a good development experience for programmers. An enterprise-class UI design language and React-based implementation. Ant Design is a set of high-quality React components out of the box which is written in TypeScript . It supports a browser, server-side rendering, and Electron environments have many components and even a tutorial with Create React App

    Get started: ant-design-example

  13. Typescript is the best choice when writing Angular and React applications. Angular is even written in Typescript itself! 

    Typescript allows you to strongly type your JavaScript code as well as use the new ES6+ specifications.

    You can start learning more about typescript at

    You should also check out SSW TV Videos on Typescript.

We open source. Powered by GitHub