so i'm trying to build a landing page using react and in my code i get the error component not defined.
const http = new HttpService();
class App extends Componenet {
constructor(props) {
super(props);
http.getProducts();
}
}
not sure what im doing wrong as i'm new to react would love for some help
Have you imported Component from react?
if not - import like this
import React, {Component} from 'react';
class App extends Component{}
or use directly like this
class App extends React.Component{}
Note- you imported Componenet not Component, just change to Component.
Related
Sorry the headline might be confusing, I didn't know how to do the right wording. So I tired the example from this answer https://stackoverflow.com/a/50466217/12848667 and it works for me. I can call window.helloComponent.alertMessage() in the console and get the output.
import React from 'react';
import './App.css';
class App extends React.Component{
constructor(){
super();
window.helloComponent = this;
}
alertMessage(){
console.log("Called from outside");
}
render(){
return (
false
)
}
}
export default App;
Now I want to use that functionality in my App but I use hooks, I don't have a constructor and I don't have this.
How can I add this solution to a more modern hooks based/functional App without converting the whole App component to class based?
I'm new to Rect. I'd like to ask perhaps a most basic question since I can't find the relavent documentation or a answer on Google.
Following is the first 3 lines of typical react code:
import React, { Component } from "react";
import {
Button,
Modal,
} from "reactstrap";
export default class CustomModal extends Component {
...
}
What is the connection between Bootstrap componments imported on the second line from reactstrap and the Component class in react(that is, react.Component)? Why a CustomModal subclass from react.Component instead of reactstrap.Modal? is react.Component a sort of abstract class and reactstrap.Modal concret class extending react.Component?
Basically, yes. You extend React.Component to create your own custom class-based React components. The others that you are importing are from libraries where the library author has already created the components. Note that you can also create custom function-based React components where you don't extend React.Component. I would recommend reading through the React.Component documentation.
To your question about how it relates to CustomModal, you would use Modal as a component within CustomModal. For example:
import React, { Component } from "react";
import {
Button,
Modal,
} from "reactstrap";
export default class CustomModal extends Component {
...
render() {
return <Modal />;
}
}
Note that this example is just to give you the idea of how to use an imported component in your own custom component. It is not necessarily how to use reactstrap.Modal itself.
I'm trying to import the svg from the public folder.
How can I do that using import?
I've tried:
import Avatar_1 from './public/avatar_1.svg';
but I'm still getting "Module not found: Can't resolve './public/avatar_1.svg'"
Is there a way to use process.env.PUBLIC_URL?
I think it's not possible to access the public folder from src, so I did the following:
import { ReactComponent as Avatar1 } from './assets/avatar_1.svg';
and it worked.
How to use it:
<Avatar1 />
Please note that the ReactComponent as part of the import is mandatory, and that your new component name, like Avatar1, should always start with a capital letter. Otherwise react won't recognize this as a react component.
Create 'icons' folder in Public Directory and Use this code :
import React, { Component } from 'react';
const iconPath = process.env.PUBLIC_URL + '/icons/';
export default class TestComponent extends Component {
constructor(props) {
super(props);
}
render(){
return (<img
src={`${iconPath}icon-arrow.svg`}
alt="more"
/>)
}
}
In react native:
How to create a component that extends another component rather than extending basic component from react
So instead of:
export default class XXX extends Component {
I need to create a Class Base
export default class XXX extends Base {
Where
export default class Base extends Component {
the whole idea is to create a Base component to use it as base class for all other components .
Yes you can, just you have to create a base component like below :-
import React, {Component} from 'react';
export default class BaseReact extends React.Component{
constructor(props){
super(props)
}
navigate=(name)=>{
const {navigate} = this.props.navigation;
navigate(name)
}
}
Import that class inside your .js file:-
import BaseReact from '/*/*/*/*/*/*/screen/BaseReact';
export default class Splash extends BaseReact{
constructor(props){
super(props)
}
}
May be help to you to achieve your goal.
Thank you.
You can do something like that, but it has some limitation. For example you can't override the parent methods. You can use props, send therm to parent component and call them in it. You can also use Higher-Order Components, add your logic to it and add render method for example to each extended component.
Yes, you can do that, just as described in your question.
However, the React community favors composition over inheritance: https://facebook.github.io/react/docs/composition-vs-inheritance.html
I have a class extending react.component. Another class extends from this class and connects to a redux-store.
import React from 'react'
class A extends React.Component{
constructor(props){super(props); ...}
...
}
import React from 'react'
import {connect} from 'react-redux'
#connect(store=>{...})
class B extends A{
constructor(props){super(props); ...}
...
}
class C extend A{....}
Unfortunately this doesn't work. Isn't it possible to connect a class to a store without explicitly extending the React.Component?
Error:
Uncaught TypeError: Super expression must either be null or a function, not undefined
I imported class a via index.js. This didn't work, importing the file itself worked.
As Vincent Taing said, it's not a good practice what you are trying to do. Instead use a HOC ( high order component ) to handle all of your logic (handlers, etc ), connect this component with your store and return your UI component with your handler.