React Playground is a project boilerplate I created for small React projects and practicing test-driven development with Jest and React Testing Library. It's also well-suited for exploring React features in a realistic environment.
- HTML5 🔥
- CSS3 via SCSS 🔥
- ES6+ via Babel 🔥
- Module Bundling via Webpack 🔥
- Live Reload via Webpack Dev Server 🔥
- Formatting via Prettier 🔥
- Linting via ESLint 🔥
- Type Checking via Flow 🔥
- Unit Testing via Jest and React Testing Library 🔥
- A small starter project named React Voting App
⚠️ Warning: The project uses husky and lint-staged to prevent you from committing code that doesn't pass validation (i.e. formatting, linting, and type checking).
If you want to use React Playground for a new project, then click the green Use this template button above and follow the instructions to create a new repo
based on this one.
If you just want to review the code, then follow the steps below.
git clone git@github.com:georgebullock/react-playground.gityarn installyarn start
⚠️ Warning: The project requires node v12.6.0.
💡 Tip: If you're using nvm, you can run
nvm useto automatically switch to v12.6.0.
💡 Tip: Check out the
scriptsobject (inside thepackage.json) for additional commands.
I was motivated to do this project for three reasons:
- I needed a customized starting point for the type of small, learning, projects that are on my personal development roadmap.
- I needed an environment where I can practice TDD with React, Jest, and React Testing Library.
- I wanted to move away from repl.it and Codpen for playing with code. With React Playground, I can quickly spin up a familiar development environment and try things out without losing access to important features (e.g. Chrome debugger).
This project is semi-active. I don't plan to add any additional features, but I will keep the project's dependencies up-to-date.
No additional features planned.
None that I'm aware of. If you find something, please create an issue or send me a pull request.