Converting React component to a single js file to integrate it with a blank html

Question

A react component is developed using JSX. How to convert it to browser understandable JS code and minified to 1 js file so that it can be included as a single script tag in html ?Am very new to Js world and heard of babel and webpack.not sure how to use it and covert it to the same.

I got things generated after react-scripts build.but images are not serving if i deploy them in weblogic as static

This is a very broad question and is difficult to answer as it stands. You can easily do what you are asking about using Webpack and Babel (I believe the create-react app project does this well out of the box by poopulating your "dist" folder with a JS file and the index.html). If managing the configurations is too much you can look at Parcel.js which will give you what you want (A single html file with a single js file) by running a simple command with no configuration. — Chirag Ravindra
– Chirag Ravindra, Commented Jul 23, 2018 at 6:55
There are transformers that convert JSX/TSX in js code. There are plugins like webpack/grunt/gulp that takes your js files and merge/create a bundle out of them. My suggestion, look on how to use them instead — Rajesh Dixit
– Rajesh Dixit, Commented Jul 23, 2018 at 6:55
I got things after react-scripts build. but after that images are not showing. Do i need to tweak any settings to serve images? — Jonathon
– Jonathon, Commented Jul 23, 2018 at 10:49
@Jonathon I think the problem may be due to the usage of relative paths. I have updated my answer, let me know if that doesn't help. Check your network console in your browser to see where it is searching for the images/styles, that will help you find the relative path to set. — dubes
– dubes, Commented Jul 23, 2018 at 14:42

xitter · Accepted Answer · 2018-07-23 07:18:48Z

2

For converting jsx into browser runnable js code, you would have to use babel. You can use babel-preset-react for this(via configuring .babelrc).

Babel Preset for React

Complete steps:

Run npm install babel babel-cli babel-preset-react
Define .babelrc at project root level, with following content

{ "presets": ["react"], }
Run babel {jsxFile}.jsx --out {jsFile}.js

edited Jul 23, 2018 at 7:18

answered Jul 23, 2018 at 7:09

xitter

7785 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dubes · Accepted Answer · 2018-07-23 14:40:38Z

Am very new to Js world and heard of babel and webpack not sure how to use it

The statement above tells me that setting up npm build pipelines might best be avoided.
So assuming you have the component in jsx and you would like to use the javascript version, you will need to "convert" it. If it is a component that doesn't change quite a lot, you can take a look at the online babel.io repl (this is recommended by the official documentation site as well).

However, this approach can be tedious if your component changes frequently. I can highly recommend create-react-app for development. It is an opinionated toolkit which hides away webpack and babel configuration, but at the same time, their opinions are well documented and work for many general use cases.

Edit From your comments, it seems you are already using react-scripts, then the most probably problem I see is that you perhaps forgot to specify the homepage property in your package.json (see relevant documentation) By default CRA assumes your static assets are hosted at server root, I assume you are not deploying your WAR in ROOT context, so you need to provide a static location.

I have a similar setup, where I need to package my site built with react inside a war file, I have the following setup:

in package.json

"homepage": "/<webapp_context>/build"

Then with gradle, I copy the build folder in its entirety to the WAR file (same level as WEB-INF).

This instructs react-scripts to put relative paths in all the static assets it publishes (such as CSS, js and images) and the imports then work.

Collectives™ on Stack Overflow

Converting React component to a single js file to integrate it with a blank html

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related