I've just started using create-react-app and am not very familiar with the src setup. I noticed that in App.js, the exported App component is a function, as opposed to class App extends React.Component...
I can't seem to add a constructor to it. Anyone know where I can do so? Thank you
You can change the function to a class as:
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
text: 'App.js'
}
}
render() {
return (
<div>
{this.state.text}
</div>
)
}
}
export default App
CRA team updated the setup to new React hooks. You are talking about old react setup. You can convert it
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
To
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
But i will suggest you to learn react hooks to keep your skills updated.
As App is a functional component it doesn't have the component lifecycle. Therefore you can't specify a constructor.
But with class Based Component you can use the constructor
class App extends React.Component {
constructor(props) {
super(props);
}
render(){
return(
// code
//code
)}
}
Just use useEffect within the function.
Like:
React.useEffect(() => {
// Whatever you like
console.log("Called in starting of function");
}, []);
useEffect hook written like this will run after every render cycle. This hook cannot be used as a constructor.
useEffect hook as a constructor but you have to pass the second param as an empty array [] then it will only be run once when the component mounts. Ex: useEffect(() = alert('once'), [])useEffect hook, you emulate componentDidMount lifecycle method, not a constructor. Constructor executes before component is rendered whereas componentDidMount executes after component has been rendered. You cannot use useEffect component as a constructor and you don't need to inside a functional component
constructor, only class based components can have aconstructordefined in them.