Ready-React

Start faster a react project thanks to a simple architecture, integration of useful standard libraries and examples

How to use ?

1. yarn: install local dependencies
2. yarn dev: launch development server
3. Connect to localhost:3000
4. Explore the 2 pages and the basic features

Project architecture

• components: reusable components
• constants: shared constants across the project
• pages: views of the website
• stateful-components: components sharing a global state (based on Redux)
• utils: helpful functions, objects, ...

Examples in code

The following examples are present in the project in the src directory:

• Fetch data with SWR: pages/index
• Manage global state n°1 - Declare a new slice for the redux store: stateful-components/counterSlice
• Manage global state n°2 - Add the new slice to the store: utils/store
• Manage global state n°3 - Use new slice in a stateful-component: stateful-components/Counter
• Manage global state n°4 - Modify the values in the store from a component: stateful-components/counterModifier
• Manage global state n°5 - Use the stateful-component: pages/about
• Manage component state - React hooks: components/User

You can find these examples by searching for the keyword HOWTO

Using the project

• Change backend url: next_config
• Change SWR configuration: pages/_app
• Change footer and header: pages/_app
• Change tab title: constants/text
• Change favicon: public/favicon.ico
• Add a page: pages

Libraries

Production

The following libraries have more functionalities that what is described. What you can read is the main reason why they were chosen:

• Next: Improve website performances by providing features such as static build (cf: Next documentation)
• React: Simplify UI creation by reusing components and following a certain sematic
• Redux-toolkit: Easy management of global state across the app (Wrapper around Redux)
• SWR: Simplify request management by including revalidation, interval polling, pagination, ...
• Unfetch: Easy to use to fetch resources (used by SWR)

Development

The following libraries have more functionalities that what is described. What you can read is the main reason why they were chosen:

• Typescript: faster development with less bugs due to type safety and clarity

Related documentation

• Fetching data: swr
• Next framework: next
• React hooks: hooks
• Redux toolkit: redux

Extra information

• Source repository: https://github.com/Kamitenshi/ready-react.git

Disclaimer

1. The goal of this project is to accelerate development by simplifying the code base, not to optimize every aspect of a web app
2. A lot of included libraries potential is not used. You should dig in them before adding new ones.

Licence

Apache License 2.0

Information about this release

• Version: 0.3.0
• Date: 06/04/2020