This is a playground project to experiment with the following tech stack:
- Rails 5.0
- ReactJS
- Webpack 2+ (via Rails' webpacker gem)
- Yarn - node module dependency management
- Jest
- es2015
- webpacker - https://github.com/rails/webpacker
- webpacker-react - https://github.com/renchap/webpacker-react
This assumes you already have a compatible version of Ruby and NodeJS installed. Ruby 2.3.1 and NodeJS 7.6.0 are what I used, but feel free to use any other versions. If they don't work, I recommend using those versions.
-
Install the
bundler
ruby gem, if you don't have it already for your given Ruby version:gem install bundler
-
Install all ruby gems:
bundle install
-
Install the yarn NodeJS package management system, using brew:
brew install yarn
-
Install all node_modules using yarn:
bin/yarn
-
Start the rails server and webpack dev server
foreman start
-
Navigate to: http://localhost:3000. You should see a page rendered that has a few sample react components on it.
All application javascript is kept in app/javascript
. This is the default location as setup by the webpacker gem.
Webpack entrypoints
are defined in app/javascript/packs
. See packs/application.js
for an example of how to define a
react component for use in a view through the <%= react_component 'mycomponent' %>
view helper.
React components are defined in app/javascript/components
.
When you make changes to files managed by webpack, the webpack dev server will automatically reload the changed components. Neat!
Redux is a handy JS library that you can use to manage application state. The main use that it's employed for in this app is to manage state that's shared between React components.
There's an example of a redux state store in app/javascript/stores/counterStore.js
. This store is used to manage
state that's shared between app/javascript/components/counter.jsx
and app/javascript/components/counterDisplay.jsx
.
See the Redux docs for more information.
Do you have a fancy node module that you'd like to reference in your application code? It's easy to add it, like so:
bin/yarn add lodash
This will add the module and update the vendor/package.json
file, so that others on your team will be able to easily
pick up the module.
Reference lodash in your JS code like so:
import _ from "lodash"
;
And you can get at lodash functions by writing JS like:
_.map([1,2], this.print)
Notice that node modules live in the vendor/node_modules
directory, rather than at the project root. This is the
standard set forth by the webpacker gem. It differs from what you might see in a typical NodeJS project setup.
Tests for react components are written in Jest.
Tests live in spec/javascript
.
Run the tests by executing bin/yarn test
.