From d2164a8bc443f071923bf2f2f26a8799fcc82be2 Mon Sep 17 00:00:00 2001 From: Alexey Karasev Date: Tue, 19 Apr 2016 10:02:16 +0300 Subject: [PATCH 1/6] bugfix: execJS timeout --- lib/react_on_rails/server_rendering_pool.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/react_on_rails/server_rendering_pool.rb b/lib/react_on_rails/server_rendering_pool.rb index 00ce553f5..89b544111 100644 --- a/lib/react_on_rails/server_rendering_pool.rb +++ b/lib/react_on_rails/server_rendering_pool.rb @@ -7,7 +7,7 @@ module ReactOnRails class ServerRenderingPool def self.reset_pool options = { size: ReactOnRails.configuration.server_renderer_pool_size, - timeout: ReactOnRails.configuration.server_renderer_pool_size } + timeout: ReactOnRails.configuration.server_renderer_timeout } @js_context_pool = ConnectionPool.new(options) { create_js_context } end From 73b5bdf2244fa6b12c9dbe64c3536c61d276d0a0 Mon Sep 17 00:00:00 2001 From: jbhatab Date: Sat, 23 Apr 2016 17:25:32 -0500 Subject: [PATCH 2/6] added babel runtime to root package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 455bd39c4..a0415bd3d 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", + "babel-runtime": "^6.6.1", "babel-tape-runner": "^2.0.1", "babel-types": "^6.7.2", "babelify": "^7.2.0", From 3f944438f42bbdc412034bed3e554a12f75f142a Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Tue, 5 Apr 2016 13:37:53 -1000 Subject: [PATCH 3/6] Moved api and generator docs to separate folders go keep readme cleaner. --- README.md | 185 +----------------- docs/additional-reading/webpack-dev-server.md | 16 ++ docs/api/javascript-api.md | 37 ++++ docs/api/ruby-api-hot-reload-view-helpers.md | 41 ++++ docs/api/ruby-api.md | 3 + docs/basics/generator.md | 50 +++++ .../installation-overview.md | 0 docs/basics/migrating-from-react-rails.md | 17 ++ .../linters.md | 0 9 files changed, 173 insertions(+), 176 deletions(-) create mode 100644 docs/additional-reading/webpack-dev-server.md create mode 100644 docs/api/javascript-api.md create mode 100644 docs/api/ruby-api-hot-reload-view-helpers.md create mode 100644 docs/api/ruby-api.md create mode 100644 docs/basics/generator.md rename docs/{additional-reading => basics}/installation-overview.md (100%) create mode 100644 docs/basics/migrating-from-react-rails.md rename docs/{coding-style => contributor-info}/linters.md (100%) diff --git a/README.md b/README.md index d5326b598..34a2ab6c0 100644 --- a/README.md +++ b/README.md @@ -4,12 +4,15 @@ * 2016-04-08: 5.2.0 Released! Support for React 15.0 and upates to the Generator. See the [CHANGELOG.md](./CHANGELOG.md) for details. * [New slides on React on Rails](http://www.slideshare.net/justingordon/react-on-rails-v4032). * 2016-02-28: We added a [Projects page](./PROJECTS.md) and a [Kudos page](./KUDOS.md). Please edit the page your project or [email us](mailto:contact@shakacode.com) and we'll add you. We also love stars as it helps us attract new users and contributors. -* *See [NEWS.md](NEWS.md) for the full news history.* +* *See [NEWS.md](NEWS.md) for more notes over time.* # NOTES * React on Rails does not yet have *generator* support for building new apps that use CSS modules and hot reloading via the Rails server as is demonstrated in the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). *We do support this, but we don't generate the code.* If you did generate a fresh app from react_on_rails and want to move to CSS Modules, then see [PR 175: Babel 6 / CSS Modules / Rails hot reloading](https://github.com/shakacode/react-webpack-rails-tutorial/pull/175). Note, while there are probably fixes after this PR was accepted, this has the majority of the changes. See [the tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/#news) for more information. For more information on how to setup hot reloading in a Rails app, see [Hot Reloading of Assets For Rails Development](docs/additional-reading/hot-reloading-rails-development.md). * [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/Github based coaching for "React on Rails". [Click here](http://www.shakacode.com/work/index.html) for more information. -* Be sure to read our article [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724). +* Be sure to read our article [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724) and see [slides on React on Rails](http://www.slideshare.net/justingordon/react-on-rails-v4032). +* [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial) along with the live example at [www.reactrails.com](http://www.reactrails.com). +* [Projects](PROJECTS.md) using and [KUDOS](./KUDOS.md) for React on Rails. Please submit yours! +* On Twitter, follow [@railsonmaui](https://twitter.com/railsonmaui) and [@shakacode](https://twitter.com/shakacode) for updates on releases. # React on Rails @@ -17,13 +20,6 @@ React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. React v0.14.x is supported, with server rendering. [Redux](https://github.com/reactjs/redux) and [React-Router](https://github.com/reactjs/react-redux) are supported as well, also with server rendering. See the Rails on Maui [blog post](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/) that started it all! -Be sure to see: -* [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032) -* [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724) -* [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial) along with the live example at [www.reactrails.com](http://www.reactrails.com). -* [Projects](PROJECTS.md) using and [KUDOS](./KUDOS.md) for React on Rails. Please submit yours! -* On Twitter, follow [@railsonmaui](https://twitter.com/railsonmaui) and [@shakacode](https://twitter.com/shakacode) for updates on releases. - ## Including your React Component in your Rails Views Please see [Getting Started](#getting-started) for how to set up your Rails project for React on Rails to understand how `react_on_rails` can see your ReactComponents. @@ -75,10 +71,6 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj - [ReactOnRails View Helpers API](#reactonrails-view-helpers-api) - [ReactOnRails JavaScript API](#reactonrails-javascript-api) - [React-Router](#react-router) -+ [Generator](#generator) - - [Understanding the Organization of the Generated Client Code](#understanding-the-organization-of-the-generated-client-code) - - [Redux](#redux) - - [Multiple React Components on a Page with One Store](#multiple-react-components-on-a-page-with-one-store) + [Adding Additional Routes for the Dev Server](#adding-additional-routes-for-the-dev-server) + [Migrate From react-rails](#migrate-from-react-rails) + [Additional Reading](#additional-reading) @@ -356,136 +348,6 @@ Why would you create a function that returns a React component? For example, you This is a helper method that takes any JavaScript expression and returns the output from evaluating it. If you have more than one line that needs to be executed, wrap it in an IIFE. JS exceptions will be caught and console messages handled properly. -## ReactOnRails JavaScript API -The best source of docs is the main [ReactOnRails.js](node_package/src/ReactOnRails.js) file. Here's a quick summary. No guarantees that this won't be outdated! - -```js - /** - * Main entry point to using the react-on-rails npm package. This is how Rails will be able to - * find you components for rendering. - * @param components (key is component name, value is component) - */ - register(components) - - /** - * Allows registration of store generators to be used by multiple react components on one Rails - * view. store generators are functions that take one arg, props, and return a store. Note that - * the setStore API is different in tha it's the actual store hydrated with props. - * @param stores (key is store name, value is the store generator) - */ - registerStore(stores) - - /** - * Allows retrieval of the store by name. This store will be hydrated by any Rails form props. - * Pass optional param throwIfMissing = false if you want to use this call to get back null if the - * store with name is not registered. - * @param name - * @param throwIfMissing Defaults to true. Set to false to have this call return undefined if - * there is no store with the given name. - * @returns Redux Store, possibly hydrated - */ - getStore(name, throwIfMissing = true ) - - /** - * Set options for ReactOnRails, typically before you call ReactOnRails.register - * Available Options: - * `traceTurbolinks: true|false Gives you debugging messages on Turbolinks events - */ - setOptions(options) -``` - -## Hot Reloading View Helpers -The `env_javascript_include_tag` and `env_stylesheet_link_tag` support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example. - -The key options are `static` and `hot` which specify what you want for static vs. hot. Both of these params are optional, and support either a single value, or an array. - -static vs. hot is picked based on whether `ENV["REACT_ON_RAILS_ENV"] == "HOT"` - -```erb - <%= env_stylesheet_link_tag(static: 'application_static', - hot: 'application_non_webpack', - media: 'all', - 'data-turbolinks-track' => true) %> - - - - <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js', - 'http://localhost:3500/app-bundle.js']) %> - - - <%= env_javascript_include_tag(static: 'application_static', - hot: 'application_non_webpack', - 'data-turbolinks-track' => true) %> -``` - -See application.html.erb for usage example and [application.html.erb](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app%2Fviews%2Flayouts%2Fapplication.html.erb) - -**env_javascript_include_tag(args = {})** - -Helper to set CSS assets depending on if we want static or "hot", which means from the Webpack dev server. - -In this example, application_non_webpack is simply a CSS asset pipeline file which includes styles not placed in the webpack build. - -We don't need styles from the webpack build, as those will come via the JavaScript include tags. - -The key options are `static` and `hot` which specify what you want for static vs. hot. Both of -these params are optional, and support either a single value, or an array. - -```erb - <%= env_stylesheet_link_tag(static: 'application_static', - hot: 'application_non_webpack', - media: 'all', - 'data-turbolinks-track' => true) %> -``` - -**env_stylesheet_link_tag(args = {})** - -## Generator -The `react_on_rails:install` generator combined with the example pull requests of generator runs will get you up and running efficiently. There's a fair bit of setup with integrating Webpack with Rails. Defaults for options are such that the default is for the flag to be off. For example, the default for `-R` is that `redux` is off, and the default of `-b` is that `skip-bootstrap` is off. - -Run `rails generate react_on_rails:install --help` for descriptions of all available options: - -``` -Usage: - rails generate react_on_rails:install [options] - -Options: - -R, [--redux], [--no-redux] # Install Redux gems and Redux version of Hello World Example - -S, [--server-rendering], [--no-server-rendering] # Add necessary files and configurations for server-side rendering - -Runtime options: - -f, [--force] # Overwrite files that already exist - -p, [--pretend], [--no-pretend] # Run but do not make any changes - -q, [--quiet], [--no-quiet] # Suppress status output - -s, [--skip], [--no-skip] # Skip files that already exist - -Description: - Create react on rails files for install generator. -``` - -For a clear example of what each generator option will do, see our generator results repo: [Generator Results](https://github.com/shakacode/react_on_rails-generator-results/blob/master/README.md). Each pull request shows a git "diff" that highlights the changes that the generator has made. Another good option is to create a simple test app per the [Tutorial](docs/tutorial.md). - -### Understanding the Organization of the Generated Client Code -The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of `client/app/bundles`. This encourages for modularity of *domains*. - -Inside of the generated "HelloWorld" domain you will find the following folders: - -+ `startup`: two types of files, one that return a container component and implement any code that differs between client and server code (if using server-rendering), and a `clientRegistration` file that exposes the aforementioned files (as well as a `serverRegistration` file if using server rendering). These registration files are what webpack is using as an entry point. -+ `containers`: "smart components" (components that have functionality and logic that is passed to child "dumb components"). -+ `components`: includes "dumb components", or components that simply render their properties and call functions given to them as properties by a parent component. Ultimately, at least one of these dumb components will have a parent container component. - -You may also notice the `app/lib` folder. This is for any code that is common between bundles and therefore needs to be shared (for example, middleware). - -### Redux -If you have used the `--redux` generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux. - -Note the organizational paradigm of "bundles". These are like application domains and are used for grouping your code into webpack bundles, in case you decide to create different bundles for deployment. This is also useful for separating out logical parts of your application. The concept is that each bundle will have it's own Redux store. If you have code that you want to reuse across bundles, including components and reducers, place them under `/client/app/lib`. - -### Using Images and Fonts -The generator has amended the folders created in `client/assets/` to Rails's asset path. We recommend that if you have any existing assets that you want to use with your client code, you should move them to these folders and use webpack as normal. This allows webpack's development server to have access to your assets, as it will not be able to see any assets in the default Rails directories which are above the `/client` directory. - -Alternatively, if you have many existing assets and don't wish to move them, you could consider creating symlinks from client/assets that point to your Rails assets folders inside of `app/assets/`. The assets there will then be visible to both Rails and webpack. - ## Multiple React Components on a Page with One Store You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. In addition, you may want this to work with Turbolinks to minimize reloading the JavaScript. A good example of this would be something like an a notifications counter in a header. As each notifications is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist. @@ -548,40 +410,10 @@ Components are created as [stateless function(al) components](https://facebook.g 1. [React on Rails docs for react-router](docs/additional-reading/react-router.md) 1. Examples in [spec/dummy/app/views/react_router](spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](spec/dummy/client/app/startup/ServerRouterApp.jsx). -## Developing with the Webpack Dev Server -One of the benefits of using webpack is access to [webpack's dev server](https://webpack.github.io/docs/webpack-dev-server.html) and its [hot module replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) functionality. - -The webpack dev server with HMR will apply changes from the code (or styles!) to the browser as soon as you save whatever file you're working on. You won't need to reload the page, and your data will still be there. Start foreman as normal (it boots up the Rails server *and* the webpack HMR dev server at the same time). - - ```bash - foreman start -f Procfile.dev - ``` - -Open your browser to [localhost:3000](http://localhost:3000). Whenever you make changes to your JavaScript code in the `client` folder, they will automatically show up in the browser. Hot module replacement is already enabled by default. - -Note that **React-related error messages are typically significantly more helpful when encountered in the dev server** than the Rails server as they do not include noise added by the React on Rails gem. - -### Adding Additional Routes for the Dev Server -As you add more routes to your front-end application, you will need to make the corresponding API for the dev server in `client/server.js`. See our example `server.js` from our [tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fserver-express.js). - -## Migrate From react-rails -If you are using [react-rails](https://github.com/reactjs/react-rails) in your project, it is pretty simple to migrate to [react_on_rails](https://github.com/shakacode/react_on_rails). - -- Remove the 'react-rails' gem from your Gemfile. - -- Remove the generated lines for react-rails in your application.js file. - -``` -//= require react -//= require react_ujs -//= require components -``` - -- Follow our getting started guide: https://github.com/shakacode/react_on_rails#getting-started. - -Note: If you have components from react-rails you want to use, then you will need to port them into react_on_rails which uses webpack instead of the asset pipeline. - ## Additional Reading ++ [JavaScript API](docs/api/javascript-api.md) ++ [Ruby API](docs/api/ruby-api.md) ++ [Setting up Hot Reloading during Rails Development, API docs](docs/api/ruby-api-hot-reload-view-helpers.md) + [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032) + [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724) + [Installation Overview](docs/additional-reading/installation-overview.md) @@ -601,6 +433,7 @@ Note: If you have components from react-rails you want to use, then you will nee + [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html) + [Changelog](CHANGELOG.md) + [Projects](PROJECTS.md) ++ [Developing with the Webpack Dev Server](docs/additional-reading/webpack-dev-server) ## Demos + [www.reactrails.com](http://www.reactrails.com) with the source at [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). diff --git a/docs/additional-reading/webpack-dev-server.md b/docs/additional-reading/webpack-dev-server.md new file mode 100644 index 000000000..e45ae1ef0 --- /dev/null +++ b/docs/additional-reading/webpack-dev-server.md @@ -0,0 +1,16 @@ +## Developing with the Webpack Dev Server +One of the benefits of using webpack is access to [webpack's dev server](https://webpack.github.io/docs/webpack-dev-server.html) and its [hot module replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) functionality. + +The webpack dev server with HMR will apply changes from the code (or styles!) to the browser as soon as you save whatever file you're working on. You won't need to reload the page, and your data will still be there. Start foreman as normal (it boots up the Rails server *and* the webpack HMR dev server at the same time). + + ```bash + foreman start -f Procfile.dev + ``` + +Open your browser to [localhost:3000](http://localhost:3000). Whenever you make changes to your JavaScript code in the `client` folder, they will automatically show up in the browser. Hot module replacement is already enabled by default. + +Note that **React-related error messages are possibly more helpful when encountered in the dev server** than the Rails server as they do not include noise added by the React on Rails gem. + +### Adding Additional Routes for the Dev Server +As you add more routes to your front-end application, you will need to make the corresponding API for the dev server in `client/server.js`. See our example `server.js` from our [tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fserver-express.js). + diff --git a/docs/api/javascript-api.md b/docs/api/javascript-api.md new file mode 100644 index 000000000..522c19b33 --- /dev/null +++ b/docs/api/javascript-api.md @@ -0,0 +1,37 @@ +# ReactOnRails JavaScript API +The best source of docs is the main [ReactOnRails.js](node_package/src/ReactOnRails.js) file. Here's a quick summary. No guarantees that this won't be outdated! + +```js + /** + * Main entry point to using the react-on-rails npm package. This is how Rails will be able to + * find you components for rendering. + * @param components (key is component name, value is component) + */ + register(components) + + /** + * Allows registration of store generators to be used by multiple react components on one Rails + * view. store generators are functions that take one arg, props, and return a store. Note that + * the setStore API is different in tha it's the actual store hydrated with props. + * @param stores (key is store name, value is the store generator) + */ + registerStore(stores) + + /** + * Allows retrieval of the store by name. This store will be hydrated by any Rails form props. + * Pass optional param throwIfMissing = false if you want to use this call to get back null if the + * store with name is not registered. + * @param name + * @param throwIfMissing Defaults to true. Set to false to have this call return undefined if + * there is no store with the given name. + * @returns Redux Store, possibly hydrated + */ + getStore(name, throwIfMissing = true ) + + /** + * Set options for ReactOnRails, typically before you call ReactOnRails.register + * Available Options: + * `traceTurbolinks: true|false Gives you debugging messages on Turbolinks events + */ + setOptions(options) +``` diff --git a/docs/api/ruby-api-hot-reload-view-helpers.md b/docs/api/ruby-api-hot-reload-view-helpers.md new file mode 100644 index 000000000..9f0940530 --- /dev/null +++ b/docs/api/ruby-api-hot-reload-view-helpers.md @@ -0,0 +1,41 @@ +## Hot Reloading View Helpers +The `env_javascript_include_tag` and `env_stylesheet_link_tag` support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example. + +The key options are `static` and `hot` which specify what you want for static vs. hot. Both of these params are optional, and support either a single value, or an array. + +static vs. hot is picked based on whether `ENV["REACT_ON_RAILS_ENV"] == "HOT"` + +```erb + <%= env_stylesheet_link_tag(static: 'application_static', + hot: 'application_non_webpack', + media: 'all', + 'data-turbolinks-track' => true) %> + + + + <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js', + 'http://localhost:3500/app-bundle.js']) %> + + + <%= env_javascript_include_tag(static: 'application_static', + hot: 'application_non_webpack', + 'data-turbolinks-track' => true) %> +``` + +See application.html.erb for usage example and [application.html.erb](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app%2Fviews%2Flayouts%2Fapplication.html.erb) + +Helper to set CSS and JS assets depending on if we want static or "hot", which means from the Webpack dev server. + +In this example, `application_non_webpack` is simply a CSS asset pipeline file which includes styles not placed in the webpack build. The same can be said for `application_non_webpack` for JS files. Note, the suffix is not used in the helper calls. + +We don't need styles from the webpack build, as those will come via the JavaScript include tags. + +The key options are `static` and `hot` which specify what you want for static vs. hot. Both of +these params are optional, and support either a single value, or an array. + +```erb + <%= env_stylesheet_link_tag(static: 'application_static', + hot: 'application_non_webpack', + media: 'all', + 'data-turbolinks-track' => true) %> +``` diff --git a/docs/api/ruby-api.md b/docs/api/ruby-api.md new file mode 100644 index 000000000..92deccb45 --- /dev/null +++ b/docs/api/ruby-api.md @@ -0,0 +1,3 @@ +PENDING: + +Should we document the view helpers here concisely? diff --git a/docs/basics/generator.md b/docs/basics/generator.md new file mode 100644 index 000000000..80961ae14 --- /dev/null +++ b/docs/basics/generator.md @@ -0,0 +1,50 @@ +- [Generator](#generator) + - [Understanding the Organization of the Generated Client Code](#understanding-the-organization-of-the-generated-client-code) + - [Redux](#redux) + - [Multiple React Components on a Page with One Store](#multiple-react-components-on-a-page-with-one-store) + - [Using Images and Fonts](#using-images-and-fonts) + +The `react_on_rails:install` generator combined with the example pull requests of generator runs will get you up and running efficiently. There's a fair bit of setup with integrating Webpack with Rails. Defaults for options are such that the default is for the flag to be off. For example, the default for `-R` is that `redux` is off, and the default of `-b` is that `skip-bootstrap` is off. + +Run `rails generate react_on_rails:install --help` for descriptions of all available options: + +``` +Usage: + rails generate react_on_rails:install [options] + +Options: + -R, [--redux], [--no-redux] # Install Redux gems and Redux version of Hello World Example + -S, [--server-rendering], [--no-server-rendering] # Add necessary files and configurations for server-side rendering + +Runtime options: + -f, [--force] # Overwrite files that already exist + -p, [--pretend], [--no-pretend] # Run but do not make any changes + -q, [--quiet], [--no-quiet] # Suppress status output + -s, [--skip], [--no-skip] # Skip files that already exist + +Description: + Create react on rails files for install generator. +``` + +For a clear example of what each generator option will do, see our generator results repo: [Generator Results](https://github.com/shakacode/react_on_rails-generator-results/blob/master/README.md). Each pull request shows a git "diff" that highlights the changes that the generator has made. Another good option is to create a simple test app per the [Tutorial](docs/tutorial.md). + +### Understanding the Organization of the Generated Client Code +The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of `client/app/bundles`. This encourages for modularity of *domains*. + +Inside of the generated "HelloWorld" domain you will find the following folders: + ++ `startup`: two types of files, one that return a container component and implement any code that differs between client and server code (if using server-rendering), and a `clientRegistration` file that exposes the aforementioned files (as well as a `serverRegistration` file if using server rendering). These registration files are what webpack is using as an entry point. ++ `containers`: "smart components" (components that have functionality and logic that is passed to child "dumb components"). ++ `components`: includes "dumb components", or components that simply render their properties and call functions given to them as properties by a parent component. Ultimately, at least one of these dumb components will have a parent container component. + +You may also notice the `app/lib` folder. This is for any code that is common between bundles and therefore needs to be shared (for example, middleware). + +### Redux +If you have used the `--redux` generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux. + +Note the organizational paradigm of "bundles". These are like application domains and are used for grouping your code into webpack bundles, in case you decide to create different bundles for deployment. This is also useful for separating out logical parts of your application. The concept is that each bundle will have it's own Redux store. If you have code that you want to reuse across bundles, including components and reducers, place them under `/client/app/lib`. + +### Using Images and Fonts +The generator has amended the folders created in `client/assets/` to Rails's asset path. We recommend that if you have any existing assets that you want to use with your client code, you should move them to these folders and use webpack as normal. This allows webpack's development server to have access to your assets, as it will not be able to see any assets in the default Rails directories which are above the `/client` directory. + +Alternatively, if you have many existing assets and don't wish to move them, you could consider creating symlinks from client/assets that point to your Rails assets folders inside of `app/assets/`. The assets there will then be visible to both Rails and webpack. diff --git a/docs/additional-reading/installation-overview.md b/docs/basics/installation-overview.md similarity index 100% rename from docs/additional-reading/installation-overview.md rename to docs/basics/installation-overview.md diff --git a/docs/basics/migrating-from-react-rails.md b/docs/basics/migrating-from-react-rails.md new file mode 100644 index 000000000..64ac9f53a --- /dev/null +++ b/docs/basics/migrating-from-react-rails.md @@ -0,0 +1,17 @@ +## Migrate From react-rails +If you are using [react-rails](https://github.com/reactjs/react-rails) in your project, it is pretty simple to migrate to [react_on_rails](https://github.com/shakacode/react_on_rails). + +- Remove the 'react-rails' gem from your Gemfile. + +- Remove the generated lines for react-rails in your application.js file. + +``` +//= require react +//= require react_ujs +//= require components +``` + +- Follow our getting started guide: https://github.com/shakacode/react_on_rails#getting-started. + +Note: If you have components from react-rails you want to use, then you will need to port them into react_on_rails which uses webpack instead of the asset pipeline. + diff --git a/docs/coding-style/linters.md b/docs/contributor-info/linters.md similarity index 100% rename from docs/coding-style/linters.md rename to docs/contributor-info/linters.md From 24a11c2f0a5e3781b2479a1f302b8f837e756ef0 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Sat, 23 Apr 2016 18:34:16 -1000 Subject: [PATCH 4/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 34a2ab6c0..71ed66650 100644 --- a/README.md +++ b/README.md @@ -355,7 +355,7 @@ Suppose the Redux store is called `appStore`, and you have 3 React components th You will need to make a function that can create the store you will be using for all components and register it via the `registerStore` method. Note, this is a **storeCreator**, meaning that it is a function that takes (props, location) and returns a store: -``` +```js function appStore(props, railsContext) { // Create a hydrated redux store, using props and the railsContext (object with // Rails contextual information). From 15d3513014ff4986f7d99c99a5d8db47f1074f33 Mon Sep 17 00:00:00 2001 From: Pierre VDEV Date: Mon, 25 Apr 2016 19:35:39 +0200 Subject: [PATCH 5/6] Update README.md Fix links to installation-overview --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 71ed66650..d1d2dc12a 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,7 @@ We're definitely not doing that. With react_on_rails, webpack is mainly generati ### Installation Summary -See the [Installation Overview](docs/additional-reading/installation-overview.md) for a concise set summary of what's in a React on Rails installation. +See the [Installation Overview](docs/basics/installation-overview.md) for a concise set summary of what's in a React on Rails installation. ### Initializer Configuration @@ -416,7 +416,7 @@ Components are created as [stateless function(al) components](https://facebook.g + [Setting up Hot Reloading during Rails Development, API docs](docs/api/ruby-api-hot-reload-view-helpers.md) + [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032) + [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724) -+ [Installation Overview](docs/additional-reading/installation-overview.md) ++ [Installation Overview](docs/basics/installation-overview.md) + [Babel](docs/additional-reading/babel.md) + [Heroku Deployment](docs/additional-reading/heroku-deployment.md) + [Manual Installation](docs/additional-reading/manual-installation.md) From 999561952be5c1ab84a608b1f3d84e619dac86c2 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Wed, 27 Apr 2016 21:43:40 -1000 Subject: [PATCH 6/6] Update heroku-deployment.md --- docs/additional-reading/heroku-deployment.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/additional-reading/heroku-deployment.md b/docs/additional-reading/heroku-deployment.md index 7b9d2f23f..b4e312843 100644 --- a/docs/additional-reading/heroku-deployment.md +++ b/docs/additional-reading/heroku-deployment.md @@ -26,13 +26,13 @@ If for some reason you need custom buildpacks that are not officially supported ### Swap out sqlite for postgres by doing the following: -1. Delete the line with `sqlite` and replace it with: +#### 1. Delete the line with `sqlite` and replace it with: ```ruby gem 'pg' ``` -2. Replace your `database.yml` file with this (assuming your app name is "ror") +#### 2. Replace your `database.yml` file with this (assuming your app name is "ror") ```yml default: &default @@ -65,7 +65,7 @@ bin/rake db:migrate bin/rake db:setup ``` -3. Create a rake file to add webpack compilation to asset precompilation. You may already have this file if you used the React on Rails generator. +#### 3. Create a rake file to add webpack compilation to asset precompilation. You may already have this file if you used the React on Rails generator. ```ruby # lib/tasks/assets.rake