+ 1

Help with linking React Components

So iam trying to use reactjs in an html file in a local ide using cdn links for react and babel(babel for transpiling/converting the jsx code into js for browser to understand). using all code inside an internal html file works and so does using a single js file for the components and renderer. but separating the components into multiple file causes issues and i cannot fix this. can someone please help? full-on details and explanations with code in the code below: https://sololearn.com/compiler-playground/WZ8h9juLtyk6/?ref=app

html javascript react

19th Apr 2025, 3:37 PM

Ace

7 odpowiedzi

+ 5

Ace The best approach is to combine your components in index.js: Instead of importing from separate .jsx files, you would define all your components directly within index.js. Babel will then transpile all the JSX within this single file.

19th Apr 2025, 3:55 PM

BroFar

+ 3

Ace You can use the Babel's compiler, yes. You can also use its transform method to convert JSX to JS code directly, like in this code below(it uses an old method of copying to clipboard since navigator API does not work in Sololearn playground): https://sololearn.com/compiler-playground/WD0B25KiAlSQ/?ref=app

20th Apr 2025, 5:20 AM

Afnan Irtesum Chowdhury

+ 2

To have your separate .jsx component files work on GitHub Pages, you must transpile them into standard JavaScript (.js) files before you upload them to your repository. This is the crucial step that bridges the gap between your development preference for .jsx and what the browser can understand in a static hosting environment like GitHub Pages.

19th Apr 2025, 4:16 PM

BroFar

+ 2

Yes Ace as a bridge yes but you can do it as a standalone component structure. A bit more tricky but plausible.

19th Apr 2025, 5:32 PM

BroFar

+ 2

Thanks a lot BroFar and also thanks for the code Afnan Irtesum Chowdhury 👍😁

20th Apr 2025, 5:34 AM

Ace

+ 1

@BroFar i know i can have all the components inside the index.js file. but i want to keep them in separate component(jsx) files, for clarity and ease of use and writing code. and if it is not possible to do that, then at least is it possible to keep the final files(with component jsx files) that I will upload to my github site to work properly?

19th Apr 2025, 4:04 PM

Ace

+ 1

thanks for the help, I will do that. but for the last question i have, I would do that via this official babel transpiler, right? https://babeljs.io/repl/

19th Apr 2025, 5:27 PM

Ace