These app is a simple CRUD interface for a Pet Shop. It demonstrates the use of ReactJS & ES6. The app calls a back-end api hosted on another Github project : pet-rest-api.
Important : You need to run the back-end api before launching the app.
- Clone the github repository :
git clone https://github.com/perscrew/pet-shop-reactjs.git
- Launch npm install to retrieve dependencies
npm install
You can set-up the default back-end server URL in the /src/api/config.js file. Just replace the SERVER_BASE_URL constant with the desired value :
//Configure here the server api base url
const SERVER_BASE_URL = "http://localhost:8080";
- Run npm start to launch webpack dev-server
npm start
By default, the server is running on the port 3000. You can modify these configuration in package.json & webpack.config.js files. Find "3000" and replace it with the desired port. Once npm start has finished, you can check the app on your browser http://localhost:3000
When you launch the app you arrive on the welcome page. You can consult the pet list of your shop.
You can add a pet by clicking on the menu header link "add pet".
You can edit a pet by clicking on the HomePage edit list button.
You can also delete a pet by clicking on the Homepage delete button.
To run the test units simply run npm test
npm test
The test units are organized in 3 sections :
- components (react component)
- reducers (redux reducer)
- saga (redux-saga)
To build the app for production environment run npm run build-prod.
npm run build-prod
- Add a login to secure the app, using OAUTH or JWT Token.
- Use Request Headers for each fetch call on pet api to improve security : use OAUTH or JWT Token.
- Use environment variable to configure the server api URL & PORT.
- Use environment variable to configure the webpack-dev-server PORT.
###Third party libraries used
You will find below the different third party libraries used in the project.
Feature | Packages | Benefits |
---|---|---|
React | react |
A declarative, efficient, and flexible JavaScript library for building user interfaces |
react-dom |
Serves as the entry point of the DOM-related rendering paths | |
react-hot-loader |
Tweak React components in real time when developing | |
Redux | redux |
A predictable state container for JavaScript apps |
react-redux |
React bindings for Redux | |
redux-freeze |
Redux middleware that prevents state from being mutated anywhere in the app | |
Router | react-router |
Declarative routing for React. Your app has pages now |
react-router-redux |
Simple bindings to keep react-router and redux in sync | |
Bootstrap | react-bootstrap |
Bootstrap 3 components built with React |
react-router-bootstrap |
Integration between React Router and React-Bootstrap | |
Forms | redux-form |
A Higher Order Component using react-redux to keep form state in a Redux store |
Asynchronous | redux-saga |
Asynchronous API calls made easy with Saga |
Unit tests | mocha |
Simple javascript test framework |
enzyme |
JavaScript Testing utilities for React components | |
react-addons-test-utils |
Required by enzyme. Makes it easy to test React components | |
ignore-styles |
Ignore imported style files when running in Node | |
Sass | node-sass |
Mature, stable, and powerful CSS extension language |
Webpack | webpack |
A bundler for javascript, css and others |
webpack-dev-server |
Serves the app at http://localhost:8080/ | |
extract-text-webpack-plugin |
Webpack plugin that builds the css bundle file | |
style-loader |
Webpack module that loads styles | |
css-loader |
Webpack module that loads css styles | |
sass-loader |
Webpack module that loads sass styles | |
clean-webpack-plugin |
Webpack module to remove previous build files | |
Babel | babel-core |
Compiler that helps node.js and the browser to understand the new js syntax |
babel-runtime |
Helps node.js to understand the new js syntax | |
babel-preset-es2015 |
Helps node.js to use ES2015 Javascript syntax | |
babel-preset-react |
Helps node.js to use React's JSX syntax | |
babel-preset-stage-3 |
Helps node.js to use the spread operator | |
babel-loader |
Helps webpack to compile the new javascript syntax | |
babel-polyfill |
Helps the browser to understand the new js syntax | |
whatwg-fetch |
Helps the browser to use fetch | |
Sinon | sinon |
Standalone and test framework agnostic JavaScript test spies, stubs and mocks. |