Trying to include feather icons into react component but it is not showing up.
const SomeComponent = () => {
<div>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"> </script>
<script>
feather.replace()
</script>
<i data-feather="home"></i>
</div>
}
What could be the issue?
Add the script in your index.html(so that it becomes globally available)
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"> </script>
Now go to your component and use the below code
<div dangerouslySetInnerHTML={{__html:window.feather.icons.home.toSvg()}} />
Related
I got a simple react component added to a web page and it is not rendering every time. It comes after I clear my browser history and then if I refresh my page it is not rendered. am I using old cdns or Babel?
This is my component and HTML.
React file find_new.js
'use strict';
class FindNew extends React.Component {
render() {
return (
<div>
<li className="list-inline-item">
<select className="selectpicker show-tick">
<option>Newly published</option>
<option>Recent</option>
<option>Old Review</option>
</select>
</li>
</div>
);
}
}
const domContainer = document.querySelector('#find_new');
ReactDOM.render(<FindNew/>, domContainer);
HTML
<div id="find_new"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="reactme/find_new.js"></script>
I am following a tutorial in React. I have created my very first component and expecting to see component in my application homepage, but I don't. I am not getting any error either.
In my homePage.Js (This is a component that I am trying to render), I have :
var React = require('react');
var Home = React.createClass({
render: function(){
return(
<div className="jumbotron">
<h1>Administration</h1>
<p>React, React Router.</p>
</div>
);
}
});
module.exports = Home;
In my Main.js file I have (This main.js serves as the base file for referencing my components):
$ = jQuery = require('jquery');
var React = require('react');
var Home = require('./components/homePage');
React.render(<Home />, document.getElementById('app'));
and in my index.html file I have :
<html>
<head>
<title>Administrator</title>
<link rel="stylesheet" href="css/bundle.css" />
</head>
<body>
<div id="app"></div>
<script src="scripts/bundle.js"></script>
</body>
</html>
When I run the app, I see an empty page, and when I check the page source code I can see below HTML in the BODY tag:
<body>
<div id="app"></div>
<script src="scripts/bundle.js"></script>
<script src="//localhost:35729/livereload.js?snipver=1" async="" defer="">
</script>
</body>
You import Home using
require('./components/homePage')
which is fine for default import, but your's isn't the default.
Use
require('./components/homePage').Home
or export using
module.exports.default = Home;
By the way, React.createClass is deprecated. If you want to learn React I recommend the use of ES6 class or function component. Try create-react-app to begin with.
You need to call the render method from react-dom when mounting the app.
ReactDOM.render(element, container[, callback])
I Want to show pop-up on page load but i don't have knowledge about react javascript . I am using lightbox pop-up . its working fine but its working onclick function . I need to open pop up on page load.
my code is :-
<html>
<head>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react-with-addons.js'></script>
<script type="text/jsx" src='js/react-lightbox.jsx'></script>
</head>
<body>
<div id='react-canvas'></div>
<script type="text/jsx">
/** #jsx React.DOM */
React.renderComponent(
<Lightbox>
<LightboxTrigger>
<a href='javascript:void(0)'>Click me to open!</a>
</LightboxTrigger>
<LightboxModal>
<div>
<h1>This is the basic usage!</h1>
<p>Good luck :D</p>
</div>
</LightboxModal>
</Lightbox>,
document.getElementById('react-canvas')
);
</script>
</body>
</html>
Try to create custome elements and add method this.props.openLightbox on componentWillMoutn
var ToggleButton = React.createClass({
componentWillMount(){
this.props.openLightbox();
}
render() {
return(<button onClick={this.props.openLightbox}>Open Lightbox</button>);
}
});
And put this custom element into <LightboxTrigger>
<LightboxTrigger>
<ToggleButton />
</LightboxTrigger>
Im building a new React app but get the following error -
"require is not defined"
hello-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="hello-world.js">
</body>
</html>
hello-world.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(
<App />,
document.getElementById('example')
);
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
Im running this from my client and don't have any web server running.
I tried to include http://requirejs.org/docs/release/2.2.0/minified/require.js
but it gives a totally different error.
You're trying to use a CommonJS module from within your browser.
This will not work.
How are you using them?
When you write import ... from ... in ES6 Babel will transpile these calls to a module definition called CommonJS and since CommonJS isn't around in the browser you'll get an undefined error from require().
Furthermore, you're also trying to load RequireJS which uses a different module definition pattern called AMD, Asynchronous Module Definition, and will not take care of the require calls for you. You can wrap them in RequireJS specific calls.
If you want to use CommonJS modules in your code base you need to first bundle them with either Browserify or webpack. The two tools will transform your require calls to some glue magic that you can use within the browser.
But in your specific case, if you remove the import calls and just let the browser take care of and attach the classes you've created to the window object your code should work.
Also, note that when you are using submodules from React without another transpiler you will have to reference the top-level modules. I just know that in some cases there are people who will not wish refactor their projects and alter directories to handle webpack/browserify module imports.
So instead of using the CommonJS import React, {useState, useEffect} from 'react' you can instead reference hooks with React.useEffect() , React.useState().
Just another solution for those who don't want to deal with any refactoring.
Here is a basic hello world example on hooks
The code samples on react website doesn't show the full html document. In summary use React.useEffect and React.useState. Get rid of the import statement.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Example() {
const [count, setCount] = React.useState(0);
// Similar to componentDidMount and componentDidUpdate:
React.useEffect(() => { // Update the document title using the browser API
document.title = `You clicked ${count} times`; });
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
ReactDOM.render(
<Example />,
document.getElementById('root')
);
</script>
</body>
</html>
JSX code:
var App = React.createClass({
render: function() {
return <div className="darken">hello world</div>
}
});
React.renderComponent(<App/>, document.querySelector('.main'))
HTML:
<body>
<header>welcome</header>
<div class="main"></div>
</body>
React.renderComponent will append rendered JSX to <div class="main">. Output of HTML will be:
<body>
<header>welcome</header>
<div class="main">
<div class="darken">hello world</div>
</div>
</body>
Is it possible React.renderComponent replace <div class="main">, so what I expect like this:
<body>
<header>welcome</header>
<div class="darken">hello world</div>
</body>
Was having a problem getting my component to render in React 0.14.0. My solution was make sure your scripts have a special type:
<script type="text/babel" src='js/app.js'></script>
Include these three libraries:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
Then use ReactDOM.render():
ReactDOM.render(<Timer start={Date.now()} />, document.getElementById('app'));
I'm not even using ES6 or a build system. Simple solution to get text on the screen with react.js
Sure, just use:
React.render(<App/>, document.body);
Had a similar problem and this is what I came up with.
Replace it with a simple span tag so it doesn't affect your styling.
const appContainer = document.createElement('span')
const mainEl = document.querySelector('.main')
mainEl.parentNode.replaceChild(appContainer, mainEl)
React.renderComponent(<App/>, mainEl)
Which will produce
<body>
<header>welcome</header>
<span> <!-- this acts as the container for react -->
<div class="darken">hello world</div>
</span>
</body>