How can i import normal javascript on ReactJS

Question

I am currently studying ReactJS. I'm coding in JSX style, but I have a question. How do I use the regularly-formatted JavaScript library I used?

E.g

myScript.js

(function () {
  var myTemp = "myTemp";

  function myFunction() {
    console.log("myFunction()")
  }
  function myFunction1() {
    console.log("myFunction()")
  }
  function myFunction2() {
    console.log("myFunction()")
  }
  function myFunction3() {
    console.log("myFunction()")
  }
}

When you have a JavaScript library of the above source, What methods can you use in JSX or ReactJS? Do I have to convert this to JSX and use it?

process.js is

import myScript from '~~~~/myScript'

export function proc() {
  myScript.myScript.myFunction();
}

sample.js is

import process from '~~~~/process'

export function sample() {
  process.proc();
}

Sample.js

import React, {Component} from 'react';
import * as sample from '~~~.sample';

class mySample extends Compoonent {

 click = () => {
    sample.sample()
  }

 render() {
    return (
      <button onClick={this.click}> button </button>
    )
 }
}
export default Sample;

i don't know how to import myScript.js ( normal format javascript like Library ) and call MyScript.js functions...

that code in myScript.js and i want to use all of this script function in sample.js. — Hoony B
– Hoony B, Commented Jan 23, 2019 at 5:19
Can you show me your sample.js I'll try to show you how to do it — Bon Andre Opina
– Bon Andre Opina, Commented Jan 23, 2019 at 5:21
As you see in myScript you are not exporting something... Is that the full code? If that is your final code I will post an answer — Bon Andre Opina
– Bon Andre Opina, Commented Jan 23, 2019 at 7:43

Liren Yeo · Accepted Answer · 2019-01-23 04:46:09Z

3

Even reactjs itself is just a javascript library. It is essentially still javascript.

When you write in 'JSX', for example

const ele = <h1 className="foo">bar</h1>

It still gets compiled into regular JS function, something like this:

const ele = React.createElement('h1', {className: 'foo'}, 'bar')

The point here is, you are not supposed to learn React like you're learning something different than regular Javascript.

Get down to the fundamental of Javascript first, especially all the ES6 syntax like arrow function () => {}, spread syntax ..., class, destructuring.

It wouldn't take you long to learn those, and once you got down the fundamentals, you would understand that you can just use the block of code you posted here in React as it is.

answered Jan 23, 2019 at 4:46

Liren Yeo

3,4592 gold badges24 silver badges43 bronze badges

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

Comments

Anil Kumar · Accepted Answer · 2019-01-23 04:33:00Z

2

You cannot convert this to JSX.

What you can do is...

const export OuterTemp = () => () => {
var myTemp = "myTemp";
console.log("myFunction()") 
};

import this function as :

import {outerTeamp} from './fileName.js';

answered Jan 23, 2019 at 4:33

Anil Kumar

2,3192 gold badges18 silver badges24 bronze badges

9 Comments

Anto Over a year ago

what does this means () => () =>

Anil Kumar Over a year ago

function inside function. You can call this outerTeamp()()

Anto Over a year ago

What is the point using that. Does it have any advantages over just using () => {} and call with outerTeamp()

Anil Kumar Over a year ago

This is ES6 features. easy to write.

Anto Over a year ago

I am aware of ES6 arrow functions, My question is why do we need function inside a function ? Isn't a simple function enough? like OuterTemp = () => { }

|

Anto · Accepted Answer · 2019-01-23 10:04:35Z

1

As @Anil Kumar mentioned you can wrap the entire code in an external library to const variable and export it. You need not make any changes to inner functions since you are using previously written code.

const export OuterTemp = () => {
  var myTemp = "myTemp";
  function myFunction() {
    console.log("myFunction()")
  }
}

and you can import them and call any functions within it

import OuterTemp from '~~~/OuterTemp'

It will work as expected

Edit

As per my understanding myFunction will be considered as private function and cannot be accessed outside. even in traditional JavaScript method you can't access it out side the function wrapper.

If your intention is to create a external library that has n number of functions and that has to be accessed in another file you have to do this in below way

  export var myTemp = "myTemp";

  export var myVar = 5;
  export function myFunction(){
    console.log("myFunction()");
  }
  export function myFunction1() {
    console.log("myFunction()")
  }
  export myFunction2() {
    console.log("myFunction()")
  }
  export myFunction3() {
    console.log("myFunction()")
  }

and you can Use that like

import * as outerTemp from './myScript';

outerTemp.myFunction();

edited Jan 23, 2019 at 10:04

answered Jan 23, 2019 at 7:00

Anto

6105 silver badges13 bronze badges

3 Comments

Hoony B Over a year ago

if the source(js file) is like... (function () { function test() { console.log } }) then... what can i do?

Hoony B Over a year ago

and how can i call myFunction() on other js

MadHatter Over a year ago

Were it my call this would be the accepted answer.

Collectives™ on Stack Overflow

How can i import normal javascript on ReactJS

E.g

3 Answers 3

Comments

9 Comments

Edit

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

E.g

3 Answers 3

Comments

9 Comments

Edit

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related