Rules to Better React - 13 Rules
If you still need help, visit our React consulting page and book in a consultant.
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
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.
- Install Create-React-App
- Quick Start
npx create-react-app my-app cd my-app npm start
- 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:
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:
When working with JavaScript packages there are 2 common choices:
Figure: npm is the backbone of JavaScript development but after the left-pad disaster of 2016 lots of developers wanted more power 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) State management is complex and time-consuming. The redux pattern helps resolve this issue.
The 4 principles of the redux pattern
- The entire state of the application is represented in a single JavaScript object called a store.
- The store is acted upon using special functions called reducers.
- State is immutable and reducers are the only part of the application that can change state.
- 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.
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 PapaAngular 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.
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 .
Figure: Get to Visual Studio Code quickly from within Visual Studio - Open in Visual Studio Code extension 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.
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
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.