{"id":135,"date":"2021-04-23T09:29:51","date_gmt":"2021-04-23T14:29:51","guid":{"rendered":"https:\/\/www.grizzly-hills.com\/?p=135"},"modified":"2021-04-23T09:29:51","modified_gmt":"2021-04-23T14:29:51","slug":"react-in-a-legacy-app","status":"publish","type":"post","link":"https:\/\/www.grizzly-hills.com\/index.php\/2021\/04\/23\/react-in-a-legacy-app\/","title":{"rendered":"React in a Legacy App"},"content":{"rendered":"\n

I am working on a relatively old legacy web app. It’s a very complex system, and was built upon jQuery<\/code> and uses requirejs<\/code> for module loading. I have been slowly updating it to use ES5+ features and React<\/code>. In particular, working with React<\/code> in this app has been a bit painful. This app, you see, doesn’t have a build environment, so using webpack<\/code> and babel<\/code> aren’t available, at least not in the standard way. With a great deal of effort, it certainly can be made to work with a build environment, but my intention is to spend my energy on cleaning up the code and, when that task is complete, bringing in a standard build system. Ah, that will be great.<\/p>\n\n\n

But, at least for today, I want to add some React<\/code> code. I’ve done it before in this app, but since I have no build system, I’ve used React.createElement()<\/code><\/strong>. If you’ve tried to build anything more than a trivial Component<\/code> using React.createElement()<\/code>, you know that it gets old, fast.<\/p>\n\n\n

So I want to just JSX, naturally. But with no build system, I wasn’t sure how to proceed. There are plenty of examples on how to use babel standalone<\/code> and mark your script<\/code> tags as \"text\/babel\"<\/code> to have your JSX code converted to JS on the fly. But, a couple problems. First, I’m using requirejs<\/code>, and it doesn’t want to mark only some<\/em> script tags as \"text\/babel\"<\/code> (it can mark all or none). I’ve even gone so far as modifying requirejs<\/code> to only mark certain script<\/code> tags as \"text\/babel\"<\/code> but that leads to the next problem: babel standalone<\/code> doesn’t seem to compile the scripts imported by requirejs<\/code>. I’m sure there’s a way, but I gave up on that approach.<\/p>\n\n\n

What I really wanted was something that would just compile JSX files into JS, so I could write complex React<\/code> Components<\/code> and not worry about it.<\/p>\n\n\n

I found some examples for using browserify<\/code> and babel<\/code> to basically do what a build system would do, but it ends up creating massive JS files with all kinds of transpiled code. Clearly I was doing this wrong.<\/p>\n\n\n

I finally found that I can use a basic babel<\/code> transformFile()<\/code> call with some relatively simple configuration that mainly just compiles the React<\/code> JSX into React<\/code> JS with React.createElement()<\/code> calls, and really no other change to my code.<\/p>\n\n\n

I wrote a “watcher” script for this purpose, and now just keep it running in my IDE while I work:<\/p>\n\n\n

 const args = require('minimist')(process.argv.slice(2));\n const fs = require(\"fs\/promises\");\n const path = require(\"path\");\n const chokidar = require(\"chokidar\");\n const babel = require(\"@babel\/core\");\n const options = {\n   ignored: \/(^|[\\\/\\\\])\\..\/\n };\n async function compile(src) {\n   return new Promise((resolve, reject) => {\n     const info = path.parse(src);\n     const dest = path.join(info.dir, `${info.name}.js`);\n     babel.transformFile(src, {}, async (error, result) => {\n       if (error) { return reject(error) }\n       await fs.writeFile(dest, result.code);\n       console.log(`compiled ${src} -> ${dest}`);\n       resolve();\n     });\n   });\n }\n async function remove(src) {\n   const info = path.parse(src);\n   const dest = path.join(info.dir, `${info.name}.js`);\n   fs.unlink(dest)\n     .then(() => {\n       console.log(`removed ${dest}`);\n     })\n     .catch(error => {\n       \/\/ ignore\n     });\n }\n (async () => {\n   chokidar.watch('**\/*.jsx', options).on('all', async (event, path) => {\n     if (event === \"add\" || event === \"change\") {\n       await compile(path);\n     }\n     if (event === \"unlink\" && args.delete) {\n       await remove(path);\n     }\n   });\n })(); <\/pre>\n\n\n
The babel configuration file (babel.config.json<\/code>) looks like this:<\/p>\n\n\n
{\n   \"presets\": [\n     [\n       \"@babel\/env\",\n       {\n         \"targets\": {\n           \"edge\": \"17\",\n           \"firefox\": \"60\",\n           \"chrome\": \"67\",\n           \"safari\": \"11.1\"\n         },\n         \"useBuiltIns\": \"usage\",\n         \"corejs\": \"3.6.5\"\n       }\n     ],\n     \"@babel\/preset-react\"\n   ],\n   \"plugins\": [\"@babel\/plugin-syntax-class-properties\"]\n }<\/pre>\n\n\n
For packages, I’ve installed these in my package.json<\/code> file:<\/p>\n\n\n
@babel\/cli\n@babel\/core\n@babel\/preset-env\n@babel\/preset-react\nchokidar minimist <\/pre>\n","protected":false},"excerpt":{"rendered":"
I am working on a relatively old legacy web app. It’s a very complex system, and was built upon jQuery and uses requirejs for module loading. I have been slowly updating it to use ES5+ features and React. In particular, working with React in this app has been a bit painful. This app, you see, … <\/p>\n
Continue reading “React in a Legacy App”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,5,6],"tags":[7,12,13,14,18,22],"class_list":["post-135","post","type-post","status-publish","format-standard","hentry","category-coding","category-modern-javascript","category-react","tag-babel","tag-javascript","tag-jquery","tag-jsx","tag-react","tag-webpack"],"_links":{"self":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":0,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.grizzly-hills.com\/index.php\/wp-json\/wp\/v2\/tags?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}