Rules to Better React
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.
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.
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.
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.
Here are the best collection of resources for Angular.:
- The official documentation - React.org
- React Enlightenment guide
- 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.
- The Road to learn React - Beautifully written and approachable guide to learning React and ES6.
- Pure React - Well-written introduction for true beginners.
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
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 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:
State management is complex and time-consuming.
The redux pattern helps resolve this issue.
The 4 principles of the redux pattern:
- The store is acted upon using special functions called reducers [ https://redux.js.org/docs/basics/Reducers.html].
- State is immutable and reducers are the only part of the application that can change state.
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 completeredux-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” [https://en.wiktionary.org/wiki/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
- 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.
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 .
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.
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
Utility Libraries for React
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. https://vercel.com
Testing suite that provides a click-and-check API for automated in-browser smoke tests.
The main contenders for the best UI framework for React are:
Ant Design https://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.
Get started: react-material-ui-official-docs-example
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 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!
You can start learning more about typescript at http://www.typescriptlang.org/.
You should also check out SSW TV Videos on Typescript.