Facebook has suggested the future removal of React.createClass completely in favour of ES6 classes. I'm now beginning to go through my react.js classes and replace them with the now accepted class MyClass extends React.Component syntax. However, I don't think I'm quite there yet on some things. I have coded the following API mount and gulp doesn't seem to like this particular module when loading: Cannot find module '.components/ticker-trader' from '/.../src'.
My particular class is outlined as:
import React, { Component, PropTypes } from 'react';
class TickerTrader extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
$.get("api_url", function(data) {
this.setState(data),
});
}
render() {
return (
<div></div>
);
}
}
export default TickerTrader;
Could anyone outline where exactly this has gone wrong...I'm sure it is something simplisitic. I have attempted to fix this by using the documentation but I don't seem to be getting anywhere...
Check your file paths.
Cannot find module '.components/ticker-trader' from '/.../src'
That looks wrong.
Instead of .components/ticker-trader it more than likely should be looking for ./components/ticker-trader.
Related
Need to know how we are accessing the Lifecycle methods from React :
import React, { Component } from "react";
class App extends Component{
constructor() {
super();
this.state = {};
}
componentWillMount() {
//Theoretically we tell that this `componentWillMount` is dereived/extended from 'Component' Class ie, in above like `class App extends Component`
}
render() {
return (
<div>
...
</div>
);
}
};
Now the question is if you open the react source code file from here https://unpkg.com/react#18.2.0/umd/react.development.js
you do not find any abstract method like for componentWillMount
But if you open the react-dom file, https://unpkg.com/react-dom#18.2.0/umd/react-dom.development.js you can find the method, Question is Since we extent the Class with React.Component, we assume it is inside React library, not in ReactDOM, So not Clear How we are accessing the LifeCycle hooks from React library, which infact not available in that library
The magic seems to be in react-reconciler:
You can find typeof instance.componentDidMount === 'function' instances in here that seem to mark that the React fiber is in a phase where it needs to have that function called.
The function is then finally called here in ReactFiberCommitWork.
How those functions get called is more and more involved, and quite asynchronous too, likely.
I am trying to make use of a JSX.Element within a React application. The compiler is unhappy though.
I have two files Main.tsx and EmployeeMask.js. For some reason I am not sure of I cannot use EmployeeMask in its JSX form <EmployeeMask /> as it is not understood as a JSX component.
Here is my Main.tsx file:
export interface MainProps {}
export interface MainState {}
export class Main extends React.Component<MainProps, MainState> {
public constructor(props: any) {
super(props);
}
private maskChooser(): JSX.Element {
return <EmployeeMask />;
}
public render() {
return <div>
{this.maskChooser()}
</div>;
}
}
Here is my EmployeeMask.js file:
import React from 'react';
export class EmployeeMask extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
EmployeeMask
</div>
)
}
}
The compiler tells me the following though:
(alias) class EmployeeMask
import EmployeeMask
'EmployeeMask' cannot be used as a JSX component.
Its instance type 'EmployeeMask' is not a valid JSX element.
Type 'EmployeeMask' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, refsts(2786)
I already tried adding export default EmployeeMask;, but this did not change anything.
Why does the compiler not recognize this as a JSX.Element?
You seem to be calling <EmployeeMask />, but the exported component's name is EmployeeMask2, which means it should be called like <EmployeeMask2 />.
This happens because it is a regular export (export class instead of export default class), so when you import it, you have to use something like import {EmployeeMask2} from '<path>/EmployeeMask.js'.
If you used a default export, you could call it however you want in your file, like:
import Whatever from '<path>/EmployeeMask.js'
I got the answer and wanted to post it here in case someone has had the same problem. I found this online TypeScript to JavaScript transpiler in which I could transpile a working TypeScript class into JavaScript in order to compare and find out what was the problem before.
Diffing the result with what I had showed that the import was the problem.
import React from 'react';
instead of
import * as React from 'react';
Correcting this by adding "* as " solves the problem and makes the class usable.
Beginner question struggling with React Component implementation.
I have tried everything in the cookbook on this error but no luck.
Expected 'this' to be used by class method 'aaaa'
What is wrong with his code:
import React from 'react';
class TestStuff extends React.Component {
constructor(props) {
super(props);
this.aaaa = this.aaaa.bind(this);
}
aaaa() {
console.log('dddddd');
}
render() {
return <div>test</div>;
}
}
export default TestStuff;
The warning is just saying, I see that you have this method in this class but it's not using any properties in the class. So either make it a static method or access a class property inside the method.
https://eslint.org/docs/rules/class-methods-use-this
I'm not an expert on JS and I have inherited a React app with dozens and dozens of components.
I want to do something that in Java is trivial but I can't find the way in ES6.
I want to build a registry of most of those components and I'm looking for an approach to have each class register itself so it can be looked up dynamically by a key.
So I build a registry class like this
let registry = [];
export default class Registry {
static register(component) {
if (!registry.find(x => x.key == component.key))
registry.push(component);
}
}
And on each component class, I tried to register itself doing something like this:
import Registry from './Registry.jsx';
import React from 'react';
export default class Component extends React.Component {
... body of the component ...
}
Registry.register( { key: 'ComponentX', component: Component });
But it doesn't work because Registry is undefined.
In Java would be something like:
class Component {
....
static {
Registry.register('ComponentX',Component.class);
}
....
}
The only alternative I found is to create a static list of all components but that chokes with our current distributed approach to development
Thanks a lot
Edit
Thanks guys. I'd managed to get a step closer to the solution.
Using this:
let registry = new Map();
export function register(key, component) {
return registry.set(key, component);
}
import { register } from './Registry.jsx';
export default class Component extends React.Component {
static entry = register(key, component);
... body of the class ...
}
Using this scheme, the register function is invoked but the registry variable is undefined. I just need to find out how to have it defined at the time of the invocation of the register function.
I keep getting this error from ESLint on my component.
ESLint: says Prefer Default Export (import/prefer-default-export)
Here's is how the component looks
export class mycomponent extends React.Component {
render() {
//stuff here
}
}
What is it asking for? How can I fix this?
you need to specify your export as default like this:
export default class mycomponent extends React.Component {
render() {
//stuff here
}
}
(notice the added word default) and then in other files you may import your component with:
import mycomponent from './mycomponent.js';
assuming that the component is being included from within the same directory and is defined in the file mycomponent.js.
You can also avoid having a default export if your file contains multiple exported things with names such as:
export const foo = 'foo';
export const bar = 'bar';
or you could even leave your original file exactly as it is without the word default and import it using a batch import:
import * as mycomponent from './mycomponent.js';