_Header (cshtml)
<div id="Help"></div>
export default class Help {
ReactDOM.render(
<Help/>,
document.getElementById('Help')
);
}
Help.js (component)
}
My goal is to render a help button on header.
I've Created div tag with id help-modal , and a
component rendering help button. I am connection those two in help.js
by ReactDOM.render(.........);
when I do npm run dist and dotnet run , and see the browser
I couldn't see the button on header . Can any one help on this please ??
You are calling ReactDOM.render within a React component that doesn't get rendered.
Call ReactDOM render outside of the class definition for help
To render your button to the screen:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
class Help extends Component {
render() {
return (
<div>
<RaisedButton label="Help"/>
</div>
);
}
}
ReactDOM.render(
<Help />,
document.getElementById('Help-modal')
);
That's it.
To avoid confusion should try and give your components meaningful names. Naming both of them Help can get confusing when you are trying to import one into another (which in this case isn't necessary).
If you indeed wanted to nest the Help component in an app.js/index.js root level component, it would be necessary to export the element, so the class declaration line would be modified as follows:
export default class Help extends Component {
then in your parent component, you'd need to import it with something like:
import Help from './components/Help';
UPDATE:
just noticed there was a type with:
import RaisedButton from 'material-ui/RaisedButon';
it's missing a 't' in RaisedButton!
should be:
import RaisedButton from 'material-ui/RaisedButton';
You need to export the Help Component
Help.js
import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButon';
class Help extends Component {
render() {
return (
<div>
<RaisedButton label="Help"/>
</div>
);
}
}
export default Help;
And no need to create a React Component to render the HelpComponent
Helppage.js
import HelpComponent from '../components/Help';
import ReactDOM from 'react-dom';
ReactDOM.render(
<HelpComponent/>,
document.getElementById('Help-modal')
);
Related
This is really quite weird. My (App.js) file recognizes jsx syntax fine when App is a function,
however when I convert it into a class it doesn't recognize jsx at all.
Here's the code:
recognizes jsx when App is a function
import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
function App() {
return ( <h1></h1>
);
}
export default App;
but when I convert it to a class it doesn't recognize jsx:
import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
import { Component } from 'react';
class App extends Component {
return ( <h1></h1>
);
}
export default App;
I was following a tutorial, and in the tutorial (App) was a class and it worked just fine.
Any help would be much appreciated.
When using a class component, the return statement needs to be inside a render method, like this:
import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
import { Component } from 'react';
class App extends Component {
render() {
return (<h1></h1>);
}
}
export default App;
Trying to split some HTML chunks by dividing the HTML in smaller pieces, located in the components folder. (I know, HTML is not really html, it is JSX).
The outcome I am trying to achieve is to have the imported component [Navigation] to render its content.
I do understand that there might be tools for the code splitting.
Question: Why doesnt the code render the div navigation content?
Navigation.js
import React from 'react';
export default function Navigation() {
return (
<div className="navigation">
<ul>
<li>
Google
</li>
</ul>
</div>
);
}
App.js
import React from 'react';
import './App.css';
import Navigation from './components/Navigation';
class App extends React.Component {
render() {
Navigation();
return (
<div>
Hello from component - Class!
</div>
);
}
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
Your component is not rendering because u call de function outside the return statement.
For a component render, you need to return the component inside the
render function;
Example:
render () {
return <Component/>
}
When u call this:
render() {
Navigation(); // see, the navigation is outside the return statemente
return (
<div>
<p>Hello from component - Class!</P>
</div>
)
}
try this:
import React from 'react';
import './App.css';
import Navigation from './components/Navigation';
class App extends React.Component {
render() {
return (
<div>
<Navigation/>
<p>Hello from component - Class!</P>
</div>
)
}
}
export default App;
I'm trying to create a React component for a navigation bar.
This component I'd like to import from a separate file into my App.js.
Currently, the component should just return a simple 'Hello world' paragraph, but I have trouble getting this to work.
I have written the following code into a file located at src/components/navbar.js:
import React from 'react';
export default class navBar extends React.Component {
render() {
return (
<p>Hello world.</p>
)
}
}
Now I'd like to import this component from my src/App.js, which looks like this:
import React, { Component } from 'react';
import './App.css';
import navBar from './components/navbar.js'
class App extends Component {
render() {
return (
<navBar/>
);
}
}
export default App;
If I compile and open the site, nothing's there, which confuses me.
I'd be very thankful for any help!
EDIT:
It's been suggested that the problem is that <App /> is not being rendered anywhere. I don't believe that's the case, since there's another file being created by default (index.js), which looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
I have also tried putting the paragraph (and the entire navbar) directly into src/App.js.
After compiling I could see the expected results in the browser, so the problem should lie with the exporting/importing.
In JSX, lower case tags are considered to be simple HTML/SVG elements. You can use lower case only if you use accessors (so with a dot like bla.blabla).
You can read about it here for example.
So in your case you must change the class name navBar to NavBar and then in the render method:
render() {
return (
<NavBar/>
);
}
Here is a full working example:
** Note: NavBar.js shoud start with a Capital letter.
App.js
import React from "react";
import ReactDOM from "react-dom";
import NavBar from "./components/NavBar";
function App() {
return (
<div className="App">
<NavBar />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
NavBar.js
import React from "react";
export default class NavBar extends React.Component {
render() {
return (
<div>
<p>Hello world.</p>
</div>
);
}
}
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of App.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
registerServiceWorker();
//App.js
import React, { Component } from 'react'; //import logo from
'./logo.svg'; import './App.css';
import HeaderComponent from
'./Components/HeaderComponent/HeaderComponent';
import FooterComponent from './Components/FooterComponent/FooterComponent';
import Main from './Components/Main/Main';
const App = () => {
return(
<div>
<HeaderComponent />
<Main />
<FooterComponent />
</div> ) }
export default App;
I think the error is very clear, one of your imports is not importing a valid react component.
To fix this, make sure all your imports are exporting a react component, either a class or a function for stateless components.
you might have something like the following for each component.
export default HeaderComponent extends Component { ... }
export default Main extends Component { ... }
export default FooterComponent extends Component { ... }
I'm just starting with react.js and create-react-app application so excuse me if this is an obvious question.
My 'src' folder structure is like this:
scr/
....components/
........ComponentA.jsx
........Componentb.jsx
....styles/
........ComponentA.css
....App.css
....App.js
....App.test.js
....index.css
....index.js
...OTHER DEFAULT FILES
In App.js I have this:
import React, { Component } from 'react';
import ComponentA from './components/ComponentA';
class App extends Component {
render() {
return (
<div className="App">
<ComponentA />
</div>
);
}
}
export default App;
In ComponentA I have this:
import React, { Component } from 'react';
import './styles/ComponentA.css';
import ComponentB from './components/ComponentB';
class ComponentA extends Component {
render() {
return (
<div className="componentAStyle">
<ComponentB />
</div>
);
}
}
export default ComponentA;
In ComponentB I have this:
import React, { Component } from 'react';
class ComponentB extends Component {
render() {
return (
<div>
<h1>Hello from ComponentB</h1>
</div>
);
}
}
export default ComponentB;
What I'm trying to do is just import ComponentB from ComponentA and also import the style for ComponentA but all this fall showing the following message:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './styles/ComponentA.css' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
And if I remove the css import there is another error message:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './components/ComponentB' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
How can I import another component from another component and its respective css?
Thanks.
You need to make the paths you are importing are relative to the current location of the file doing the import.
The correct imports would be
Component A
import React, { Component } from 'react';
import '../styles/ComponentA.css';
import ComponentB from './ComponentB';
You can see this working at https://glitch.com/edit/#!/trashy-unicorn.
(Click on Show Live in top left hand corner.)
Currently what is happening with your error is
import ComponentB from './components/ComponentB';
is is looking in the path
src/components/components/ComponentB
which does not exist and so gives you an error. Same thing is happening with your styles.
Hope this helps.