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
Related
I'm building a React-Django application, and on my App component, I'm getting an issue on the final line with my render(<App />, appDiv).
Please can someone tell me what I'm doing wrong? I have the necessary modules imported, and this worked on my previous project. I am aware that Function-based components are better, but I'm more experienced with Class-based.
Error:
Code:
import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="center">
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);
Thanks,
DillonB07
TypeError expanded:
Try to replace:
import { render } from "react-dom";
with
import ReactDOM from "react-dom";
And use ReactDOM.render instead of just render
I am adding some React scripts to my HTML templates and I am trying to separate React code in separate files. I have not started a full-blown React app. I am therefore trying to import smaller components from other files into a "main" React script.
Here is my directory structure:
react
----components
--------Tag.js
--------Definition.js
----Definitions.js
Here is my code for Definitions.js (the "main" React script):
import Definition from './components/Definition';
class Definitions extends React.Component {
...
render() {
return <Definition definition={definition} />;
}
}
ReactDOM.render(<Definitions />, document.querySelector("#definitions"));
Here is my code for Definition.js:
import Tag from './Tag';
class Definition extends React.Component {
...
render() {
return <Tag tag={tag} />;
}
}
export default Definition;
This code is not rendering any component. What am I doing wrong?
Beforehand you need to render the React application to the actual DOM using ReactDOM.render, so you need to import it and target a valid element:
import React from "react";
import ReactDOM from "react-dom";
function App() {
return <>React App Example</>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
// target a valid element in index.html
<div id="root"></div>
Thats the reason why you not getting any errors, you don't even initial the application.
Then its just a normal import-export.
Please refer to React docs how to initial a React app.
Button.js
import React, { Component } from 'react';
class Button extends Component {
render() {
// ...
}
}
export default Button; // Don’t forget to use export default!
DangerButton.js
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file
class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;
From: https://create-react-app.dev/docs/importing-a-component/
I am trying to pass a property through react components and display the text property of that element I get know JSX sytax errors but I get Parsing error: Unterminated JSX contents.When attempting to display the text from the property but instead it's blank as if its not reading the property
Components.js
import React from "react"
function Components(props) {
return (<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>)
}
export default Components
App.js
import React from 'react';
import Component from "./component"
function App() {
return (
<div>
The Big World
<Component text="PROPERTY TEXT"/>
</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'));
Expecting to see the property text to be pass through the Component property and displayed on the page
All looks clear. Try to add semicolon an the end of return statement:
function Components(props) {
return (
<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>
);
}
Ran all this in a codesandbox and other than style not being defined it all renders and runs fine. I also don't think it is an error with a typo in your posted code (the file is actually components.js and not component.js), because that shouldn't transpile at all since it can't find that file.
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 have already posted about react-file-viewer, but I've got another problem. I created a new react application with react docs as reference
And I tried to consume react-file-viewer component, like this :
import React, { Component } from 'react';
import FileViewer from 'react-file-viewer'
const file = '../src/test.png'
class App extends Component {
render() {
return (
<FileViewer
fileType="png"
filePath={file}
/>
);
}
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
I ahve specified the correct path to the image.
And on the screen I have just a spinner:
This is what i see in the console logs:
Needed help in solving this issue, Thanks in advance.