Probably one of the biggest challenges in learning React is setting up the right tooling. There are lots of ways to do this like create-react-app and Glitch. But none of them were quite right for me. I want flexibility and control, sure, but coming from Rails I also appreciate opinions and conventions. Enter YARB! (🎶Metallica guitars play🤘)
YARB ships with all the basic tooling you need to start playing with React and React Router. It also includes application bundling courtesy of Parcel, a neat zero-configuration bundler. YARB also includes out of the box SCSS/SASS support (because SASS is incredibly useful and basically necessary, even if create-react-app disagrees).
- React, React Router
- Parcel to bundle your app
- SCSS/SASS support
- Opinionated directory structure
- Create React Component Folder support, to make component creation quick and easy
You'll need Yarn and Node to build and develop with YARB
git clone git@github.com:nickmjones/yarb.git
cd path/to/project
yarn install
yarn start- Make cool things inside
/src. There are some basic styles and routes included to give you a place to start. -
yarn buildmakes a static site ready to deploy on your webserver of choice for the world to see -
yarn deploywill build your site and attempt to push it to Netlify. Before you do that, you'll need a Netlify account
Why not just use Webpack? Mostly because it's complicated. Getting Webpack working properly can be really touchy (even in v4, which is closer to 'zeroconf' than 3 was). I'm using Parcel because it's really, truly zero configuration. In YARB, when you run
yarn start
you're really running
parcel public/index.html --open --no-cache
under the hood. This tells Parcel to start, with public/index.html as its input. This also bundles all your SCSS and JS/JSX files automagically, and runs the built-in Parcel webserver at http://localhost:1234. Neat!
Take a look at the project issues.
- Fork this repo.
- Make changes in a branch.
- Make a pull request.
- Nick Jones (I made this 👋)
- Learn more about Parcel