Rules

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

• React - A JavaScript library for building user interfaces
• What Is ReactJS and Why Should We Use It?

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.

Here are the best collection of resources for Angular.:

Free Resources

• The official documentation - React.org
• React Enlightenment guide
• https://github.com/enaqx/awesome-react
• https://github.com/markerikson/react-redux-links

Training Courses

• Codecademy: React 101 - Codecademy's introductory course for React.
• Egghead.io: Start Learning React - This series will explore the basic fundamentals of React to get you started.
• React Crash Course 2018 - A beginner-friendly crash course through the most important React topics.

Books

• The Road to learn React - Beautifully written and approachable guide to learning React and ES6.
• Pure React - Well-written introduction for true beginners.
• Learning React: Functional Web Development with React and Redux - Covers React and Redux. For developers already comfortable with JavaScript.

Free Events

• Your local JavaScript or React User Group - https://www.meetup.com/

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.

1. Install Create-React-App
2. Quick Start

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

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

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:

• https://webpack.js.org/concepts
• https://rules.ssw.com.au/the-best-build-tool

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:

• https://facebook.github.io/create-react-app/docs/production-build

When working with JavaScript packages there are 2 common choices:

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

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"

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.

When developing Angular or React, there are lots of choices for code editors. The best experience by far is to use Visual Studio Code.

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.

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 .

More: Why do others love VS Code?

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

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://vercel.com

Testing

Jest https://jestjs.io/

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

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.

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

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

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.