Rules to Better React

​​​

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  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.​

    Simplicity

    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.

    ​Performance

    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.

    ​Testability

    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.

    References​

  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. Do you know the best learning resources for React?

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

    Free Resources

    Training Courses​

    Book​​​s

    Free Events​

  4. Do you know how to easily start a React project?

    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.png
    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

    3. Open your Application http://localhost:3000

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

    See more starter kits at https://reactjs.org/community/starter-kits.html

  5. Tools - Do you know the best IDE for React?

    VSCode​ is an open-source, cross-platform editor that has become a favourite of programmers, particularly in the Web Development community. It’s fast, extensible, customisable, and has tons of features. You should check it out if you haven’t already done it.​​

  6. Tools - Do you know the best Build Tool for React?

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

    Webpack​​

    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:

  7. Do you know the best package manager for React?

    ​When working with JavaScript packages there are 2 common choices:
    npm-logo.jpg
    Figure: npm is the backbone of JavaScript development but after the left-pad disaster of 2016 lots of developers wanted more power
    yarn-logo.jpg
    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)
  8. Do you know the best practice for managing state?

    ​State management is complex and time-consuming.​​​​​

    The redux pattern helps resolve this issue.

    maintaining-state.png
    Bad example: maintaining state on individual components
    redux-logo.png
    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 [https://redux.js.org/docs/basics/Store.html ].
    2. The store is acted upon using special functions called reducers [ https://redux.js.org/docs/basics/Reducers.html ].
    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:
    1. Collects all asynchronous operations in one place, making the code clearer.
    2. Uses an  ES6 feature called Generators to make asynchronous flows easy to read, write and test.
    3. Generators also let these asynchronous flows look like your standard synchronous code (kind of like async/await in C#). This solves “callback hell” [https://en.wiktionary.org/wiki/callback_hell ]
  9. Do you know the best example projects – React?

    ​There are many example projects created by the React community.  

    Below is a list of sample applications from https://reactjs.org/community/examples.html

    • 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.

  10. Tools - Do you know the best IDE for Angular and React?

    ​​​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.png
    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.

    See https://github.com/johnpapa/vscode-angular-​essentials.

    angular-machine-setup-2.png
    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.png
    Figure: Get to Visual Studio Code quickly from within Visual Studio - Open in Visual Studio Code extension

    More:Why do others love VS Code?​

  11. Tools - Do you know the best Packages and Libraries to use with React?

    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 https://reactjs.org/community/starter-kits.html

    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

    Reselect
    https://github.com/reduxjs/reselect

    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.
    https://zeit.co/now

    Testing

    Jest
    https://jestjs.io/

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

  12. Tools - Do you know the best UI framework for React?

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

    MATERIAL-UI https://material-ui.com 

    Bootstrap https://getbootstrap.com 

    Ant Design https://ant.design

    MATERIAL-UI

    MaterialUI is a set of React Components that Implement the [Google’s Material Design](https://material.io/guidelines/material-design/introduction.html) 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 predefined color palette. Material UI is one of the best Reactjs based UI frameworks that have the most refined implementation of Material Design. 


    MaterialUI-logo.jpg
    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 framework. It is no surprise to have the duo of React and Bootstrap. React Bootstrap is a set of React components that implementation of Bootstrap framework. React-Bootstrap currently targets Bootstrap v3 and 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 set of high-quality React components out of the box which are written in TypeScript. It supports browser, server-side rendering and Electron environments, has many components and [even a tutorial with Create-react-app]https://ant.design/docs/react/use-with-create-react-app​​

    Get started: ant-design-example


  13. Options - Do you use Typescript for your Angular and React Applications?

    ​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 http://www.typescriptlang.org/.

    You should also check out SSW TV Videos on Typescript.