ryanwinchester's avatar

[package] Laravel Elixir + React.js JSX transformer

Hey guys I made an elixir extension for transforming JSX files :D

https://github.com/fungku/elixir-react-jsx

You can see the readme below, and an example of it in use here

Completely open to suggestions on improvements to make it easier for more people to use. I just made it easy for me, personally.

Laravel Elixir - React JSX transforming

Version License Monthly downloads

npm install elixir-react-jsx --save-dev

Then require elixir-react-jsx in your gulpfile, and you can use mix.jsx().

Pretty simple.

var elixir = require('laravel-elixir');

require('elixir-react-jsx');

elixir(function(mix) {

    mix.jsx();

});

By default, using mix.js() without any arguments is the same as using:

mix.jsx('resources/assets/jsx/*.jsx', 'public/js');

Arguments:

  • input src
  • output dest

Transforming all your jsx files, and saving them to public/js

var src = 'resources/assets/jsx/*.jsx';

mix.jsx(src);

Transforming all your jsx files, and saving them to public/react

var src = 'resources/assets/jsx/*.jsx';
var dest = 'public/react';

mix.jsx(src, dest);

Concatenating all your jsx files to one js file

var src = 'resources/assets/jsx/*.jsx';
var dest = 'public/js/app-react.js';

mix.jsx(src, dest);

edit: Updated to 2.0 today, still testing it out. Use 1.1 to continue using 3 arguments and old functionality...

0 likes
8 replies
luca-degasperi's avatar

Not bad. Can this be piped into the elixir versioning task or not? Had troubles with other elixir tasks for react.

ryanwinchester's avatar

@luca.degasperi It works for me with elixir versioning.

However, elixir versioning can be a bit broken right now when versioning multiple files (nothing to do with react), and may be part of the problem you were experiencing.

If you encounter a file that is not getting versioned, try running gulp version separately and it will probably get versioned.

edit: After updating laravel-elixir to the latest 0.14.2, it looks like the versioning issue was fixed. (hopefully)

luca's avatar

@JeffreyWay think there's a minor bug with the forum as I got a notification for the above comment. Partial matching on user names?

JeffreyWay's avatar

@lucas - Thanks. Will check.

Everyone - just a note that with an update to Elixir that's likely coming this week, you won't really need this package.

dhaval.v's avatar

I've face when I'm trying to run "gulp"

[11:10:49] Using gulpfile /opt/lampp/htdocs/react_laravel/gulpfile.js
[11:10:49] Starting 'all'...
[11:10:49] Starting 'jsx'...

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: Parse Error: Line 13: Illegal export declaration
    at throwError (/opt/lampp/htdocs/react_laravel/node_modules/react-tools/node_modules/esprima-fb/esprima.js:2813:21)
    at throwErrorTolerant (/opt/lampp/htdocs/react_laravel/node_modules/react-tools/node_modules/esprima-fb/esprima.js:2825:24)
    at parseSourceElement (/opt/lampp/htdocs/react_laravel/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6387:17)
    at parseProgramElement (/opt/lampp/htdocs/react_laravel/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6446:16)
    at parseProgramElements (/opt/lampp/htdocs/react_laravel/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6478:29)
    at parseProgram (/opt/lampp/htdocs/react_laravel/node_modules/react-tools/node_modules/esprima-fb/esprima.js:6491:16)
    at Object.parse (/opt/lampp/htdocs/react_laravel/node_modules/react-tools/node_modules/esprima-fb/esprima.js:7653:23)
    at getAstForSource (/opt/lampp/htdocs/react_laravel/node_modules/react-tools/node_modules/jstransform/src/jstransform.js:251:21)
    at transform (/opt/lampp/htdocs/react_laravel/node_modules/react-tools/node_modules/jstransform/src/jstransform.js:274:11)
    at innerTransform (/opt/lampp/htdocs/react_laravel/node_modules/react-tools/main.js:94:10)

My code is:

  • guplfile.js
const elixir = require('laravel-elixir');
require('elixir-react-jsx');
elixir(function(mix) {

    mix.jsx('resources/assets/jsx/*.jsx', 'public/react');

});
  • App.jsx
class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Header</h1>
                <h2>Content</h2>
                <p>This is the content!!!</p>
            </div>
        );
    }
}

export default App;
rafalg's avatar

@dhaval.v I've run into almost the same issue, only with import instead of export. Seems odd that it'd be illegal syntax as even the most basic React tutorial features it.

Anyway, I tried the package called laravel-elixir-webpack-react instead and it worked for me.

Please or to participate in this conversation.