Hi everyone,
After my presentation in the dedicated section, this is my first post.
I decided to learn React as a web app development framework, along with nodejs.
Right now, I'm studying a somewhat dated book.
I got to the part dedicated to stateless and statefull components.
Well, I don't understand if the book was made worse, or why the examples refer to a somewhat dated version of React. Strange that, however, the author's GitHub code is also different from that of the book.
Below is an example of code displayed on the book:
var ReactClass = createClass ({
render: function () {
console.log (this.props.isHidden)
return React.createElement ('h1', {className: 'header'}, this.props.isHidden || true, 'React Component');
}
});
const ReaComponentElement = React.createElement (ReactClass)
consteagComponent = ReactDOM.render (reactionsComponentElement, document.getElementById ('react-application'))
But note that console.log (this.props.isHidden) is always undefined.
As you can see, the implementation is already an adaptation to what is reported in the book. The book uses React.createClass, a function that no longer exists and is no longer valid, I think, from ES6.
So I had to add the addiction:
const createClass = require ('create-react-class');
which returns the function that allows you to create a class. But console.log ('read isHidden:', this.props.isHidden) is always undefined
So I tried to transform the code like today, I think, it should be written correctly, as follows:
the ReactClass class extends React.Component {
render () {
console.log ('read isHidden:', this.props.isHidden)
if (this.props.isHidden === 'true') {
returns null;
}
return React.createElement ('h1', {className: 'header', key: 'header'}, 'React Component')
}
}
ReactDOM.render (, document.getElementById ('react-application'))
Now console.log ('read isHidden:', this.props.isHidden) is no longer undefined, but accepts the value passed as the property of the ReactClass component ().
I don't understand what the author meant except that the rendering method can decide what to do.
But in my opinion, a component based on this.props is a stateless component. What do you think?.
Can you give me your opinion on what the author meant and if you agree on my conclusions?
Somewhere I read that the author's approach would perhaps work if the props were to pass to the constructor. Is this true?
I apologize for the stupid questions.
Thanks so much.
Top comments (0)