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.
Related
After using Vue and Nuxt for more than a year, I decided to learn React and Next.js and almost immediately noticed the horrible Developer Experience.
Every stylesheet and component needs to be imported so there's always bloated import hell at the start of each component.
Not to mention if you need an extra library as you can't hook into any global object like Nuxt's this.$plugin option.
Is there some package to manage these imports for Nextjs? As far as I know, everyone who uses it doesn't mind it and that's what surprises me.
This Question may come as an insult to React and it is, but I just want at least one reason to join the hype-train as to why React is more popular.
create a file in pages directory named it _doucument.js or _document.ts (for TypeScript) and import React in it like below :
(below codes are TypeScript)
import React from 'react';
import Document, {
DocumentContext,
Head,
Html,
Main,
NextScript,
} from 'next/document';
export default class CustomDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang="en">
<Head>
<title>Your title</title>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
and any more doesn't require that import React in any components.
enter code here
export default connect(
mapStateToProps,
{ fetchPosts, fetchUsers }
)(PostList);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
./src/components/App.js
Cannot find file: 'Postlist.js' does not match the corresponding name on disk: '.\src\components\PostList.js'.
Instead of using conventional export before class name I exported it through the connect function of react-redux. I am new to redux and still don't completely understand how the connect function works.
> import React from "react";
import PostList from "./PostList";
const App = () => {
return (
<div className="ui container">
<PostList />
</div>
);
};
export default App;
I know this is a late reply, but I managed to resolve the problem. The problem was that I was hosting it on Heroku and I hadn't done git add . or git add .\src\components\PostList.js in your case.
Although your code is incomplete, it seems a typo: you are importing Postlist (with lowercase "l") and exporting PostList (with uppercase "L"). You need to import PostList with uppercase in App.js.
import PostList from './PostList';
1) As I can see that both App.js and PostList.js are in the same folder user can
use the above line of code will work fine.
2) You should Import the component as you have exported. ( Import / export case sensitive)
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
I just started working in ReactJS and I was going through a basic React tutorial.
I have created a project and added Babel, React, ReactDOM, Webpack, Express as the dependencies.
Now I have this Counter.js :
import React, {Component} from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {count: 0};
}
render() {
return (
<button onClick={() => {this.setState({ count: this.state.count + 1 });}}>
Count: {this.state.count}
</button>
);
}
}
export default Counter;
And the main.js (which is defined as the entry point of the application in webpack.config.js file):
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter.js';
ReactDOM.render(<Counter/>,document.getElementById("warbox"));
The PROBLEM is that when I start up the application, the component is not rendered on the page AND also the React DevTool Chrome extension doesn't light up (if that makes any sense).
Can't seem to figure out the problem exactly. Any help is appreciated. Apologies if its too basic.
The index.html :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="warbox"></div>
<script src="bundle.js"></script>
</body>
</html>
UPDATE : Solved. I think I should update what made it work for others to see. Heres the problem I had : Apparently the bundle.js needs to be updated by running the webpack explicitly. After making the changes, I had to stop the server and run the webpack and restart the server. It WORKED!
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