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.
Related
Class extends value # is not a constructor or null
Error shows up when tried Inheriting a Parent Class which is binded with react-redux "connect" ->
Redux
const mapStateToProps=(state)=>({
.....
});
const mapDispatchToProps=(dispatch)=>{
return {
paymentOver:()=>dispatch(paymentClose()),
}
}
export {
mapStateToProps,mapDispatchToProps
}
Parent Class
import { connect } from "react-redux";
import { mapStateToProps,mapDispatchToProps } from "../../State Management/MappingStates";
Class MainContainer extends Component{
componentDidMount(){
this.props.paymentOver(); //redux action
}
}
export default connect( mapStateToProps,mapDispatchToProps )( MainContainer )
Sub Class
import MainContainer from './MainContainer';
Class Sub extends MainContainer{ //Error showing at this line- Class extends value #<Object> is not a
//constructor or null
render(){
return ......
}
}
export default Sub
Afaik, connected components are function components, so you cannot extends them.
Either way, even if it were a class component, it would be a new Component that just rendered your original class component. So neither way, you could extend this.
In general: in React, you should never extend components - even class components, but use other patterns like higher order components or composition.
Also, the whole ecosystem is shifting to function components for two years now. Unless you have a very good reason to (like maintaining a very legacy code base), you probably should not write class components any more.
That is also the recommendation of the redux style guide: use hooks (useSelector and useDispatch) and function components over connect and class components.
If you are just learning react & redux, you are probably following very outdated sources. For Redux, pleasee look at the official tutorials at https://redux.js.org/tutorials/index
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.
Trying to address all h1 elements in a child component but the class styling bubbles up to address all h1 elements in entire DOM. How restrict styling to component to which stylesheet is imported?
```
import React, { Component } from "react";
import "../styles/principlesInAoL.css";
export default class PrinciplesInAoL extends Component {
render() {
return <h1>Principles in Areas of Life</h1>;
}
}
```
& Beginning of parent component code:
```
import React, { Component } from "react";
import AoLDescription from "./aoLDescription";
import MetaPrinciple from "./metaPrinciple";
import "../styles/principles.css";
import PrinciplesInAol from "./principlesInAoL";
export default class Principles extends Component {
render() {
```
Thanks for the help.
Any css you add that defines styles by a tagname will apply to every element in the dom with that tagname, so in your case, adding a class name to the <h1/> is probably the best option.
In the PrinciplesInAoL component
import React, { Component } from "react";
import "../styles/principlesInAoL.css";
export default class PrinciplesInAoL extends Component {
render() {
return <h1 className="principlesInAoL-h1">Principles in Areas of Life</h1>;
}
}
and in principlesInAoL.css, add a definition for that class:
.principlesInAoL-h1{
/* your styles here */
}
ReactJS has no view encapsulation (in contrast to Angular). So in order to make CSS rule much stricter you should use CSS selector with higher specificity.
In reference this coding pattern:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Thing from '../components/Thing';
class ThingContainer extends Component {
render() {
return <Thing {...this.props} />;
}
}
function mapStateToProps(state) {
...
}
export default connect(mapStateToProps)(ThingContainer);
So it 1) imports a component(Thing), 2) creates another component (ThingContainer which is technically not a container) class to render that first component, and lastly using connect to finally export the container.
What's the difference with skipping step 2 above, and simply using the imported component(Thing) directly to export the container?
Yeah, that file looks like it's somewhat unnecessary. The class ThingContainer component does nothing but forward props to <Thing>, which is exactly what the wrapper components generated by connect do already. So, that's useless - the file should just do export default connect(mapState)(Thing), and it would work exactly the same without the extra ThingContainer definition.
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