https://github.com/catamphetamine/react-pages-basic-example
`react-pages` basic example
https://github.com/catamphetamine/react-pages-basic-example
Last synced: 3 months ago
JSON representation
`react-pages` basic example
- Host: GitHub
- URL: https://github.com/catamphetamine/react-pages-basic-example
- Owner: catamphetamine
- License: mit
- Created: 2019-09-24T17:25:04.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-02T17:43:26.000Z (about 2 years ago)
- Last Synced: 2025-01-11T01:48:48.382Z (5 months ago)
- Language: JavaScript
- Size: 510 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A basic example of using [`react-pages`](https://github.com/catamphetamine/react-pages).
## Development
```sh
npm install
npm start
```
Then go to [`http://localhost:1234`](http://localhost:1234).
## Production
See the `dist` directory for the output files. The output files can be uploaded to the cloud (e.g. Amazon S3) and hosted for a very low price as a "static" website by mapping any URL to `index.html`.
## Explanation
This sample project illustrates the use of [`react-pages`](https://github.com/catamphetamine/react-pages) library for building a React/Redux application.
[Parceljs](https://parceljs.org/) is used for bundling the app because it's much simpler for beginners than Webpack.
The "Basic" page shows the "conventional" (old-fashioned) way of writing React/Redux applications.
The "Advanced" page shows the more convenient way of writing React/Redux applications.
The counters on both pages operate identically the only difference being that the counter on the "Basic" page is implemented the "conventional" (old-fashioned) way and the counter on the "Advanced" page is implemented using the ["redux module"](https://github.com/catamphetamine/react-pages#redux-module) utility from `react-pages` library.
`react-pages` library packs a lot of utilities not showcased here for sake of simplicity, such as [`@preload()`ing pages](https://github.com/catamphetamine/react-pages#preloading-pages), [making `http` requests](https://github.com/catamphetamine/react-pages#http-utility), [setting `` tags](https://github.com/catamphetamine/react-pages#setting-title-and--tags), [programmatic navigation](https://github.com/catamphetamine/react-pages#changing-current-location), and more...