ReactDOM.render() unresolved - javascript

import React from 'react';
// import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/dist/react-dom.min';
import {Alert} from 'reactstrap';
class AlertLine extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
onDismiss = () => {
this.setState(
{
visible: false
}
);
};
render() {
return (
<div>
<Alert color="success" isOpen={this.state.visible} toggle={this.onDismiss}>
<strong>Success!</strong> You successfully read this important alert message.
</Alert>
</div>
);
}
}
ReactDOM.render(
<AlertLine/>,
document.getElementById('root')
);
ReactDOM.render() works just fine with 'react-dom' for development. However, as soon as I try import minified 'react-dom.min' instead of 'react-dom', render() goes unresolved and nothing happens. I can't find render() from content assist(ctrl + space) neither.
I've installed react#15.6.1 and react-dom#15.6.1 with npm and they're on 'npm list'. Then I tried reinstall them but that didn't work.

In your case, you have to use import ReactDOM from 'react-dom' because import doesn't mean "file import", it means "ES6 module import".
To minify your bundle file, try uglifyjs-webpack-plugin (if you're using webpack) or minifyify (if you're using browserify)

Non-module
Node modules loaded with require / import must populate an exports object with
everything that the module wants to make public.
stackoverflow.com/a/14914442/6836839
react-dom.min.js is used as a simple js library, you can't import / require
Install
Since you can't require / import, you need to load it as a normal js script:
<!-- index.html -->
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>
Use
// Just call it...
ReactDOM.render(component, document.getElementById('root'))
Note
If you load React from a tag, these top-level APIs are available on the ReactDOM global.
If you use ES6 with npm, you can write import:
import ReactDOM from 'react-dom'
If you use ES5 with npm, you can write:
var ReactDOM = require('react-dom');
https://facebook.github.io/react/docs/react-dom.html

Import name is not same as the component name which you are exporting.
When you Import a component in a common Index.js file and you are Importing a component(import Header from './components/Header';).
Header should be different from export default headerComponent; name

Related

how to import json data file and use it in a react component?

I'm new to react and confused about how to import, export, and render components. I have a fakeData.json file located in the same src/components folder as the component I'm trying to render. Here is the index.html
<body>
<div id="root"></div>
</body>
Here is the index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Here is the app.js
import './App.css';
import './components/WatchlistTable.js';
import 'rsuite/lib/styles/index.less';
function App() {
return <WatchlistTable />
}
export default App;
Here is where I get confused in src/components/WatchlistTable.js. It is a rsuite table. I try to import the fakeData.json file, which is located in the same components folder, like this:
import fakeData from 'fakeData.json';
But it gives error like "Module not found: Can't resolve fakeData.json". So I try another way.
import {fakeData} from 'fakeData.json';
But it gives same error. In the Visual Studio Code editor I notice message like: "there is no fakeData.json in the public folder."
So I make a copy and put it there. Now VSC error disappears but other error remains.
The fakeData.json file looks like this:
[
{
"id": 1,
"avartar": "url/128.jpg",
blah blah blah...
},
]
So I try another way. I change fakeData.json in components folder to fakeData.js and add
const fakeData = [
But same error. So I try:
const fakeData = require('fakeData.js');
But same error. Suggestions?
EDIT: Per Ridik, I now have this in WatchlistTable.js
import React from 'react';
import fakeData from 'fakeData';
And I have
export default fakeData;
at the end of the fakeData.js file. But still getting same error:
./src/components/WatchlistTable.js
Module not found: Can't resolve 'fakeData' in
'C:\Users\Greg\Projects\react-demos\backtester-rsuite\src\components'
You can not directly import your json array from the JSON file in react. To achieve that you must store your JSON array in a variable and then export default your JSON array. By Doing this you can easily import it in your component.
FakeData.js
const fakeData = [
{
"id": 1,
"avartar": "url/128.jpg",
blah blah blah...
},
]
export default fakeData // you must export it to use in another file.
Then in any component use it like
import fakeData from './Destination_of_file/fakeData.js'
or
Way 2 // recomended
import fakeData from './Destination_of_file/fakeData'
In your import statement you have to provide the relative path of the file. Otherwise it looks into public directory in your project. And also instead of using named import syntax use default import syntax. i.e., in your case use below statement to import that json file in your component.
import jsonFile from "./fakeData.json";

`npm init react-app` leads to `'React' is not defined no-undef` when changing function component to class component

I used npm init react-app appname which creates, among other files, App.js. In that file is a function component:
function App() {
return (
<SomeJSX />
);
}
I edited the function component into a class component, like so:
class App extends React.Component{
render() {
return (
<TheSameJSX />
);
}
}
Now, when I run npm start, I get an error:
Failed to compile
src/App.js
Line 4:19: 'React' is not defined no-undef
Search for the keywords to learn more about each error.
I imagine I need to add some setting somewhere that will automatically include React without me needing to explicitly import it at the top of every file. How do I do this? And why does this npm package not do that by default? I know a bit about javascript (and html and css), and have read a bit about React, but I am completely unaware of how npm or webpack works.
Thanks in advance!
EDIT: To clarify, I know how to import stuff with javascript. I can easily add import React from 'react'; to the file and make it work. However, I find it difficult to believe that adding an import statement to every single javascript file is the recommended method, and I don't understand why this example app wouldn't be set up so as to avoid having to do that. Am I mistaken? Do I really need to manually import the same thing over and over again within the same project? Could I set a global variable to React so that I can use it from wherever?
In your default function component you're not extending any classes and just writing a simple function
function App() {
return (
<SomeJSX />
);
}
In class component, you're in fact extending the Class Component by React.Component provided by React default export object and hence you must import it from the package
//only use one of these
import * as React from "react";
import {Component} from "react"; // you can directly extend without writing `React.` with this import
import React from "react"
So your code would be
import React from "react";
class App extends React.Component{
render() {
return (
<TheSameJSX />
);
}
}
Any of the above imports should be fine with a preference to the first and second one.

get React' must be in scope when using JSX error when import component

I am writing this code and import React and Component in app/js file and also try to import app.js to index.js. but I get this error ' 'React' must be in scope when using JSX in index.js
app.js :
import React ,{Component} from 'react';
class App extends Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h1>Hello Ashkan</h1>
</div>
);
}
}
export default App;
index.js
import ReactDOM from 'react-dom';
import App from './app'
ReactDOM.render(<App/>,document.getElementById('root'));
I got this error
./src/index.js
Line 6:'React' must be in scope when using JSX react/react-in-jsx-scope
You are using JSX in here (<App />):
ReactDOM.render(<App/>,document.getElementById('root'));
Whenever you use JSX React should be in scope.

import all variables from a file.js with an " import './file.js' " summoning

I'm working with the import function, I wish use an import like for css, I mean "import './file.css'" then all the css attributes are diffused in the file. I have tried the same with ReactJS but it fails.
My expectation is to imitate the css import for js files, but it doesn't work.
Here my sandbox
Here is the relevant code:
import React from "react";
import ReactDOM from "react-dom";
impoprt sample from "./sample"
import "./exported.js";
import "./styles.css";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{sample[2]}
{text1}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I'm getting the error at the line when no using the star's import:
{text1}
I'm wondering how make something similar. Any hint would be great,
thanks
The offending code in your sandbox is: import "./exported.js";
One source of confusion is that you are using Create React App, which hides away the webpack magic which allows you to import your CSS files as import "./styles.css";.
This is not how module exports and imports work. I would recommend reading the section on exporting and importing details on exploringjs.com
What you are doing is essentially an empty import, i.e. you are not importing anything, just executing the file.
Empty import: only loads the module, doesn’t import anything. The
first such import in a program executes the body of the module.
import 'src/my_lib';
But here are various ways to import something in a nutshell.
Assumption: your ./exported.js file has the following exports:
// some other code
export { text1, text2 };
export default config;
Then you can import them in various formats
// import only the default export
import config from './exported.js';
// This only imports the export qualified with default, it ignores others
// i.e.
console.log(config); //works
console.log(text1); // fails
console.log(text2); // fails
// import everything the module exports, but as a namespace
import * as myLib from './exported.js';
// usage: all named exports are properties of the myLib object
console.log(myLib.text1); // works
console.log(myLib.text2); // works
console.log(myLib.config); // should not work, unless you have also exported config as a named export
// import only what you need
import { text1, text2 } from './exported.js';
console.log(text1); // works
console.log(text2); // works
// you can also rename them
import { default as x, text1 as a, text2 as b } from './exported.js';
console.log(x); // works --> config
console.log(a); // works --> text1
console.log(b); // works --> text2
You need to do import defaultExport from 'moduleName'; so you can use defaultExport in your code.
Doing import 'moduleName'; will only run the code in the module but not import anything (see MDN for more info)
In your sandbox, doing import sample from 'sample.js'; would do it.
The problem in your code cause a breaking a import, that didn't let include your css file, the problem is importing export.js and sample.js it must include using a correct Destructuring, e.g.:
import React from "react";
import ReactDOM from "react-dom";
import { text1, text2 } from "./exported.js";
import sample from "./sample.js";
import "./styles.css";
Here complete sample Code Sample.
More info about import statement: import
Destructuring assignment statement: destructuring assignment .
Best regards.

import does not work in subfolder

When I use
import React from 'react';
import ReactDOM from 'react-dom';
require('./styles.css');
import App from './components/App';
import Test from './components/Test';
ReactDOM.render(
<App />,
document.getElementById('root')
);
webpack found the Test module however, in app component:
import React from 'react';
import Test from './components/Test';
export class App extends React.Component {
render() {
return (
<div className='container'>
<Test />
</div>
)
}
}
import Test does not work it says:
ERROR in ./src/components/App.js
Module not found: Error: Can't resolve './components/Test'
it works when I use require though
var Test = require('./Test');
You are importing from a wrong directory. From looking at your first code, you have both App and Test in the same components directory. The error comes because your import looks for a components folder inside the components folder. So if you want it to be imported into App, you should be specifying the relative path from your current folder. i.e) ./
Try this in your App class or App.js file
import Test from './Test';

Categories