I'm a very beginner in React. I created a general React Component in a JSX file and then I intend to import it in another JSX file. However, when I import the following error is returned ReferenceError: require is not defined.
This is my general object:
class Footer extends React.Component{
render(){
return (
<div>Footer</div>
);
}
}
export default Footer;
And this is the other JSX file:
import Footer from './generalPageFooter.jsx';
const contentNode = document.getElementById('div-content');
class AdminPanel extends React.Component{
render(){
return (
<div>
<h3>Sample Text</h3>
</div>
);
}
}
class AdminPage extends React.Component{
render(){
return (
<div>
<h3>Sample Text</h3>
</div>
);
}
}
ReactDOM.render(<AdminPage />, contentNode);
In the HTML file the code is the following:
<body>
<div id="div-content">
</div>
<script type="text/babel" src="/adminPage.jsx"></script>
</body>
You cannot directly run ES6/JSX on the browser. They need to be transpiled to "pure" JS then browser can understand and execute them.
Take a look on Babel.
P/S: If you are starting with React, I suggest create-react-app from Facebook.
Related
So I realized that now when we create a react app, it is by default in functional. So I was wondering if there was any way to change that into classes.
You can chang your existing functional component to class based component like this
export default class App extends React.Component {
render() {
return <h1>Hello</h1>;
}
}
I would suggest you to go through react documentation which has everything explained very well with working excercises.
Check it -
React documentation
if your App.js code looks like this:
import React from "react";
export default function App() {
return (
<div className="App">
<h1>REACT APP</h1>
</div>
);
}
You can turn it into a class based component by importing Component and a bit of refactor like below:
import React, { Component } from "react";
export default class App extends Component {
render() {
return (
<div className="App">
<h1>REACT APP</h1>
</div>
);
}
}
The class App will extend Componment
Your JSX will be returned in the render() function of your class
I have header.htm and footer.htm files and I would like to add these two files into my reactjs app. I tried to create header.htm as a component and render it in my app.js but it display as a string on the top not a page. ie. http://mydomain/include/header.htm. How do I solve this problem?
import React, { Component } from 'react';
class Header extends Component {
createMarkup()
{
return { __html: "https://mydomain/include/header.htm"};
}
render(){
return (
<div dangerouslySetInnerHTML={this.createMarkup()} ></div>
);
}
}
export default Header;
app.js
class App extends Component {
render(){
return (
<Header />
)
}
}
I need to download a HTML file in PDF format. I tried some plugins but that doesn't work. I need help.
import React from 'react';
class App extends React.Component {
htmlToPdf()
{
//code need to be written
}
render() {
return (
<div>
<button onClick={this.htmlToPdf}>download</button>
</div>
);
}
}
export default App;
I have a codepen. I need it to literally say "Hello world" with React. I can't get the code to render.
I have Babel set as the pre-compiler.
I have both React and ReactDOM linked.
Here is all of the HTML:
<div id="app"></div>
Here is all of the JS:
class App extends React.Component {
render() {
<div>
<p>Hello!</p>
</div>
}
}
ReactDOM.render(<App />, document.getElementById('app'));
I need to get this going for an interview in an hour or two. Just can't get it working here. Help!
You forgot to return the component in render:
render() {
return (
<div>
<p>Hello!</p>
</div>
);
}
You need to return the content from the render function to display.
class App extends React.Component {
render() {
return (
<div>
<p>Hello!</p>
</div>
}
}
My react codepen is not showing anything.
JS
class HelloWorld extends React.Component {
render() {
return (<div>Hello World!</div>);
}
}
var app = document.getElementById("mainapp");
React.render(<HelloWorld />, app);
HTML
<div id='mainapp'></div>
I imported React and ReactDOM trough a cdn. And if I type React/ReactDOM in the console it is imported correctly. This code doesn't show any errors yet I see nothing. I tested this on multiple browsers (chrome, firefox, icecat) but still no results... I'm using bable is a preprocessor.
ReactDOM.render not React.render.
class HelloWorld extends React.Component {
render() {
return <div>Hello World!</div>;
}
}
var app = document.getElementById("mainapp");
ReactDOM.render(
<HelloWorld/>,
app
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id='mainapp'></div>
Your component needs to return an element instead of a naked string. Try to modify it to <div>Hello World!</div>
Two things
You need to return a valid react element
Use ReactDOM.render instead of React.render
Snippet
class HelloWorld extends React.Component {
render() {
return <div>"Hello World!"</div>
}
}
var app = document.getElementById("mainapp");
ReactDOM.render(<HelloWorld />, app);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="mainapp"></div>
Also see this answer on why you should use ReactDOM
react vs react DOM confusion