Idea/memo board where you can create, update, delete ideas.
Table of Contents (click to expand)
Dependencies:
- ReactJS - The state based framework for your Views
- React Router v4 - For routing to different paths
- Redux - Redux manages your state
- Babel - The compiler to compile your JS files with es6, es7, JSX syntax to regular javascript
- Webpack - The module binder which takes all your JS files from different directories and compiles them into a single app.bundle.js (you can change the filename of course) so you can include it in a HTML page
- ExpressJS - The node framework to serve your views to the world when they hit the server at example.com or example.com/awesome.html
Testing:
- Mocha - Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser
- Enzyme - Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components
- Sinon - Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework
First cd
into the directory and run
npm install
First cd
into the directory and run
npm test
To develop your own react application, you can take advantage of Hot Reload and Webpack Dev Server. To develop app with hot reload:
npm run dev
Now you can access your react application on http://localhost:8080
To make a production build of your project, run the following commands
npm run build
This will create create two files: index.js
in server/public/js
and server.js
in server/bin
.
server.js
will be used for serving the application on port 3000 and index.js
is the actual react app itself.
Finally run
npm start
The you will be able to access this app from http://localhost:3000.
To get a distributable tarball of your application, run this command
npm pack
Remember that you have to run npm run build
before doing this. This will create a tar.gz file in your root folder. The contents in this file is deployable. All you need to do is copy the contents inside package folder inside this tar.gz file to your server.
Below is a short list of various improvements broken up into features, implementation and development categories.
- Add graph ql to integrate with backend
- Add integration tests with backend
- Add service worker for improved offline experience
- Add Reselect for memoise redux app store
- Add jest.js for component snapshot testing
- Add backstop.js (or whatever) for visual regression testing
- Add storybook.js for improved component development and testing
- Add istanbul.js for test code coverage
- Add seo for users and crawlers
- Add accessibility for screen reader support
- Add cdn scripts for popular dependencies
- Add styled add and sort by controls for better ui/ux
- Add viewable create date field for better ux