Components in React | kirupa.com

Components are one of the things that make React...well, React! They are one of the primary ways you have for defining the visuals and interactions that make up what people see when they use your app. Let's say this is what your finished app looks like:


This is a companion discussion topic for the original entry at http://www.kirupa.com/react/components.htm

I think even my granny who has never dealt with computers would understand React Components. Awesome, thank you!

Haha, thanks! Glad you liked the explanation :slight_smile:

What part do you feel is not understandable for beginners? I’d be happy to update the content to make things easier :slight_smile:

this article is very easy to understand , now i have know the meaning of component react, thanks for the article

I read the entire book and really thought it was a good read. I had already done some courses / tutorials in react so this just clarified a lot of things I already kind of understood… I also like the humor throughout which made an otherwise dry subject enjoyable to read about. But there are some differences between what was demonstrated in this book compared with some other courses I have done, for example, in the JS files, to import other components, I had used the following:

var React = require(‘react’); (instead of import)?
and also:

instead of using createClass as shown in the book for each component, I had seen this:

class App extends React.Component {
render () {
return (
// some code
)
}
}

Could you explain why these are done differently, how and why? This is the only thing I don’t really understand and I would like to be doing it the best way… and I’m not sure which is better?? Thank you!

Hi squeakie!
Sorry for the delay in getting back to you. I saw your tweet, but I didn’t get a chance to look at your post until now :slight_smile:

The require/import syntax is a side effect of whatever module bundling solution you use. There isn’t a right or wrong answer. Use the convention that your bundler (webpack, etc.) recommends.

For the createClass vs. class debate, that is something that I will be updating in the book. The recommended way as of a month or so ago is to use the class syntax. You’ll see the code snippets in the web edition of the book (which you already have access to) update to using the class syntax in the next couple of weeks. Future editions of the print book will contain the latest changes in a few months.

Hopefully that cleared it up. Let me know if you have any other questions. Also, I’m glad you found the book a fun read!

Cheers,
Kirupa

Thanks for your response! Do you think you might continue or write another book as a continuation which covers Flux/Redux? This is something I’ve also been looking at and trying to understand the hows and whys of… still not sure about it though!

Yes! The next edition of this book will contain material about Redux :slight_smile:

Hey Kirupa,

Apologizes for bringing this up, but do you have any idea as to when to expect the web version of your book to be updated using the new syntax? Thanks!

Regards,
Ali

I should apologize for my delays in doing this. I’m working on it right now! I’ll update the contents on the site first, so look for the changes within the next week or so. If you aren’t familiar with classes, then this article may be good starting point: https://www.kirupa.com/javascript/classy_way_to_create_objects.htm

:slight_smile:

Hey Kirupa,

Has there been any updates to the components chapter, either here on the site or the book? I still see the createClass method being used. Thanks!

Ali - it has, but I haven’t posted them yet! I’ll do so later this week if possible :slight_smile:

I’ve updated the article with the class syntax: https://www.kirupa.com/react/components.htm :slight_smile:

awesome! thanks so much :grinning:

I’m slowly updating all of the React articles to be ES6 based, so you’ll start seeing those changes shortly :slight_smile: