I want to use https://github.com/t1m0n/air-datepicker with in a React app, but it doesn't work.
import React from 'react';
import AirDatepicker from 'air-datepicker';
class Datepicker extends React.Component {
render() {
return(
<AirDatepicker />
)
}
}
export default Datepicker;
`
<script src="./../bower_components/jquery/dist/jquery.min.js"></script>
This produces:
error($ is not defined)
Another approach:
import React from 'react';
import $ from 'jquery';
import AirDatepicker from 'air-datepicker';
class Datepicker extends React.Component {
render() {
return(
<AirDatepicker />
)
}
}
export default Datepicker;
Same error.
How can I integrate a jQuery plugin with React?
First of all air-datepicker is not React component, it's jQuery plugin, so it won't work like in your examples.
Secondly, for proper work, jQuery should be availabel in global context, the most esiest ways to do this is to include it into page via <script> tag. It should be included before plugin script.
To check if its really included and it available globally, just type in Chrome console window.jQueryand press Enter it should return something like function (a,b){...}. If not, when you doing something wrong, check src attribute of <script> tag, maybe it pointing to wrong destination
How to get it worked in React?
Well, the most simpliest way is just to initialize plugin on any DOM element in your component, like in regular JavaScript.
class MyComponent extends React.Component {
componentDidMount(){
this.initDatepicker();
}
initDatepicker(){
$(this.refs.datepicker).datepicker();
}
render(){
return (
<div>
<h3>Choose date!</h3>
<input type='text' ref='datepicker' />
</div>
)
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>
<div id="app"></div>
As separate component
Very simple datepicker React component example
class Datepicker extends React.Component {
componentDidMount(){
this.initDatepicker();
}
initDatepicker(){
$(this.refs.datepicker).datepicker(this.props);
}
render(){
return (
<input type='text' ref='datepicker'/>
)
}
}
class MyComponent extends React.Component {
render(){
return (
<div>
<h3>Choose date from React Datepicker!</h3>
<Datepicker range={true} />
</div>
)
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>
<div id="app"></div>
Also don't forget to include css files.
air-datepicker is not the React-component. It is the jquery-plugin, so we can follow this tutorial https://reactjs.org/docs/integrating-with-other-libraries.html
import React from 'react'
import $ from 'jquery'
import 'air-datepicker/dist/js/datepicker.js'
import 'air-datepicker/dist/css/datepicker.css'
class AirDatepicker extends React.Component {
componentDidMount(){
this.$el = $(this.el)
this.$el.datepicker()
}
render() {
return (
<div>
<input ref={el => this.el = el}/>
</div>
)
}
}
export default AirDatepicker
But it still not work cause the jquery not the dependency of the air-datepicker.
ReferenceError: jQuery is not defined
./node_modules/air-datepicker/dist/js/datepicker.js
D:/demo/react/jq-plugin/datepicker/node_modules/air-datepicker/dist/js/datepicker.js:2236
2233 | }
2234 | };
2235 | })();
> 2236 | })(window, jQuery);
2237 |
2238 |
2239 | //////////////////
Follow the error message and the easiest way is to hake the air-datepicker. Add jQuery as the dependency in the first line of the air-datepicker/dist/js/datepicker.js
Before:
1 |;(function (window, $, undefined) { ;(function () {
2 | var VERSION = '2.2.3',
3 | pluginName = 'datepicker'
After:
> 1 |import jQuery from 'jquery'
2 |;(function (window, $, undefined) { ;(function () {
3 | var VERSION = '2.2.3',
4 | pluginName = 'datepicker'
Thus <AirDatepicker /> can works well as the React-component.
My Solution is
import 'stupid-table-plugin';
...
async componentDidMount() {
window.$("table").stupidtable()
}
Related
I would like to add the coinmarketcap widget to my application, but when it loads it doesn't display anything. Do you know what syntax to use in these conditions?
// My Script (WIDGET COINMARKETCAP)
<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script>
<div class="coinmarketcap-currency-widget" data-currencyid="1" data-base="USD" data-secondary="" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-statsticker="true" data-stats="USD"></div>
import React from 'react';
class Inbox extends React.Component {
render() {
return (
<>
<div className="title">
<h1>Coinmarketcap</h1>
<span className="LineTitle"></span>
</div>
<script typeof="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script>
<div class="coinmarketcap-currency-widget" data-currencyid="1" data-base="USD" data-secondary="" data-ticker="true" data-rank="true"
data-marketcap="true" data-volume="true" data-statsticker="true" data-stats="USD"></div>
</>
)
}
}
export default Inbox;
I'm making a React application and I need to run a Javascript script only in one component, making reference to one of the div's.
I know there are some libraries to do so, but I wonder if there's a more direct way to do it. Right now I do this:
import React, { Component } from "react";
import "../ThisComponent.css";
export default class MyComponent extends Component {
render() {
return (
<div>
<div id="scriptTarget" />
<div className="main">
// Other stuff
</div>
<script src="js/myScript.js" />
</div>
);
}
}
But nothing happens. The script is stored in public/js/myScript.js.
Thanks!
I finally solved it by adding the componentDidMount function before rendering the component. Like this:
import React, { Component } from "react";
import "../ThisComponent.css";
export default class MyComponent extends Component {
componentDidMount() {
const script = document.createElement("script");
script.src = "js/myScript.js";
script.async = true;
document.body.appendChild(script);
}
render() {
return (
<div>
<div id="scriptTarget" />
<div className="main">
// Other stuff
</div>
</div>
);
}
}
If somebody has a better solution please feel free to share it. I'll be aware to further recomendations.
By using dangerouslySetInnerHTML you can add any valid html you want to your elements.
import React, { Component } from "react";
import "../ThisComponent.css";
export default class MyComponent extends Component {
render() {
return (
<div dangerouslySetInnerHTML="<script src='js/myScript.js' />" >
<div id="scriptTarget" />
<div className="main">
// Other stuff
</div>
</div>
);
}
}
I should mention though that as the attribute name suggest, its use is strongly discouraged.
export default class MyComponent extends Component {
componentDidMount() {
const script = document.createElement("script");
script.innerHTML = "window.onload = function() {\n" +
...
"}"
script.async = true;
document.body.appendChild(script);
}
render() {
return (
<div>
</div>
);
}
}
You can also use a external component "Helmet" for implement script tags and you can also use link tag,meta tag,style tag etc with the help of this component.
I am starting to learn react and am currently using Visual Studio 2017 to code a basic hello world web app. My index.html file is as follows:
<body>
<div id="root"></div>
<!-- scripts -->
<script src="./dist/app-bundle.js"></script>
</body>
while my app.tsx file is as follows (app.tsx is transpiled to ./dist/app-bundle.js):
declare var require: any
var React = require('react');
var ReactDOM = require('react-dom');
class Hello extends React.Component {
render() {
return (
<h1>Welcome to dsdasd!!</h1>
);
}
}
ReactDOM.render(<Hello />, document.getElementById('root'));
The above two files work fine. However, when I try to use the props property (shown below in the modified app.tsx) in the Hello class, the transpiler shows errors,
declare var require: any
var React = require('react');
var ReactDOM = require('react-dom');
class Hello extends React.Component {
render() {
return (
<h1>Welcome to {this.props.message}!!</h1>
);
}
}
ReactDOM.render(<Hello message = "some message"/>, document.getElementById('root'));
ERROR: TS2339: Property 'message' does not exist on type '()'
How can I resolve this error? My understanding is that the props and state are always available in a react component. Any help is greatly appreciated.
You need to specify the props interface for a Typescript + React component:
interface Props {
message: string;
}
class Hello extends React.Component<Props> {
render() {
return (
<h1>Welcome to {this.props.message}</h1>
);
}
}
I am a beginner in react and I am playing with an example in https://jscomplete.com/repl.
So far my code looks like :
let data = [
{
name:"Paul O’Shannessy",
avatar_url:"https://avatars1.githubusercontent.com/u/8445?v=4",
company_name:"Facebook"
},
{
name:"Tom Preston-Werner",
avatar_url:"https://avatars0.githubusercontent.com/u/1?v=4",
company_name:"Facebook"
}
];
const Card = (props) => {
return (
<div style={{margin:'1em'}}>
<img width="75" src={props.avatar_url} />
<div className="info" style={{display: 'inline-block',marginLeft: 10}}>
<div style={{fontSize: '1.25em',fontWeight: 'bold'}}>{props.name}</div>
<div>{props.company_name}</div>
</div>
</div>
);
}
const CardList = (props) => {
return (
<div>
{props.cards.map((card) => <Card {...card}/>)}
</div>
);
}
class Form extends React.component {
render() {
return (
<form>
<input type="text" placeholder="Github Username" />
<button type="submit">Add Card</button>
</form>
);
};
}
class App extends React.component {
render() {
return (
<div>
<Form />
<CardList cards={data} />
</div>
);
};
}
ReactDOM.render(<App />,mountNode);
But each time I run, I keep getting this runtime error.
What am I doing wrong?
Should be React.Component instead of React.component
Notice the capital letter.
when you import React then try React.Component and never use React.Component(). Remove these parentheses, then this error will go.
import React from 'react';
......
class App extends React.Component {
}
or you can try this.
import React, {Component} from 'react';
......
class App extends Component {
In my case, the following was failing:
import { AbstractFilter } from './';
export class DismissedFilter extends AbstractFilter {
...
where my index was was like:
export { AbstractFilter} from './filter';
I was able to resolve by specifying the full path to the import:
import { AbstractFilter } from './filter';
export class DismissedFilter extends AbstractFilter {
...
Seems the error was somehow related to webpack
In my case it was socket version issue so i do this to solve my issue
- npm un socket.io-client
- npm i socket.io-client#4.4.1
- npm start
Probably unrelated to this case in particular, but I've been upgrading from react-css-modules to babel-plugin-react-css-modules and got this same error.
Turns out the postcss-scss syntax I had configured, explicitely needed postcss#8 defined as a dependency in my package.json, (that worth to mention, also seems to be an error for libraries like stylelint-config-standard-scss) so:
yarn add -D postcss#8
fixed my problem.
I have a project using reactjs, which is transpiled by babel. I use the es2015 and react transforms in my .babelrc. I am currently refactoring and in my first pass I basically did export class foo for everything I needed. A lot of these classes should really just be functions, so I am trying to rewrite them as such, but I keep getting the same error. My main application file looks somethings like this:
import React, { Component } from 'react';
import {Foo, Bar} from './components/ui.js';
class Application extends Component {
constructor(props){
super(props);
this.state = {
object: null
}
}
componentDidMount(){
// code
}
componentDidUpdate(){
// other code
}
render(){
return(
<div>
<Foo />
<Bar />
</div>
)
}
}
module.exports = Application
And my import from ui.js is like this:
import React, { Component } from 'react';
export class Foo extends Component {
constructor(props){
super(props);
}
render() {
return (
// Some JSX
)
}
}
export class Bar extends Component {
constructor(props){
super(props);
}
render() {
return (
// Some other JSX
)
}
}
When I try and change one of these exported classes to a function, for example:
// Note: I have tried a variety of syntax such as function, const, etc...
export var Bar {
render() {
return (
// Some other JSX
)
}
}
I get the following error:
SyntaxError: Unexpected token <line where I declare a function>
I am not sure what I am doing wrong, and my google searches are only coming up with answers to other problems.
It's the same as defining the function as a variable but just adding export to the front e.g. (using ES6 syntax)
export const render = () => (
// Some other JSX
);
or alternatively
export var render = function() {
return (
// Some other JSX
);
};
Exporting functions is no different than exporting class. Basic rules must be followed .
Function/Class name should in CAPS
There will be only one "export" line .
Every function return body should have a single tag encompassing other parts. Most commonly used is a tag .
This usually works: import App from "./App"; where App.js is my jsx file.
You can do an explicit import too . : import AllApp from "./classhouse.jsx";
Name of the js/jsx file does not matter. It can be anycase (lower, upper).
For returning multiple functions from one file, you need to create one more function , that encompasses all other functions .
See the example below showing multiple functions returned.
import React from 'react';
/* All function / class names HAS TO BE in CAPS */
var App1 = function (){
return (
<div>
<h1>
Hello World
</h1>
</div>
)
}
var App2 = function (){
return (
<div>
<h1>World Number 2 </h1>
</div>
);
}
var AllApp = function (){
return (
<div>
<App1 />
<App2 />
</div>
);
}
export default AllApp;
My index.js file:
import React from 'react';
import ReactDOM from "react-dom";
import AllApp from "./classhouse.jsx"; /* Note: App name has to be in CAPS */
import App from "./App";
const jsx =
<div>
<AllApp />
<App />
</div>
ReactDOM.render(jsx, document.getElementById("root"));
You are writing functional components in wrong way.
function Welcome() {
return <h1>Hello World</h1>;
}
or
const Welcome = () => {
return <p>Hello Wrold</p>
}
export default Welcome ;
ES6 doesn't allow export default const. You must declare the constant first then export it.