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';
Related
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.
Hi i added react router to my project but it wont serve me path others than '/'
import React from 'react';
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import store from './reducers'
import Header from './header/header'
import Toolbar from './toolbar/toolbar'
import Createprocess from './createprocess/createprocess'
import Hider from './createprocess/hider'
ReactDOM.render(<Provider store={store}>
<Router>
<Route path='/module' component={Createprocess} />
</Router>
</Provider>,
document.getElementById('root')
)
ReactDOM.render(<Header/>,document.getElementById('header'))
ReactDOM.render(<Toolbar/>,document.getElementById('tools-bar'))
this my createprocess component code :
import React, {Component} from 'react'
import Actionsbar from './actionsbar'
import Processdisp from './processdisplay'
import DefineTask from './taskdefinition'
import store from '../reducers'
export default class Createprocess extends Component{
render(){
return (<div id='create-process' className='default app-container'>
<Actionsbar/>
<Processdisp data={store.getState().processState}/>
<DefineTask/>
</div>)
}
}
when i add the module path i can't get it from my browser even if i used many combination
but the only time react renders is when i use th '/' path and i call my html page on the browser
i'm web designer i started webdevelopping recently and it seem that i can't get my head around those paths and serving pages, help please (i'm using babel/webpack).
Wrap the route in a Switch component from react router
I found the solution, it seems that because there is no server serving pages i should have user HashRouter istead of BrowserRouter
I'm having trouble rendering. Here is how I set up my files so far. First here is the app.js file:
import React from 'react';
import MainPage from './MainPage';
export class App extends React.Component {
render() {
return (
<div>
<MainPage />
</div>
)
}
}
Here is the second associated file called index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(<App />, document.getElementById('app'));
Lastly in the MainPage component I'm importing this:
import App from "./app";
Is there a reason why this doesn't work with the file structure set as is? I know I can just put the ReacDOM.render in the app.js file as an alternative, but due to unit testing purposes, the file structure has to be similar to this.
You're trying to import the default export of the file app.js with this :
import App from "./app";
But you're using a simple export in you app.js file :
export class App extends React.Component {
So to import this class the syntax is (like in your index.js) :
import { App } from "./App";
Btw in your case you're importing a parent component in the child, you shouldn't do that.
You have already imported App.js and rendering it via ReactDOM. You don't need to import it in MainPage as App is the parent of your MainPage. Currently your import statement in MainPage is wrong. Even if it was correct, you would get into cyclic imports. App -> MainApp -> App -> MainPage and so on.
MainPage should render your usual content. Change MainPage to something:
import React from 'react';
export default class MainPage extends React.Component {
render() {
return (
<div>
<h1>This is Main Page</h1>
</div>
)
}
}
Note default after the export.
I have to import multiple files in my App.js . My folder structure is
/src
/components
layout.js
App.js
index.css
index.js
Here i want to import layout.js file from App.js. My code is
import React from 'react';
import Layout from './components/layout';
class App extends React.Component{
render(){
return (
<div>
<p>Hi</p>
</div>
);
}
}
export default App;
In my code, how to import layout.js file ?
Ideally, your layout is a component which you can simply import into your main. One good pratcise when creating new component is to create a separate folder inside components folder and create index.js. By doing so you can import components like below:
/src
/components
/layout
index.js
App.js
index.css
index.js
import React from 'react';
import Layout from './components/layout';
class App extends React.Component{
render(){
return (
<div>
<p>Hi</p>
<Layout/>
</div>
);
}
}
export default App;
It looks like you imported Layout correctly. If it is not working, perhaps you forgot to export default Layout in layout.js?
You need to use webpack's resolve.extensions to import file paths that don't end in .js
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