I cannot get the look controls to work with aframe-react. WASD controls work fine, and the assets appear fine.
import React from 'react';
import 'aframe';
import {Entity, Scene, Animation} from 'aframe-react';
class AugmentedForest extends React.Component {
render() {
return (
<Scene>
<a-assets>
<img id="forest-360" src="./images/forest_360.JPG"/>
</a-assets>
<Entity>
<Entity camera="" look-controls="" wasd-controls=""/>
</Entity>
<a-sky src="#forest-360"/>
</Scene>
);
}
}
export default AugmentedForest;
Related
I'm really new in react and I'm having problems with this:
I create a class and imported it into the App.js file, like this:
The class:
import React,{component} from "react"
class Begin extends component{
render(){
return(
<div>General Kenobi</div>
)
}
}
export default Begin;
then the App with the class imported:
import './App.css';
import Begin from './example'
function App() {
return (
<div className="App">
Hello there
<Begin />
</div>
);
}
export default App;
If I remove the I see on the browser the strip "Hello there", but when I put it, nothing is shown, not even the "Hello there"
I'm not quite sure what I'm doing wrong
Thanks in advance
React class component need to extend from Component class with capital letter C
import React, {Component} from "react"
class Begin extends Component{
render(){
return(
<div>General Kenobi</div>
)
}
}
export default Begin;
My app has 2 components: Location and User.
The locations are rendered when the page is loaded. Some locations have users. These users are loaded via an ajax call after the locations are rendered.
I wonder how I can render (conditionally) the user inside a location when that user is assigned to a location.
<App>
<location id="1" />
<location id="2" />
<Location id="3">
<User loactionId="3">
</User>
</Location id="4">
</App>
You can render Component dynamically using following example:
Method 1:
Here is the Location Component:
import React from "react";
import {User} from "./User";
export class Location extends React.Component {
render() {
return (
<div style={{margin:20, padding:20, color: '#FFFFFF', background: '#368BC1'}}>
This is Location Component {this.props.value}
{
this.props.user? <User/> : " No User Component"
}
</div>
);
}
}
Here is the User Component:
import React from "react";
export class User extends React.Component {
render() {
return (
<div style={{background: '#A0CFEC', padding: 20, color:'#000000'}}>
This is User Component
</div>
);
}
}
App Component:
import React from "react";
import ReactDOM from 'react-dom'
import {Location} from "./parent-child/Location";
class App extends React.Component {
render() {
return (
<div>
<Location user={true} value={1}/>
<Location user={false} value={2}/>
<Location user={true} value={3}/>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
export default App;
Method 2:
You can replace location Component with below code. Here I used React.createElement method to create Component dynamically.
import React from "react";
import {User} from "./User";
export class Location extends React.Component {
render() {
return (
<div style={{margin:20, padding:20, color: '#FFFFFF', background: '#368BC1'}}>
This is Location Component {this.props.value}
{
this.props.user? React.createElement(User, {propValue: 'Hello World'}, null) : " No User Component"
}
</div>
);
}
}
I'm new in React Js don't judge me bad for it. I was writing some class to learn but unfortunately I can't export and import one of my class.
import React from "react";
class Yozuvla extends React.Component{
render(){
return(
<div>
<p>Ismingiz</p>
<p>Familyagiz</p>
</div>
);
}
}
export default Yozuvla;
Here is the second class which can't be imported
import React from "react";
import yozuv from "./components/Form";
class App extends React.Component{
render(){
return (
<div>
<yozuv/>
</div>
);
}
}
export default App;
yozuv class don't show up why.browser is white like snow
Classname should be in PascalCase,
import yozuv from "./components/Form";
this should be
import Yozuv from "./components/Form";
Usage
<Yozuv/>
When you add any element like <yozuv/> (starts with small letter), react takes it as a normal HTML tag and NOT a React Component.
import React, { Component } from 'react'
// make sure the location of file is the same for Yozuvla
import Yozuvla from'./components/Form'
class App extends Component {
render() {
return (
<div>
<Yozuvla/>
</div>
)
}
}
export default App;
tell me in commit it work or not
When I import:
import {ReactComponent as Name} from '../assets/name.svg';
I get the error, but when I do:
import test from '../assets/name.svg';
The error goes away.
I've installed the react-polyfills and have imported them at the top of index.js:
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React, {Component} from 'react';
import Particle from '../Particle/particle';
import {ReactComponent as Name} from '../assets/name.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
}
// componentDidMount() {
// console.log(this.state.points);
// }
render() {
return (
<React.Fragment>
<Particle />
<div className="name">
{/* <Name/> */}
</div>
</React.Fragment>
);
}
}
export default App;
It should be showing the svg Edge, but I get the error. When i uncomment the component, the page doesn't even load, but works in other browsers
eslinting with airbnb
import React from 'react';
import TopBar from './topBar';
import Content from './content';
class App extends React.Component {
render() {
return (
<div className="app">
<TopBar />
<Content />
</div>
);
}
}
export default App;
gives the error
5:1 error Component should be written as a pure function react/prefer-stateless-function
I have tried
function render(){}
and
render: function() {}
but didn't succeed
Using the docs from https://facebook.github.io/react/docs/reusable-components.html#stateless-functions, your code sample would be converted to:
import React from 'react';
import TopBar from './topBar';
import Content from './content';
function App (props) {
return (
<div className="app">
<TopBar />
<Content />
</div>
);
}
export default App;
Note that this updated code sample will break some other airbnb eslinting rules but those should be self-explanatory. Just posting this as a template to follow. The docs on this subject are very direct so make sure you give those a good review.