Develop Reference

pixi.js PIXI.Texture.from() can't add images

I'm using react with pixi.js to development a simple web game
and I want to add some images to pixi.js from local directory
here is the website I studied
https://pixijs.io/examples/#/demos-basic/container.js
and here are the codes
import * as PIXI from 'pixi.js'
import React from 'react'
export default class PixiTestPage extends React.Component{
componentDidMount(){
//Create a Pixi Application
const app = new PIXI.Application({
backgroundColor: 0x1099bb
});
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
const texture = PIXI.Texture.from("./bunny.png")
const bunny = new PIXI.Sprite(texture);
bunny.anchor.set(0.5)
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;
app.stage.addChild(bunny);
}
render(){
return (
<div>
</div>
)
}
}
but the browser keep showing error message
Uncaught (in promise)
same as I use #inlet/react-pixi
https://reactpixi.org/
import * as PIXI from 'pixi.js'
import React from 'react'
import { Stage, Sprite } from '#inlet/react-pixi';
export default class PixiTestPage extends React.Component{
componentDidMount(){
}
render(){
return (
<div>
<Stage>
<Sprite image="./bunny.png" x={100} y={100} />
</Stage>
</div>
)
}
}
the Uncaught (in promise) error still there
but when I using the url like
https://pixijs.io/examples/examples/assets/bunny.png
it worked
how to use images in pixi.js with local directory?
here is the image path
path

Oh I forgot react must use import images...
so the solution is
import React from 'react'
import { Stage, Sprite } from '#inlet/react-pixi';
import bunny from './bunny.png'
export default class PixiTestPage extends React.Component{
componentDidMount(){
}
render(){
return (
<div>
<Stage>
<Sprite image={bunny} x={100} y={100} />
</Stage>
</div>
)
}
}

React.js fetch Giphy API

I'm building a search engine (with React.js), where I can look for GIPHY gifs, using their API. I'm new to React.js and i'm having some trouble getting this code right.
import React from 'react'; //react library
import ReactDOM from 'react-dom'; //react DOM - to manipulate elements
import './index.css';
import SearchBar from './components/Search';
import GifList from './components/SelectedList';
class Root extends React.Component { //Component that will serve as the parent for the rest of the application.
constructor() {
super();
this.state = {
gifs: []
}
}
handleTermChange(term) {
console.log(term);
//---------------------->
let url = 'http://api.giphy.com/v1/gifs/search?q=${term}&api_key=dc6zaTOxFJmzC';
fetch(url).
then(response => response.json()).then((gifs) => {
console.log(gifs);
console.log(gifs.length);
this.setState({
gifs: gifs
});
});//<------------------------- THIS CODE HERE
};
render() {
return (
<div>
<SearchBar onTermChange={this.handleTermChange} />
<GifList gifs={this.state.gifs} />
</div>
);
}
}
ReactDOM.render( <Root />, document.getElementById('root'));
I get the following error in the console:
Uncaught (in promise) TypeError: _this2.setState is not a function
at eval (index.js:64)
at
Any help is appreciated :) Thanks!

this is not auto-bound in ES6 style syntax.
You have to bind in the constructor:
```
super();
this.state = {
gifs: []
}
this.handleTermChange = this.handleTermChange.bind(this)```
or use arrow function syntax for the function in question:
func = () => {};
For reference: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

Can you use es6 import alias syntax for React Components?

I'm trying to do something like the following, however it returns null:
import { Button as styledButton } from 'component-library'
then attempting to render it as:
import React, { PropTypes } from "react";
import cx from 'classNames';
import { Button as styledButton } from 'component-library';
export default class Button extends React.Component {
constructor(props){
super(props)
}
render() {
return (
<styledButton {...this.props}></styledButton>
)
}
}
The reason is, I need to import the Button component from a library, and also export a wrapper component with the same name but maintaining the functionality from the imported component. If I leave it at import { Button } from component library then of course, I get a multiple declaration error.
Any ideas?

Your syntax is valid. JSX is syntax sugar for React.createElement(type) so as long as type is a valid React type, it can be used in JSX "tags". If Button is null, your import is not correct. Maybe Button is a default export from component-library. Try:
import {default as StyledButton} from "component-library";
The other possibility is your library is using commonjs exports i.e. module.exports = foo. In this case you can import like this:
import * as componentLibrary from "component-library";
Update
Since this is a popular answer, here a few more tidbits:
export default Button -> import Button from './button'
const Button = require('./button').default
export const Button -> import { Button } from './button'
const { Button } = require('./button')
export { Button } -> import { Button } from './button'
const { Button } = require('./button')
module.exports.Button -> import { Button } from './button'
const { Button } = require('./button')
module.exports.Button = Button -> import { Button } from './button'
const { Button } = require('./button')
module.exports = Button -> import * as Button from './button'
const Button = require('./button')

Try to import this way
import {default as StyledLibrary} from 'component-library';
I suppose you export
export default StyledLibrary

Careful with capitalisation. Best to always CamelCase.
One:
import Thing from "component";
One with alias:
import {Thing as OtherThing} from "component";
One with alias plus other defaults:
import {Thing as OtherThing}, Stuff, Fluff from "component";
More detailed example
import
{Thing as StyledButton},
{Stuff as Stuffing},
{Fluff as Fluffy},
Wool,
Cotton
from "component";

User-Defined Components Must Be Capitalized
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
change your code to
import { Button as StyledButton } from 'component-library';
....bah...bah....bah
<StyledButton {...this.props}></StyledButton>

No idea why I am not able to alias the import;
As a work around, I ended up doing this:
import React, { PropTypes } from "react";
import * as StyledLibrary from 'component-library';
export default class Button extends React.Component {
constructor(props){
super(props)
}
render() {
return (
<StyledLibrary.Button {...this.props}></StyledLibrary.Button>
)
}
}
Thanks all

note that when you capitalized StyledLibrary and it worked
whereas, in the original question, you did not capitalize styledButton and it did not work
both of these are the expected results with React
so you didn't discover a workaround, you simply discovered the (documented) React way of doing things

React with Ecmascript6 classes problems using Chrome

I'moving to React ES6 as the recommended way to write React classes. I'm starting from a simple example:
import React from 'react';
import ReactDOM from 'react-dom';
require('../node_modules/font-awesome/css/font-awesome.css');
require('../node_modules/bootstrap/dist/css/bootstrap.css');
require('jquery');
require('bootstrap');
import Dashboard from './components/Dashboard/Dashboard';
ReactDOM.render(
<Dashboard/>,
document.getElementById('react-container')
);
And my component in ES6:
import React from 'react';
class Dashboard extends React.Component {
render() {
return <h1>Hello, Don Trump</h1>
}
}
I'm getting the following error on Chrome 55:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
at invariant (VM1093 bundle.js:9069)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (VM1093 bundle.js:23166)
at ReactCompositeComponentWrapper.performInitialMount (VM1093 bundle.js:23589)
at ReactCompositeComponentWrapper.mountComponent (VM1093 bundle.js:23480)
at Object.mountComponent (VM1093 bundle.js:16018)
at mountComponentIntoNode (VM1093 bundle.js:28717)
at ReactReconcileTransaction.perform (VM1093 bundle.js:17017)
at batchedMountComponentIntoNode (VM1093 bundle.js:28739)
at ReactDefaultBatchingStrategyTransaction.perform (VM1093 bundle.js:17017)
at Object.batchedUpdates (VM1093 bundle.js:26233)
I thinks there is something simple I'm missing. Help appreacited.

The error message might have it right:
You likely forgot to export your component from the file it's defined in.
Export your Dashboard component like the following:
import React from 'react';
class Dashboard extends React.Component {
render() {
return <h1>Hello</h1>
}
}
export default Dashboard;

Add
export default Dashboard
At the end of your component;
So the new code will be
class Dashboard extends React.Component {
render() {
return <h1>Hello, Don Trump</h1>
}
}
export default Dashboard;

You need to export the class. You can actually export and declare at the same time
import React from 'react';
export default class Dashboard extends React.Component {
render() {
return <h1>Hello</h1>
}
}

Uncaught (in promise) TypeError: Cannot read property 'createElement' of undefined(…)

I needed to refactor my stateless functional component to a class. When I did so though, I keep getting an error where it looks like React itself is undefined.
import React from 'react';
import { Cell } from 'fixed-data-table';
const DataCell = ({rowIndex, columnKey, data, onMessageClicked, ...props}) => {
return (
<Cell {...props} onClick={onMessageClicked(data[rowIndex].Id)}>
{data[rowIndex][columnKey]}
</Cell>
);
};
export default DataCell;
to
import { React, Component } from 'react';
import { Cell } from 'fixed-data-table';
class DataCell extends Component {
onCellClicked() {
this.props.onMessageClicked(this.props.data[this.props.rowIndex].Id);
}
render() {
const {rowIndex, columnKey, data, ...props} = this.props;
return (
<Cell {...props} onClick={onCellClicked}>
{data[rowIndex][columnKey]}
</Cell>
);
}
}
export default DataCell;
bundle.js:43248 Uncaught (in promise) TypeError: Cannot read property 'createElement' of undefined(…)
and when I go to that line I see
return _react.React.createElement(
I don't get it. How do I debug/fix this?
My full code for this app is here in case the code I'm posting is not related somehow.
Thanks!

Oh...
import { React, Component } from 'react';
needs to be
import React, { Component } from 'react';
:)

The OP has answered the question it self but with no reason so here's the reason!
{Directly quoting from https://github.com/facebook/react/issues/2607#issuecomment-225911048" }
import { React, Component } from 'react';
is incorrect, should be
import React, { Component } from 'react';
There is no named export named React. It is confusing because React is a CommonJS module, and since you’re using ES6 imports, Babel tries to map the semantics but they don’t match exactly. { Component } actually grabs Component from React itself so you might just:
import React from 'react'
and use React.Component instead if it’s less confusing.

For me in TypeScript the solution was:
import * as React from 'react';