Setting up a new React app with correct dependencies and tools can be a pain, and sometimes it seems like getting things is the hardest part! Anything that can can make this simpler is a godsend and thats where Brunch comes in. Brunch is a tool that can create customised skeletons apps that use the tech you want, with things configured and ready to go straight away. You probably already have Node installed, you can check by running on the command line
If you don’t have Node then you can install it using NVM in the next step.
Install Node (If you don’t have it already)
NVM (Node Version Manager) is the best way to install Node. Its a handy tool that you can use to install different versions of Node along with NPM (Node Package Manager). Follow the install directions for you platform of choice on https://github.com/creationix/nvm
When you are up and running I’d suggest installing the latest LTS version of Node. This is currently 8.10.0 but there may be a newer version when you are doing this, you can check the latest LTS version on https://nodejs.org/en/ and to install that using NVM run
nvm install 8.10.0
If you have Node installed then use NPM to install Brunch (-g installs the package globally and can be accessed anywhere)
npm install -g brunch
Brunch Skeletons are basically application boilerplate that give you an excellent starting point for the application you want to develop. Depending on which technologies you wish to use there is probably a Skeleton ready for you to use. You can search the available list of Skeletons at http://brunch.io/skeletons and find the one that best suits your needs. Im going to go with the React skeleton. It uses Babel, ES6 and React. Install using the following commands.
# Navigate to wherever you are going to do your work # and create a new directory for the app mkdir simpleApp cd simpleApp # Run the brunch command to install the skeleton brunch new --skeleton brunch/with-react
You’ll now have the skeleton app ready for development. To start the application run
brunch watch --server
then navigate to http://localhost:3333 in the browser and you should see something like this if everything has been successful.
Open the directory you installed the skeleton in using your IDE. I use Sublime 3. The directory structure and App.jsx file should look like this.
Make some changes to App.jsx and those changes will be reflected in the browser straight away.