Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PROOF-OF-CONCEPT: Externalized React, React-DOM to support React Addons #221

Closed
wants to merge 1 commit into from
Closed

PROOF-OF-CONCEPT: Externalized React, React-DOM to support React Addons #221

wants to merge 1 commit into from
+37 −4

Conversation

frol
Copy link
Contributor

@frol frol commented Nov 7, 2016 •
edited
Loading

This is not intended for merge!

This is the result of my experiments with React-MD (#196), Material-UI (#119), and others relying on react-addons-* (#204).

To make React Addons usable in Next.js out of the box, Next.js has to accomplish the following:

Here are the steps to get a working project with React-MD:

  1. package.json:

    {
  "name": "my-app",
  "dependencies": {
    "next": "^1.1.1",
    "react-addons-css-transition-group": "^15.3.2",
    "react-addons-pure-render-mixin": "^15.3.2",
    "react-addons-transition-group": "^15.3.2",
    "react-md": "^0.3.7"
  },
  "scripts": {
    "test": "jest",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "devDependencies": {
    "babel-jest": "^16.0.0",
    "enzyme": "^2.5.1",
    "jest": "^16.0.2",
    "react-addons-test-utils": "^15.3.2"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
}

  2. pages/index.js:

    import React from 'react'
import Head from 'next/head'
import { RaisedButton } from 'react-md/lib/Buttons'

export default class App extends React.Component {
  render() {
    return <div>
      <Head>
        <link rel="stylesheet" href="https://npmcdn.com/react-md/dist/react-md.css" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
      </Head>
 
      <RaisedButton label="I am a button!" />
    </div>
  }
}

  3. npm install

  4. Fetch these changes and compile Next.js yourself, or extract this dist into ./node_modules/next/dist: dist.tar.gz

  5. npm run dev

/cc @nkzawa

@frol frol mentioned this pull request Nov 7, 2016
Closed
@frol frol force-pushed the proof-of-concept-external-react branch from 0a11d6a to 337fcbd Compare November 7, 2016 14:08
This was referenced Nov 8, 2016
Closed
Closed
Closed
@rauchg
Copy link
Member

rauchg commented Dec 17, 2016

Fixed by @arunoda

@rauchg rauchg closed this Dec 17, 2016
@lock lock bot locked as resolved and limited conversation to collaborators Jan 19, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@frol @rauchg