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
– i am bad at coding, Commented Dec 15, 2020 at 13:55
Please checkout may be this will help you medium.com/better-programming/… — shivlal kumavat
– shivlal kumavat, Commented Dec 15, 2020 at 13:57
Here you can find the answer: stackoverflow.com/questions/53396307/… — Ali Lotfi
– Ali Lotfi, Commented Dec 15, 2020 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
– Quentin, Commented Dec 15, 2020 at 14:09

Alberto P. Reynoso · Accepted Answer · 2021-01-06 21:33:43Z

0

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.

answered Jan 6, 2021 at 21:33

Alberto P. Reynoso

413 bronze badges

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

Comments

Nitesh · Accepted Answer · 2021-01-12 07:48:43Z

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';

Collectives™ on Stack Overflow

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

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