如何在快速工作区中转换简单的反应组件

Question

I have a fairly simple question. I was writing simple express page for company (basic table delete row button and form page) easyyyy

But I decided to spruce form page a little bit with ajax validation and dynamic fields. Since I did few full react sites before i thought making this component would be easy. And tbh making component is easy but babel and webpack is not.

is there any easy way to transpile jsx with imports to the web without configuring whole separate workspace?

If react for this overkill and jQuery fell out of grace is there any other suitable library?

Hope you can understand my broken English

Answer 1

yes react is powerful, you can add it and setup it like, you can create the component separately and load the script on your target page just make sure you place the mount point right

and you can use create react app with this as well

just build the project place the bundle js path on the same page and add the mount point and it should work smoothly

<div id="mountPoint" ></div>

another way like the react does suggest here

Answer 2

I did minimal configuration of webppack and babel. When it wasnt so bad still configuring two libraries for one small component with 2 dependencies seems ridiculous:P

My config maybe somebody finds it useful:

webpack.config.js

 const path = require('path'); module.exports = { mode: 'development', output: { filename: 'public/javascripts/dist.js' }, module: { rules: [ { test: /\.jsx$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', "@babel/preset-react"] } } } ] } };

babel.config.js

 module.exports = function (api) { api.cache(true); const presets = []; const plugins = ['@babel/plugin-proposal-class-properties']; return { presets, plugins }; }