Skip to content
New issue

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

#

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

Already on GitHub? # 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

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
# for free to subscribe to this conversation on GitHub. Already have an account? #.
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.
2 participants
@frol @rauchg