Home

Summary.

An interface based on Bootstrap 4.6 for counting items implemented with React.

React is a lightweight library for building fast and interactive user interfaces. Unlike Angular, which is a framework (or a complete solution), React is essentially a ‘view library’. It only takes care of the view or what is rendered in the DOM. It doesn’t have an opinion about other aspects of an app such as routing, calling HTTP services, etc. For those concerns, you need to use other libraries. This means you get the freedom to choose the libraries that you’re familiar with or prefer.

This project was bootstrapped with Create React App:

• yarn create react-app counter-app

Important remark: using React without nodejs is a great way to try React, but it's not suitable for production.
It slowly compiles JSX with Babel in the browser, and uses a large development build of React.

• Read this section for a production-ready setup with JSX.
• In a larger project, you can use an integrated toolchain that includes JSX instead.
• You can also use React without JSX, in which case you can remove Babel.
• Or even use a CDN to make your life incredibly easier, by avoiding messing around with the React ecosystem.

Finally, when an application is ready for the world, it must be deployed somehow.

Usage:

• To run react in the browser, then run Babel on the fly, and save the "compiled" output when the source has changed:
• npm init -y
• npm install babel-cli@6 babel-preset-react-app@3
• npx babel --watch src --out-dir . --presets react-app/prod &
• To run the version with modules and Node.js version 16:
• cd counter-app
• npm or yarn install
• npm or yarn start

Summary.

A component to display and modify a counter.

Counter raises the events that are handled by the Counters component.

Summary.

A component to hold all counters.

This is a controlled component, because it does not have any state and it simply receive data and add methods to modify the data via props.

Summary.

A Stateless Functional Component.

Instead of using a class we use a function that returns a react element.

Summary.

Mastering React by Mosh.

Loads the application: a navbar and a set of counters.

Summary.

In production, we register a service worker to serve assets from local cache.

This lets the app load faster on subsequent visits in production, and gives it offline capabilities.
However, it also means that developers (and users) will only see deployed updates on the "N+1" visit to a page,
since previously cached resources are updated in the background.

To learn more about the benefits of this model, read about PWA.
This link also includes instructions on opting out of this behavior.