I want to try using React in CodePen but I cannot get it set up.
my JS looks like this:
class Application extends React.Component {
render() {
return <div>
<h1>Hello, ES6 and React!</h1>
</div>
}
}
ReactDom.render(<Application/>, document.getElementById('app'));
my html looks like this:
<div id="app"></app>
I import React and ReactDom as in the image below but I get an error 'ReactDom is not defined'.
Does anyone know how to set this up?
https://codepen.io/goughjo02/pen/ajGZoL
It's a typo error. You should use ReactDOM instead of ReactDom.
Related
I'm a newbie here so apologies for what might be a very elemental question.
I am trying to fiddle with different ways to import components in React by following a tutorial but I can't seem to make it work. There must be a simple tweak that I am sorely missing.
I am trying to create export a component (Person2) to another JS (App)
Person2.js
import React from 'react'
import ReactDOM from 'react-dom'
function Person2(){
return (
<div>
<h1>Millie</h1>
<p>PERSON 2</p>
</div>
);
}
/*
ReactDOM.render(
<div>
<h1>Hello World!</h1>
</div>,
document.getElementById('#p2')
);
*/
//ReactDOM.render(<Person2 />, document.getElementById('App'));
ReactDOM.render(<Person2 />, document.querySelector('#p2'));
App.js
import React from 'react';
import './css/App.css';
import './css/w3.css'
import Person from './Person'; // Import a component from another file using class with default export
import './Person2'; // Import a a component from another file using ReactDom.render
function App() {
return (
<div className="App">
<header className="App-header">
<p>this is the header</p>
</header>
<body>
<div class="w3-row">
<Person name="Max" age="28"/>
<Person name="Ann" age="18"/>
<div id = "p2"></div>
</div>
</body>
</div>
);
}
export default App;
Any idea where I went wrong?
I'm getting an error "Error: Target container is not a DOM element."
ReactDOM.render is usually used only for rendering your root component, I don't think you should use it in that case. With that said, the problem is the order the code is executed. You try to render your Person2 component in a node that hasn't been yet rendered, thus you get that error
Unless you have a very strange use case, you should be using export not ReactDOM.render for this example.
In Person2, change to this:
//ReactDOM.render(<Person2 />, document.querySelector('#p2'));
export default Person2;
Then to use it, in App change to this:
import Person2 from './Person2'; // for default export
...
<Person name="Ann" age="18"/>
//<div id = "p2"></div> *** remove this ***
<Person2 /> // Use like this
If for whatever reason your app requires the use of ReactDOM.render here, I'd add a check for safety to make sure the element exists first.
if (!!document.getElementById('p2')) {
ReactDOM.render(<Person2/>, document.getElementById('p2'));
}
I'm not sure if I'm explaining what I want right. Here's an example of what I'm trying to do:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class ExampleChild extends Component {
render() {
return (
<p>Hello!!</p>
);
}
}
class ExampleParent extends Component {
render() {
return (
<div>
<ExampleChild />
Here's the ExampleChild code:
{ExampleChild.toString()}
</div>
);
}
}
ReactDOM.render(<ExampleParent />, document.getElementById('root'));
An get the following output to the DOM, with all the correct indentations and spaces of the actual code:
Hello!!
Here's the ExampleChild code:
render() {
return (
< p >Hello!!< /p >
);
}
If the child component is just a stateless, functional component, I can do a .toString(), but it returns it in pure Javascript. It doesn't return it in the JSX format, or with the original returns, and indentations. I would also like to be able to do this with React class components as well. Is there maybe a library that does this?
You could use renderToStaticMarkup from react-dom/server, but only for the resulting HTML markup.
import React from "react";
import { render } from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import Hello from "./Hello";
const App = () => (
<div>
<p>Component:</p>
<Hello name="CodeSandbox" />
<p>As HTML:</p>
<pre>{renderToStaticMarkup(<Hello name="CodeSandbox" />)}</pre>
</div>
);
render(<App />, document.getElementById("root"));
Check it out on CodeSandbox.
If you want the whole JSX file, you could import with something like raw-loader and print it inside pres as well.
I ended up using the react syntax highlighting library react-syntax-highlighter
I created an npm script to make copies of my react components and exported them as template literals. Which, then would be displayed via react-syntax-highlighter.
Working example: ryanpaixao.com
I didn't go with raw-loader because I didn't want to eject my create-react-app. (I would've had to in order to configure webpack) Also, it seems that I would've had to set all .js files to be imported as strings (maybe there's a way around that).
I am getting this error for a very basic example of ReactJs.
index.js:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route } from 'react-router';
class App extends Component {
render() {
return (<h1>Hi</h1>);
}
}
render(<App />, document.getElementById('app'));
What am I missing here? Thanks.
You need an element with an ID of app in your HTML file. Typically, you'd just have an empty div in the body.
<body>
<div id="app></div>
</body>
For more info see here
The code you have posted seems fine. Most likely the problem is in with HTML part.
For a starting point, you can take a look at: https://codesandbox.io/s/74rq1z90vj
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
I'm trying to get familiar with react and web development. And made my first steps.
Right now I'm using react with react-bootstrap & css modules.
In the main.html I had to include the bootstrap.css file.
I would like to replace my searchbar with react-autosuggest
It seems like bootstrap is breaking the style of react-autosuggest. Is it possible to combine both? Or is it a bad practice?
That is my code where I tried to use both searchbars:
import React, {Component} from 'react';
import styles from './App.css';
import Search from "./Search/Search"
import SearchAuto from "./SearchAuto/SearchAuto"
class App extends Component {
render() {
return (
<div>
<div className={styles.App}>
<h1>Title</h1>
<Search onSearch={this.searchForAddress}/>
</div>
<SearchAuto onSearch={this.searchForAddress}/>
</div>
);
}
}
export default App;
Any help would be greatly appreciated!