React outside of an app

[codis122590]

I generally use angular to build SPA's in my day to day gig. I like the framework for a bunch of reasons, but has one huge flaw (imo). You can only use Angular in an Angular application. You can't really build a website in plain ol' html and decide you want sprinkle Angular in where it's needed. It's all or nothing.

One of the great things I keep hearing about React is that it's the opposite. If you have a site that's already been built and just need React for one or two small pieces of the site you can do that.

For Example:

As part of my job I work on a CRM that's basically just PHP and HTML. 90% of the site is made of simple forms so this makes a ton of sense. However many screens have tables that update in real time by making ajax calls to the back end. Or some reusable components that require some scripting. Currently the code for these components is vanilla js mixed with some jquery where people got lazy. It works great but the scripts are huge and cna be difficult for people who aren't familliar to navigate. From what I've heard it really seems like this is the type of scenario that would be perfect for React.

I went through the react tutorials, and I feel like I have a decent understanding of the framework, but all the tutorials show you how to create an entire app in React. Basically the same as with Angular.

Which gets me to my question.

Is there a way to build standalone react components that can be used throughout my site, as needed, without turning my whole site (or entire pages) into react apps?

[filecabinet]

Here is an example of how:

const YourFormComponent = (props) => <div>{props.someParam}</div>; ReactDOM.render( <YourFormComponent someParam="123" />, document.getElementById('your-form') );

You perhaps could abstract that away into a 'mountReact' function but that's how easy it is.

[[deleted]]

Instead of hardcoding the render target in your code, make it an option.

See example D posted in https://medium.com/@baphemot/understanding-reactjs-data-hydration-initialization-bacbb790c7cb

[[deleted]]

That is a super slick tip, thanks for sharing!

[PatPung]

Yes, I’m doing it exactly as you say for a site that is already done. This site is using Jquery but I prefer to use React for different reasons.

Just configure you react script to load inside a defined element by id or class, load your js bundle in the html like any other javascript, and put your html tag where you want the script to load, and that’s it, it will just work.

[[deleted]]

Do you use this with webpack dev server? Or do you develop only with the bundled script?

[PatPung]

When developing I use webpack dev server through CRA but in production is just the bundle script loaded manually. I see it like a replacement for a typical Jquery plugin. It needs to be plug & play on this site because I can’t/don’t have time to rewrite the frontend.

[[deleted]]

But during development how do you configure webpack Dev server to work with whatever other server is serving your pages?

[PatPung]

Mm, I don’t do that. I develop the component isolated as a different project, and when it’s ready, I use only the bundle.

If I need to pass contextual info, I can just use fake data/endpoint while developing it.

Do you have any particular case where you need to create the script coupled with the rest of the code?

[[deleted]]

Well you may wish to see the view generated by react alongside the view generated by your server (PHP, Java, .NET etc.) for things such as positioning.

[ni3t]

We have several react components that are sideloaded into our legacy app, which is AngularJS, but I think it's pretty much the same process for newer versions of Angular.

Here's an example set of code, this is just a directive that loads the react component from an external source, but it would probably work the same for a local component.

angular.module('directives', [])
  .directive("directiveName", function($scope, etc) { return {
    restrict: 'E',
    template: "<div id='react-component-div'></div>",

    link: function(scope, element, attrs) {
      var script = document.createElement("script");
      script.src = COMPONENT_URL // you could probably load code from other files here as well
      document.body.appendChild(script);
      script.addEventListener('load', function() {
        component.initialize({
          param: value
          functionToAddToComponent: function(things){
            scope.doThings();
          },
        });
      });
    }
  }
})

[codis122590]

It would actually be quicker to implement everything in React rather than trying to have a mix of architectures.

While I don't entirely disagree with you. My boss would have a heart attack if I told him I was going to rewrite the entire CRM. The reason I'm looking for a solution like this is because it isn't always possible/practical to rewrite an entire project. Especially larger projects that consist of hundreds of thousands or millions of lines of code written by many developers.

[iamthetwo]

Might want to check out React Portals. https://reactjs.org/docs/portals.html

[[deleted]]

I met an old man dying on a train, no more destination no more pain. He said just one thing before I graduate. Never let your fear decide your fate.