search

shakacode / react_on_rails

Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.
https://www.shakacode.com/react-on-rails/docs/
MIT License
5.1k stars 629 forks source link

Info for migration guide to 2.1.0 #238

Closed hisapy closed 8 years ago

hisapy commented 8 years ago

The following info might come handy in Migration Guide to 2.1.0:

  1. Since React/ReactDOM are not globally exposed, you should import/require it in your "component" .js files or you'll have a "React/ReactDOM is not defined" when trying to render a <Component />
  2. npm install --save-dev babel-runtime (I had to do this to get react-on-rails running with my babel-% 5 libs)
justin808 commented 8 years ago

@hisapy:

With the new ReactOnRails api, you don't need to access React or ReactDom directly. Sure, if you have a webpack entry point that doesn't eventually lead to some some component, then you have bigger issues.

In terms of supporting babel 5, i'm not sure we want to do that. If you want to submit a PR with a doc for the docs/additional_reading/babel-5.md directory, I'll take that.

However, I'd recommend biting the bullet and getting on with babel 6!

hisapy commented 8 years ago

Hi @justin808, The following might be useful for people looking for a quick upgrade to 2.1.0

1) What I meant is that if you adjusted your webpack config to NOT expose React and ReactDOM:

// The following import wasn't necessary when ReactDOM was exposed in webpack config
import ReactDOM from 'react-dom'; 
// other stuff here
let dom = ReactDOM.findDOMNode(this)
// other stuff here

2) I upgraded an almost 3 month old app to react_on_rails 2.1.0 and we had to do it as fast as possible because of current deadlines. The only thing I had to do besides the stuff mentioned in the migration guide was npm install --save-dev babel-runtime. Currently my package.json looks something like the following

"devDependencies": {
    "babel-core": "^5.8.25",
    "babel-loader": "^5.3.2",
    "babel-plugin-react-transform": "^1.1.1",
    "babel-runtime": "^6.3.19",
    "react-transform-hmr": "^1.0.1",
    "redux-devtools": "^3.0.0-beta-3",
    "redux-devtools-dock-monitor": "^1.0.0-beta-3",
    "redux-devtools-log-monitor": "^1.0.0-beta-3",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"
  },
  "dependencies": {
    "autonumeric": "^1.9.42",
    "classnames": "^2.2.0",
    "eonasdan-bootstrap-datetimepicker": "^4.15.35",
    "es5-shim": "^4.5.2",
    "es6-promise": "^3.0.2",
    "expose-loader": "^0.7.1",
    "history": "^1.17.0",
    "humps": "^1.0.0",
    "immutable": "^3.7.6",
    "imports-loader": "^0.6.5",
    "isomorphic-fetch": "^2.2.1",
    "jade": "^1.11.0",
    "jquery": "^2.2.0",
    "jquery-ujs": "^1.0.4",
    "lodash": "^3.10.1",
    "moment": "^2.10.6",
    "normalizr": "^1.3.1",
    "react": "^0.14.6",
    "react-color": "^1.3.5",
    "react-dom": "^0.14.6",
    "react-on-rails": "^2.1.0",
    "react-redux": "^3.1.2",
    "react-router": "^1.0.3",
    "redux": "^3.0.6",
    "redux-logger": "^2.4.0",
    "redux-simple-router": "^2.0.4",
    "redux-thunk": "^1.0.0",
    "reselect": "^2.0.2",
    "typeahead.js": "^0.11.1"
  }

I'll use Babel 6 in a new project starting today but for the moment our current project will have to wait (however I hope its current dependencies will work to build the bundle for production)