Hope You are doing great and in good health.
I'm a beginner in React.js and doing my FYP project, I come to a problem where I'm not able to insert external JS or Jquery code inside the react,
I have tried many npm and mentioned processes in StackOverflow, but that not work?
What should I do? where I import these scripts ??
//import all libraries here
import React, { Component } from "react"; //importing react
import $ from "jquery"; // be sure to do npm install jquery
import some_library from "./path/to/some/library"; //importing directly from .js file
class App extends Component {
render() {
return (
...
);
}
}
export default App;
If you want to use, plain JavaScript/JSON to render its relevant DOM, I recommend to go with functional components.
import React from "react";
const example = () => {
return (
<div className="App">
<h1>Hello World</h1>
<h2>This is inside a function</h2>
</div>
);
};
export default function App() {
return example();
}
Related
Hi guys I'm trying to make a jigsaw website using react. I found a library called snapfit.js that can generate simple jigsaws from a png file. The problem is that I need to get this script working in a react component.
Currently I import the snapfit.js file in my index.html and when I open the console in chrome I can see that snapfit got added to the window (snapfit.window). I cant seem to find a way to make use of it in my react component though.
Currently I have:
import * as React from 'react'
import mole from '../assets/mole.png'
import {Helmet} from 'react-helmet'
import Button from 'react-bootstrap/Button'
export class PuzzelSnapfit extends React.Component {
render(){
return (
<div>
<h2>Demonstration</h2>
<div><img src={mole} onLoad={alert(this)} />
</div>
</div>
);
}
}
export default PuzzelSnapfit
I also tried using react-helmet like this:
<div><img src={mole} onLoad={window.snapfit.add(this)} />
When I try executing it that way I get a toUpperCase of undefined error, so it seems that this is undefined. I also tried loading the image into state but then I also get a undefined error.
Any help would be appreciated because I really dont know what else I could try except for maybe injecten a html file into my component but that also has its downsides.
You can import external scripts into your react js files by using the import statement.
example (your file where you want to use snapFitFunction1() and snapFitFunction2()):
import * as React from 'react'
import mole from '../assets/mole.png'
import {Helmet} from 'react-helmet'
import Button from 'react-bootstrap/Button'
import { snapFitFunction1, snapFitFunction2 } from './snapfit.js';
...
In your snapfit.js file, you should have a export statements for snapFitFunction1, and snapFitFunction2.
example (snapfit.js):
function snapFitFunction1() {
console.log('Foo');
}
function snapFitFunction2() {
console.log('Bar');
}
export snapFitFunction1;
export snapFitFunction2;
You may have to add exports for functions you want to use from the snapfit.js file.
You can call the external library in componentDidMount instead of React helmet like this:
const snapJs = (yourScriptPath) => {
const script = document.createElement("script");
script.src = yourScriptPath
script.async = true;
document.body.appendChild(script);
}
componentDidMount () {
snapJs("snapfit.js")
}
If you prefer using React Helmet then this would be the correct way:
import {Helmet} from "react-helmet";
const PuzzelSnapfit = props => (
<div>
<Helmet>
<script src="snapfit.js" type="text/javascript" />
</Helmet>
</div>
);
I am new to react and I tried the following code
person.js
const element = <h1>Hello world</h1>;
export default element;
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
function Hello() {
return Person.element;
}
class App extends Component {
render() {
return (
<div className="App">
<Hello></Hello>
</div>
);
}
}
export default App;
But getting the below errors
work/my-app/src/person/person.js
3:17 error 'React' must be in scope when using JSX react/react-in-jsx-scope
When I changed to a simple hello word as below, then it works fine.
person.js
const element = 'hello world';
export default element;
I tried with different ways by checking different forum
importing the ReactDom
in person.js changed to module.exports=element
The use of HTML within JS code is known as JSX. The <h1>...</h1> is JSX. You need to import React before you use JSX. Simply shift the import statements before any use of JSX.
person.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
const element = <h1>Hello world</h1>;
export default element;
You need to import React in every file that exports a component (App in this case).
The latest React 17 Version: No need to include React in the scope
If you are struggling with ESlint or run-time CRA warnings, follow these temporary steps to fix until CRA v4 is released: https://github.com/facebook/create-react-app/issues/9850
I am trying to use a html and CSS template on create-react-app. I can convert all of the HTML to JSX without any issues and render the CSS just fine. I cant get the Script tags that home with the template to work though
I think you would write script tags in Reactjs the same way you would in HTML. Like this:
<script src="fooLink.js"></script>
(fooLink.js being any link.)
If you want to go further with React, try looking at this article:
https://reactjs.org/tutorial/tutorial.html
Or post the code you are having trouble with so we can help you.
I am not sure I understand but can't you add the script tags to your index.html file . The one where you have a div (usually) targeted by the render function of ReactDom (render( , document.getElementById('my target div'))
React works with classes (ES6) and functions which are called as
components. you can create one and import the created component in
your jsx (written inside the render() of the component)
//your first component(js)
import React, {Component} from 'react';
class ComponentOne extends React {
render() {
return <div>some text or {value}</div>
}
}
//your second component
import React, {Component} from 'react';
import ComponentOne from 'your path here';
class ComponentTwo extends React {
render() {
return <ComponentOne>;
}
You can learn more from https://reactjs.org/
npm install --save react-script-tag
then
import React, { Component } from 'react';
import ScriptTag from 'react-script-tag';
class Demo extends Component {
render() {
return (<ScriptTag isHydrating={true} type="text/javascript" src="some_script.js" />);
}
}
I am getting a "Can't find variable: React" error in my react native project. But, what baffles me is that I am not at all using React in that file, although, I am importing a custom component which uses it though. Here is a MCVE of my problem.
First up construction.js:
import React from 'react';
import { View, Text } from 'react-native';
class UnderConstruction extends React.Component {
render() {
return (
<View>
<Text style={{ padding: 75 }}>
This page is under construction :(
</Text>
</View>
);
}
}
export default UnderConstruction;
Next up, render.js:
import UnderConstruction from './construction';
export function render() {
return (
<UnderConstruction />
);
}
And lastly, index.ios.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import * as Factory from './render';
class Demo extends React.Component {
render() {
return Factory.render();
}
}
AppRegistry.registerComponent('Demo', () => Demo);
Running this app will cause the error Can't find variable: React on render.js line number 5, which is:
<UnderConstruction />
I found out the problem can be solved by just adding an import statement for React on render.js like:
import React from 'react';
import UnderConstruction from './construction';
...
I am curious as to why should I import React even though I am not using it in render.js, hence this question. So, what causes Can't find variable: React error in my render.js file?
To use render function you need to import React in your file because react creates your elements. I would suggest you go through your transpiled Javascript file once, you will understand what I mean.
I was myself facing this issue sometime back and when I saw the transpiled JS file and I then I saw how it works.
So in your transpiled file it would be something similar to this:-
(0, _reactDom.render)(_react2.default.createElement(_Root2.default, { store: store, history: history }), document.getElementById('app'));
I'm learning React Native, just curious about the parentheses in the first line of import
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Why wrap Component with {} but not React?
React is the default export (there can only be one of these per module). Default exports can be imported like this:
import React from "react";
Component is a named export (there can be many of these). Named exports are imported like this:
import { Component } from "react";
What you're seeing is both of these things imported on the same line.
default exports aren't automatically available everywhere, so they still need importing.
Note that the reason React needs importing at all is because of the way that JSX is transformed into JS - React needs to be available so <Text> can be transformed into React.createElement(Text, ....
I think it's just a matter of shorting the next invocations, since Component is a subclass of React, so that way you use React as default with all it has in it. and Component as a single class you'd use. By the way you use braces in import when you want something specific as a method or class, that is named export. There's a better explanation in here.
Having both named exports and a default export in a module
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export default class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}