Develop Reference

How To use External JS/Jquery in React Jsx component's

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();
}

Error provides .render not a function in ReactJS. App.js is not running properly on LocalHost

The code in index.js
import React from "react";
import ReactDOM from "react";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
The code in App.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>App</h1>
</div>
)
}
}
export default App;
I'm currently following a Youtube Tutorial link: https://www.youtube.com/watch?v=khJlrj3Y6Ls
As you will notice at 7:45, the video creator has the same code as I do, however, for some reason his app works when running it but mines doesn't. I'm new to React and have understanding of the main concepts by working through this document https://reactjs.org/docs/rendering-elements.html . I would love your help on identifying why my app is not working and when running it on my localhost, I get the following message:
TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.render is not a function
Module../src/index.js
src/index.js:6
3 |
4 | import App from "./App";
5 |
> 6 | ReactDOM.render(<App />, document.getElementById("root"));

if you had the same question: the problem, as Andy pointed out, was that you will need to:
import ReactDOM from "react-dom";
previously, ReactDOM was being imported from react.
This lists more of the details; ReactJS: React.render is not a function and React.createElement is not a function

Why does my React Component Export not work?

I was just getting into react and trying it out for myself. After hours of configuring webpack just to get a hello world on my screen I thought I could get going now but after trying to render another component from a file the next problem.
My main file is app.js, which renders everything:
import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';
ReactDOM.render(
<Hello/>,
document.getElementById('app')
);
The Hello component comes from my hello.js in the same folder:
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
It was rendering fine when I was doing everything just in app.js without the import/export. It also compiles fine. But there are a lot of errors now in the console. So what am I missing?
Thanks
Gerd

Because your export is default you don't need braces around your import component name:
import Hello from './hello';
Here's a verbose technical article from Axel Rauschmayer on the final ES6 modules syntax that you might find useful.
And here's a slightly less techy post about the same topic.

when you import the default class you use
import ClassName from 'something';
and when you import other classes you use
import {ClassName} from 'something';
an example:
in hello.js file
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
class Other extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
export Other;
in other file
import Hello, {Other} from './hello';
tip: you could also import the default class with other name
import Component, {Other} from './hello';

whats the difference in the following react code?

I have came across the following material - ui example code.
import React from 'react';
import AppBar from 'material-ui/AppBar';
/**
* A simple example of `AppBar` with an icon on the right.
* By default, the left icon is a navigation-menu.
*/
const AppBarExampleIcon = () => (
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more"
/>
);
export default AppBarExampleIcon;
But with my tutorials experience one should subclass from React.Component to create a component. A sample example could be
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
Can anyone tell me why there is a difference?

The first one is a functional component (sometimes called "stateless component" or "stateless functional component"). It's recommended to use the first one whenever possible. However, if you need to have state or want to use the lifecycle methods you will have to use React.Component.

Can't find variable React - Even though it is not used in file

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