Superpowered Create React App.
Create React App is great, but it merely gets you started. Chances are you're still going to need to do some configuration and setup. Quickstart-React is here to help, adding these features on top of what Create React App gives you:
- Redux and React-Redux provides an enhanced state management framework and integration with React.
- Sass is the CSS extension language to supercharge your CSS development.
- Bootstrap for improved styling and mobile-first design.
- redux-promise is Redux middleware to add support for nice handling of promises. This is great when using REST APIs.
- prop-types for defining and checking React prop types.
- Storybook for UI component development.
- Jest with Enzyme all set up for easy React component testing.
- ESLint with Facebook's eslint-config-react-app for style linting.
Additionally, you are provided with a new tool to speed up development, not just the creation, of your project. You can quickly generate new components with all boilerplate completed for you. A component is made up of:
- A Redux-connected component
- An actions file (optional)
- A reducer, connected to your global state (optional)
- Tests set up for each of those generated files
** Note: Quickstart-react is not a fork of Create React App, but a fork of the react-scripts package with additional features added. To learn more about the functionality of Create React App, please read their documentation.
- Install Yarn
- Run create-react-app:
yarn create react-app my-app --scripts-version quickstart-react-scripts - Navigate to your new project and start a local server:
cd my-app && yarn start
You’ll need to have Node >= 8 on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.
It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies.
No configuration or complicated folder structures, just the files you need to build your app.
Once the installation is done, you can open your project folder:
cd my-appInside the newly created project, you can run some built-in commands:
This tool is designed to speed the creation of new redux-connected components. It creates a new component in the src/components directory. You will be prompted for a component name. Then you have the option to create actions, a reducer, a .scss file, and a Storybook story for the component. If you were to give a component name of Item and agree to all options, your file structure will look like:
my-app/
src/
components/
item/
actions.js
actions.test.js
index.js
index.scss
index.test.js
reducer.js
reducer.test.js
stories.js
Your component (in index.js) is tested and comes plugged into the generated actions, which are connected to the reducer. The reducer is connected to the global state through src/reducers.js. Each of these files is functioning and tested right from the start.
Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.
The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.
Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.
You may also run yarn coverage to see an analysis of your test coverage.
This will run ESLint on your JavaScript files. It runs the rules from Facebook's eslint-config-react-app. You can change the rules used by modifying .eslintrc.json.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
By default, it also includes a service worker so that your app loads from local cache on future visits.
Your app is ready to be deployed.