React Donation Checkout Component
This repository implements a donation checkout component using the React framework (16.8 hooks) and Material-UI React components for Material Design.
Stack
- React Web Framework
- Create React App transpiled and bundled by Webpack
- JSS stylesheet
- Nginx HTTP proxy or as a Wordpress Plugin
Features
- plugable in a HTML page as a component
- plugable in Wordpress as a shortcode block
- implement WAI-ARIA for accessibility
reCAPTCHA Protection
-
hCaptcha hCaptcha is free to use for publishers of any size.
-
https://blog.cloudflare.com/moving-from-recaptcha-to-hcaptcha
Alternative Implementations
- Framasoft which uses Vue.js and BootstrapVue.
Discussion on the implementation
Actually popular frameworks are, sorted by trends:
- React backed by Facebook and the framework used by Wordpress
- Angular backed by Google and the successor of AngularJS
- Vue.js a popular framework created by Evan You, used by Alibaba
- PReact a lightweight counterpart nearly compatible with the React API (4kB)
- Riot a 7kB framework
- Polymer
Issues
- duplicated code to to enforce that at least one toggle button must be active
Running and Building the Application
Application is generated by the tool Create React App that uses
Webpack internally. See package.json for settings and
node_modules/react-scripts/config/webpack.config.js.
Note: eslint-plugin-react-hooks is included by default in Create React App.
- Install Node.js and Yarn package manager
- Install required packages in node_modules (it requires 425 MB of free space disk)
yarn install or npm install - Build and serve the application for development
yarn start or npm start
Note: to customise the browser, uses e.g. BROWSER="google-chrome" yarn start
- Go to http://localtest.me:3000/checkout
- Build the application for production
yarn build or npm run build
Storybook
Start Storybook using yarn storybook
Documentation using React Styleguidist
Start a style guide dev server using npx styleguidist server