How do I link my javascript files in react when converting from HTML,CSS,JS into JSX, CSS, JS?

Question

I have a typical website created with HTML, CSS, Javascript and I'm trying to convert it into react.

I can convert my HTML into JSX pretty easily with an online converter and my CSS is the same, I just have to import it differently.

But now I'm confused about how to link up my javascript files. Because my HTML is now JSX which is in a Javascript file as well.

Normally in html this is all I need to do to link my java script and everything works:

<script type="text/javascript" src="js/main.js"></script>

How would I do this in react such that my JSX will have the same functionality as did my HTML?

Right now whether I try to import it from file location:

import  './javascript/main.js'

It doesn't do anything. I'm not getting any errors. My JSX and CSS works fine and all I have for my CSS is (this import works fine):

import  './css/main.css'

If it should work, please let me know, it must mean there's an error elsewhere that I have to sort out.

Thanks in advance

@shivlalkumavat thank you, can you please link me to it? I can't find it — i am bad at coding, Dec 15 '20 at 13:55
Please checkout may be this will help you https://medium.com/better-programming/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668 — shivlal kumavat, Dec 15 '20 at 13:57
Here you can find the answer: https://stackoverflow.com/questions/53396307/how-do-i-use-external-script-that-i-add-to-react-js — Ali Lotfi, Dec 15 '20 at 14:01
It depends on what the script *does*. It could be anything from "Just put it in the HTML that bootstraps the React app" to "Rewrite it completely so it does things The React Way" — Quentin, Dec 15 '20 at 14:09

score 0 · Answer 1 · answered Jan 06 '21 at 21:33

I don't think you can import js code on a react app, probably you have to create react-app first, then create its components and add you javascript code within these components, it´s pretty easy, i recomment you to read the documentation of react and see how it works. Hope it helped you.

score 0 · Answer 2 · answered Jan 12 '21 at 07:48

You can include JavaScript functions inside JSX itself :

import React from 'react';

const Something=()=>{

  //  Your javascript functions :

  return(
    <div>
      Your Html here
    </div>
  )
}

export default Something

//  Or if You are using Class Component :

import React, { Component } from 'react';

class Something extends Component {
  state = {  }

  // Your Javascript Functions
  
  render() { 
    return ( 
      <div>
        Your HTML goes here 
      </div>
     );
  }
}
 
export default Something;

and if you want to import js file from another location you have to include export in your function:

export const Name=()=> {
             
}

and import:

import {Name} from '/location';

How do I link my javascript files in react when converting from HTML,CSS,JS into JSX, CSS, JS?

2 Answers2