0

I have a project in drive C and I need a component in some other project in some other drive D. How do I proceed?

I have a website already made without ReactJS but now I need React as it will make my work easier so I'm integrating the components this way.

Can we import components in a non-react app like this?

below is my written code

'use strict';
import App from '../../../../';               //Area of issue

const e = React.createElement;

class LikeButton extends React.Component {
constructor(props) {
    super(props);
    this.state = { liked: false };
}

render() {
    if (this.state.liked) {
        return 'You liked this.';
    }

    return e(

        // <App />

  'button',
        { onClick: () => this.setState({ liked: true }) },
        'Like'
    );
}
}

const domContainer = document.querySelector('#map');
ReactDOM.render(e(LikeButton), domContainer);
bhav_yea
  • 63
  • 6
  • Why do you have in a different location - just like a different drive - any of your components? I just simply don't see the reason. Maybe I'm wrong. – norbitrial Dec 14 '19 at 18:15
  • @norbitrial agreed, that wasn't the smartest of decisions, though when you will see the comments in the answer below you might see why :/ ...........Basically I keep HTML Projects in C and React Projects in D for no apparent reason, that's all. Now you might be able to help thes ituation. – bhav_yea Dec 14 '19 at 18:42

3 Answers3

2

Yes, you can import your components from one project to another irrespective of your new project location. It's just that your project might require a little restructuring and then has to be transpiled into a ES5 package, bundled and imported into other projects like a npm package. you can also publish it to the npm repository online and install it as a dependency in the project you want. You just need to take care of the imports and exports really well.

So, here is the basic idea..

  1. use babel and webpack to transpile your react project and bundle into a npm package. eg.

    babel Path_of_your_c_drive_project --out-dir output_folder_path --copy-files

  2. Copy that npm package from the output folder and paste it in the node_modules of the new project, and then add it is as a dependency in package.json of your new project.

  3. Import the components in the js files wherever you require in the new project, just the same way you import other packages and use them.

  4. You might face a lot of "not found errors" if you don't give the paths correctly at all the imports and exports in the above steps.
Gyan Prakash
  • 121
  • 8
0

Sadly, that is not possible. Just store the components on the same drive, shouldn't be that much of a hassle.

LeonMrBonnie
  • 80
  • 8
  • Thank you, as I said it's not a react app I'm working on but a normal html website with react component. Let's say I do move the entire project to same drive but how do I install things like 'google-maps-react' in a case like this, where the react alternative can simply do "npm install" ? – bhav_yea Dec 14 '19 at 18:38
  • Basically I downloaded a website template which has everything I need already built, with only bootstrap. Later on I realised it is missing google map and I needed it but API will need React so had to do this workaround. Please provide assistance – bhav_yea Dec 14 '19 at 18:40
0

Create a react project. Implement all the react components inside that with your required customizations. Then instead of directly rendering, export a function to render those components to the element reference you pass. Then build it and include the built js file in your project. Follow the links to get a better idea:

react-micro-frontends

is-it-possible-to-export-react-component-as-function-in-non-react-project

using-react-components-in-non-react-websites

add-react-to-a-website

Johnson Cherian
  • 545
  • 1
  • 7
  • 21