1

I have one file (master) that calls another file (loaded) with jquery .load().

In loaded file, javascrips works, but jsx code gets ignored.

Is it possible to load jsx code this way? If it is, how?

If not, what alternatives we have - how to process jsx code in loaded files?

Code of master page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React</title>
    <script src="https://fb.me/react-with-addons-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("#loaded").load("loaded.html", function(responseText, textStatus, req) {});
      });
    </script>

  </head>
  <body>

  <p>Master page</p>

  <div id="loaded"></div>

  </body>
</html>

Code of loaded page:

<script type="text/javascript">
  console.log("JQUERY WORKS");
</script>

<script type="text/jsx">
  console.log("REACT WORKS");
</script>


<p>loaded page</p>

Edit: What am I trying to accomplish: I'm working on a web app, that loads its "page fragments" with jquery load, and I need to render a React component inside that fragment.

Peter Lang
  • 11
  • 1
  • 4
  • Why would you even consider injecting JSX "code" into a container? Are you trying to render a React component inside a container? Also, the code example you provided is not JSX. – David Hellsing Apr 23 '15 at 14:46
  • @David exactly, I'm trying to render a React component inside a container, that is loaded with jquery load. I'v edited the original question. Can console.log("REACT WORKS"); in jsx be any problem? – Peter Lang Apr 23 '15 at 15:05
  • You should precompile the JSX files and just use `React.render` with a specific target element (which you could select via jQuery if you'd like). Compiling them on the fly will perform poorly and result in unnecessary "busy work" on the client. – WiredPrairie Apr 23 '15 at 17:00
  • @WiredPrairie that seems like a solution, my workflow was probably just plain wrong (thought I'll compile all on deploy). – Peter Lang Apr 24 '15 at 08:43

3 Answers3

1

You have to separate the JS/jQuery logic from the React's one

I would advise you to build a non-React program on the top of your application in order to manage your fragments

Read this post first sentences about fetching and evaluating dynamicaly loaded script and about inserting <script> tags pointing to a self-running component (see after, solution 2)

Solution 1 :

// index.js
import React from 'react'
import { render } from 'react-dom'

$(() => {
  window.components = {}

  window.loadComponent = componentKey =>
    fetch(`/components/${ componentKey }`)
      .then(response => response.text())
      .then(text => {
        window.components[componentKey] = eval(text)
        render(window.components[componentKey],
          document.getElementById(`anchor-${ componentKey }`))
})

A better approach would use a Redux approach to ensure both the single source of truth and one-way data workflow principles

Solution 2 Here we encapsulate our component with a simple rendering logic

The component can now be linked in your DOM with a <script> tag

// fragment-bundle.js
import React from 'react'
import { render } from 'react-dom'
import Fragment from './Fragment/Fragment'

render(<Fragment/>, document.getElementById('anchor-fragment'))
imrok
  • 787
  • 1
  • 9
  • 23
0

Not sure what you are trying to do here, but the JSX transformer comes with a transform method, so you could try something like:

$.get('loaded.html', function(jsx) {
    var transformed = JSX.transform(jsx);
    $('#loaded').html('<script>'+transformed.code+'</script>');
})
David Hellsing
  • 106,495
  • 44
  • 176
  • 212
0

Such a workflow doesn't seem right with React. Better approach is (for example) :

  • install react tools

    npm install -g react-tools

  • develop components in .jsx files in (for example) jsx folder

  • compile jsx automatically if is edited to .js files to (for example) js folder with console command

    jsx --extension jsx --watch jsx/ js/

  • use .js files in web app

Peter Lang
  • 11
  • 1
  • 4