This article and its following parts presume that you are familiar with JavaScript and have a basic idea of Feathers and/or Express & React. The articles only provide a generalized idea of the process of creating a Web-App with Feathers & React and do not include any in-depth explanations of any relevant concepts. The purpose of the series of these articles is to give an overview of the bare-minimum essentials of a Web-App and how to create one with said essentials using Feathers & React. Please refer to the official documentations of Feathers & React, if you wish to learn more.

Why Feathers?

Feathers is developed as a micro-service framework but can be used as a minimalist web framework for creating real-time applications and REST APIs using JavaScript or TypeScript with minimum efforts. It is built on top of Node, Express (For RESTful transport) and Socket.io (For real-time transport). It has two core features:

• Services — an instance of a class or an object that implements your business logic.
• Hooks — pluggable middleware functions for the services.

At its core, Feathers is a set of tools and an architecture pattern that make it easy to create scalable REST APIs and real-time applications.

Feathers allows us to use its CLI to quickly scaffold new Apps or APIs. You can specify which databases you want to use, what kind of authentication config you would like and much more.

feathers generate app

Learn more about the benefits of using Feathers here.

Why React?

React is a declarative, efficient, and flexible JavaScript (w/ support for TypeScript) library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called components. It uses JSX (a syntax extension to JavaScript) to produce elements.

const name = 'Monarch Maisuriya';
const greet = <h1>Hello, {name}</h1>;

These elements group together to make a component.

React provides a component-based structure. You can re-use these components anywhere you need which makes it easier to maintain and grow your codebase plus it gives your app a consistent look and feel.

React provides swift rendering with Virtual DOM — a DOM kept in memory. By using the virtual DOM, React diffs the changes between two different states and only updates the changes in the newer state.

There are many more benefits of using React, read more about it here. Also, you can quickly scaffold a React App using create-react-app.

npx create-react-app my-app

Now that you have a brief idea about why you should use React and Feathers. Let's get started with a simple Web-App.

So, What rudimentary setup and configurations should you have in a Web-App?

• A user interface/client for handling user interactions and accessing the APIs to convey the interactions and information.
• An API for communicating the interactions to the server and transporting the information.
• A server for storing the aforementioned information and executing the business logic on/with the information and sending back results.

These are the bare-minimum requirements for creating a generic Web-App.

A couple of specifics of Feathers and React:

• Feathers-Client: The client is used (with React or any other front-end technology) for a connection to relay method calls and listen to events on the server via REST or WebSocket transports.
• React-State: The state object is where you store property values that belong to the component.

We will use the concepts mentioned above to create a generic Web-App with Feathers and React.

This is it for Part 1 of “Get started with Feathers & React”. Thanks for reading :)

Part 2: Setup a basic Web-App with Feathers and React. Add local authentication in the Feathers Server. And implement Feathers-Client in the React App.