I want to use react-awesome-reveal in my typescript project but the animations doesnt seem to work. However, it works when I use react-reveal. Please advice on what I am missing.
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import { Fade } from "react-awesome-reveal";
import ReactRevealFade from "react-reveal/Fade";
import "./style.css";
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<div>
<Fade>
<Hello name={this.state.name} />
</Fade>
<ReactRevealFade left>
<Hello name={this.state.name} />
</ReactRevealFade>
<p>Start editing to see some magic happen :)</p>
</div>
);
}
}
render(<App />, document.getElementById("root"));
Stackblitz Code: Link
Any help is appreciated.
Can be fixed by wrapping the component inside a div.
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 keep getting the error "Module not found: Can't resolve './components/dndEditor' in '/Users/bob/Documents/GitHub/Active/DevComponents/DragDropComponents/src'"
I have scaled the code right back to the basics and it still is not working I must be doing something fundamentally wrong (I am more used to working with functional components than classes). The urls are pointing the files as visual studio is autocompleting the URL.
import React from 'react';
import ReactDOM from 'react-dom';
import DndEditor from './components/dndEditor';
class App extends React.Component {
render() {
return (
<div>
<DndEditor />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
and the class is
import React from 'react';
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>gfd </h1>
</div>
)
}
}
Code looks fine there might be something wrong with the file name .
Check the below link of codesandbox . It is working there
https://codesandbox.io/s/laughing-shaw-v210y
index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import DndEditor from "./DndEditor";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<DndEditor />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
DndEditor.js
import React from "react";
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>This is DndEditor </h1>
</div>
);
}
}
React project can't detect any change in app.js file
This is my app.js file:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>I'm a react app!</h1>
</div>
);
}
}
export default App;
This is the result
Try putting the text I'm a react app! inside a div.
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
} export default App;
You probably need to use ReactDOM to help tell app where to render your component. For instance, if you create a div in your HTML like <div id="root"></div>, then you could use the following code:
import React, {
Component
} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Also note that when you return your render, the result should be wrapped in a single tag.
I've got a simple React App going on. My index.js file looks, of course, like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Going deeper, my App.js file declares an App extends Compoennt class, which contains my to-be-rendered elements and their functions:
import React, { Component } from "react";
import logo from "./SmartTransit_logo.png";
import MyButton from "./components/MyButton";
import "./App.css";
import { isWallet, helloWorld } from "./services/neo-service";
class App extends Component {
state = {
inputValue: ""
};
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Smart Transit Live Demo</h1>
</header>
<div style={{ width: 500, margin: "auto", marginTop: 10 }}>
<MyButton
buttonText="My Button"
onClick={ params => {helloWorld();}}
/>
</div>
</div>
);
}
}
export default App;
And the declaration of MyButton from /components/MyButton:
import React, { Component } from "react";
import PropTypes from "prop-types";
class MyButton extends Component {
render() {
return (
<button className="MyButton"
value = {this.props.buttonText}
>
{this.props.children}
</button>
);
}
}
MyButton.propTypes = {
buttonText: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
};
export default MyButton;
Finally, the declaration for helloWorld() is done like so (NOTE: neon-js is an npm package I'm using):
import { wallet } from "#cityofzion/neon-js";
export function isWallet(address) {
console.log(wallet.isAddress(address));
return wallet.isAddress(address);
}
export function helloWorld() {
console.log("Hello world");
return 1;
}
My problem is that the resulting Button doesn't get its value text rendered, and although it gets the CSS code for it just fine, it appears empty!
Not only that, but pressing it doesn't log a "Hello World" in the console, as it should, so it's even disconnected from its onClick function.
Any idea on what I'm doing wrong?
Buttons don't receive a "value" prop. The text inside of the button element is what gives it its text.
The button does appear to accept children to use as button text, but no children is actually being passed down to it. this.props.children is the content between JSX tags when the component is rendered.
React doesn't add the event handlers to elements automatically. You have to pass them along yourself in order for them to be properly triggered.
With that in mind, here's how you should render your button in App:
<MyButton onClick={() => helloWorld()}>
My Button
</MyButton>
And here's how MyButton's code should look:
class MyButton extends Component {
render() {
return (
<button className="MyButton" onClick={this.props.onClick}>
{this.props.children}
</button>
)
}
}
As you can see, the buttonText prop is no longer required; that's what the children prop is for.
You need to define super(props) in class constructor when you are going to use this.props
constructor(props) {
super(props);
}
Define this in MyButton component.
The problem is, you are not calling onClick method from mybutton component and button take it's value between it's opening and closing tag.
Use this code:
this.props.onClick()}> {this.props.buttonText}
I'm trying to render a graphviz graph from a dotfile in my React Component. I keep running into errors I don't understand. If anyone could shed some light I would be grateful.
import React from 'react';
import dotSrc from '../../assets/visualize_dotfile.dot';
import Viz from 'viz.js';
import * as d3 from 'd3'
import * as d3Graphviz from 'd3-graphviz';
class Visualization extends React.Component {
setGraph() {
console.log('DOT source =', dotSrc);
const dotSrcLines = dotSrc.split('\n');
d3.select(".graph").graphviz().renderDot(dotSrc);
}
render(){
return (
<div className="graph">
{this.setGraph}
</div>
)
}
}
export default Visualization;
I've also tried:
import React, { Component } from 'react';
import { render } from 'react-dom';
import dotSrc from '../../assets/visualize_dotfile.dot';
import Viz from 'viz.js';
import HTMLReactParser from 'react-html-parser';
const graph = Viz({ files: [ { path: dotSrc } ] });
class Visualization extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
render() {
return (
<div>
<div>
{HTMLReactParser(graph)}
</div>
</div>
);
}
}
render(<Visualization />, document.getElementById('root'));
To no avail. Neither Viz nor GraphViz wants to read my dotfile though I'm not sure I'm using the correct syntax either.
Thank you in advance.
It's not exactly clear what you want to do and what errors you are getting.
This code at least generates a graph from a static string when the button is clicked:
import React, { Component } from 'react';
import * as d3 from 'd3'
import * as d3Graphviz from 'd3-graphviz';
var dotSrc = 'digraph {a -> b}';
class App extends Component {
setGraph() {
console.log('DOT source =', dotSrc);
d3.select(".graph").graphviz().renderDot(dotSrc);
}
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to magjac's React hack</h1>
</header>
<script src="https://unpkg.com/viz.js#1.8.0/viz.js" type="javascript/worker"></script>
<div className="graph">
</div>
<button className="square" onClick={() => this.setGraph()}>
{'Click me'}
</button>
</div>
);
}
}
export default App;