3

Is there a way to export react component as function and pass in props as params of the function in non-react project?

I am recently finished a react project with create-react-app. Now i wanted to use it to other non-react project(pure Javascript + html, Angular etc).

However, since these projects can not just use the component in React fashion(composition). I am wondering if we can export react component as function, so we can just use it across different projects without worrying about react's architect.

For instance:

export default class MyComponent extends React.Component{
    render(){
        return(
            <div>
                {"Hello World" + this.prop.name}
            </div>
        )
    }
}

And then export it as function. So in the non-react project, i can do something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Non-React App</title>
  </head>
    <script src="https://mydisk/ImportMyReact.js" ></script>

    <script>
      MyComponent("Jake")  
    </script>

  <body>
  </body>
</html>

I tried to use webpack to bundle it, but I have no luck because the bundle.js is a giant piece of code that I cant just import certain function out of it.

ZpfSysn
  • 807
  • 2
  • 12
  • 30
  • You make a build as a UMD Module. – epascarello Jan 28 '19 at 16:25
  • @epascarello that's what I have tried with Webpack. Did not have luck with it. I do not wish to publish it to npm because my other project does not use node(ASP.MVC). Is there other options without publishing it to npm? – ZpfSysn Jan 28 '19 at 16:29
  • Possible duplicate of [React functional stateless component, PureComponent, Component; what are the differences and when should we use what?](https://stackoverflow.com/questions/40703675/react-functional-stateless-component-purecomponent-component-what-are-the-dif) – Jared Smith Jan 28 '19 at 16:38
  • @JaredSmith I did look into functional component and such. It is not helpful because my component in reality needs to be a class because I am using life-cycle methods. – ZpfSysn Jan 28 '19 at 16:43
  • I believe you may need WebComponent as adapter layer. take a look into https://www.npmjs.com/package/react-web-component – skyboyer Jan 28 '19 at 16:50
  • @aDev [not anymore](https://stackoverflow.com/a/53214725/3757232). – Jared Smith Jan 28 '19 at 17:27
  • So you want to use React without using React? No, that's not possible. React is the thing that makes React components work. – JLRishe Jan 29 '19 at 02:19
  • @JLRishe No, what I am trying to say is that I am trying to use React in a non-react project in a sense that other people who uses my react code does not have to know React to use it. It is like a SDK if that makes sense where the actual React is encapsulated so the people who uses my code do not have to know React to use it. – ZpfSysn Jan 29 '19 at 15:55
  • Check servicebot opensource project. @ZpfSysn – DEEPAN KUMAR Nov 20 '20 at 13:04

2 Answers2

8

If you want to create a function that will render a react component in a nonreact project, you can do that, but it's going to need to make use of reactDom.render, since that's the only way to take a react component and render it to the dom.

React components do not modify the dom themselves. All they do is create the "virtual dom", which is a set of types and props that react-dom can then use to update the dom. For example, let's take the very simplest of components:

() => <div/>

After transpiling the jsx, this turns into:

() => React.createElement("div", null);

And if you were to run this function, the result is a plain javascript object that looks like this:

{
  $$typeof: Symbol(react.element),
  key: null,
  props: {},
  ref: null,
  type: 'div'
}

More complicated components will create more complicated objects, and in the case of class components they create it via their render method, but in all cases the result is just a plain object. The dom has not been updated in creating this object, and the component contains no logic for updating the dom. It's React-Dom's job to take that object and figure out how to update the dom.

Here's an example of how you might package up a function for use in a non-react application which renders a react component:

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  // etc
}

export default function renderMyComponent(element, name) {
  ReactDOM.render(<MyComponent name={name}>, element);
}


/** somewhere else: **/

renderMyComponent(document.getElementById('main'), 'Jake');
Nicholas Tower
  • 72,740
  • 7
  • 86
  • 98
  • 1
    I am sorry if I am not clear. I am not asking for help to pass data as props and render them. rather, I am trying to find it way to "export it as function" so i can use it in non-react environment. Also, since I am trying to use it in non-react project, i think ReactDom.render() would not be idea since it is still React – ZpfSysn Jan 28 '19 at 16:42
  • 3
    `rather, I am trying to find it way to "export it as function" so i can use it in non-react environment` yes, that's exactly what i was trying to demonstrate. renderMyComponent is a function that can be used in any project, react or otherwise. That function will then render a MyComponent .`Also, since I am trying to use it in non-react project, i think ReactDom.render() would not be idea since it is still React` ReactDom.render is the only way to render a react component to the dom. – Nicholas Tower Jan 28 '19 at 17:03
  • Is there a way to just 'export default' the component and calling ReactDOM.render() on the non-react (plain javascript)? Like: ` – sugaith Sep 04 '20 at 23:56
-1

You can import another component and call it like this:

import SecondComponent from './SecondComponent'

export default class App extends React.Component {
render() {
    return (
<SecondComponent />
) }
}
Ritviz Sharma
  • 306
  • 1
  • 9
  • I am sorry if I am not clear. I am not asking for help to pass data as props. rather, I am trying to find it way to "export it as function" so i can use it in non-react environment – ZpfSysn Jan 28 '19 at 16:41
  • Sure you can do that, react is all about components hence you can define your components and can easily call inside in your class. – Ritviz Sharma Jan 28 '19 at 16:49
  • I am trying to do it in a "non-react-environment". – ZpfSysn Jan 28 '19 at 16:51
  • He is looking for transfer react component to non react project @RitvizSharma – Talha Noyon Aug 18 '20 at 09:03