@reedsa/sass-template v1.0.2
Sass
Project template for create-react-app that includes Sass.
This project was bootstrapped from a template using a forked version of Create React App. For more information view the template or the forked Create React App.
You can find the most recent version of the Create React App guide here.
Getting Started
yarn start
to run the applicationyarn test
to run testsyarn lint
to run additional linter rules
Deployment
Heroku - Use the create-react-app buildpack as described here.
- Note: If using node-sass, set the config var for most reliable results:
heroku config:set NODE_MODULES_CACHE=false
.
- Note: If using node-sass, set the config var for most reliable results:
AWS (S3/CloudFront) - Follow along with this blog post.
Features
React and Redux
create-react-app - Facebook's create-react-app is used to get a production-ready React application quickly off the ground. It configures things like Webpack and Babel, so you don't have to. In order to further customize this starter kit with some additional tools, like Sass, we leverage a fork of react-scripts, called custom-react-scripts.
Redux - We use Redux to manage complex application state. In this app, you'll find an example workflow to maintain the value for a counter.
Testing
Jest - Facebook's Jest is configured out of the box with create-react-app. This comprehensive testing tool is built on top of Jasmine and will satisfy most of your unit testing needs.
Enzyme - Enzyme is pulled in to facilitate easier component testing.
Routing
React Router - The latest overhaul from React Router. Please note that this library diverges significantly from previous versions.
react-router-redux - react-router-redux also underwent an overhaul to keep up with React Router, and has been merged into the React Router codebase.
Styling
Sass - Sass is used as the CSS Preprocessor within the unejected create-react-app. The recommended package is node-sass-chokidar
react-md - A material design (md) component library for React. View the docs here.
material-design-icons - Icons that can be used within react-md components. Available icons and docs are listed here.
Tooling
Prettier - Prettier is wonderful magic that formats your JavaScript code for you. It is configured (using Husky) to format JavaScript code in a precommit hook. You may also choose to configure Prettier with your editor of choice.
Hot Module Replacement (HMR) - Hot Module Replacement updates the application on code change, without refreshing. Redux state is maintained.
Redux DevTools - Chrome extension - The app is configured to allow this Chrome extension to display dispatched actions and state diffs.