![]() ![]() The render method describes what the UI should look like. ![]() State includes the data that we want to display. We can re-use this Like component (or any other components in the tree) on different pages or even in different applications.Ī component is typically (but not always) implemented as a JavaScript class that has a state property and a render method. So, our component tree could be extended to something like this: For example, the Feed component includes several Tweet components and each Tweet components has a Like component. Our component tree in this example could look like this:Ĭomponents can include child components. We can implement each of these pieces as a React component. Head over to Twitter’s website and you’ll see various pieces like below. Imagine you want to build a web application like Twitter. If you’ve worked with Angular 2+, this should sound familiar. So every React app is essentially a tree of components. When building React apps, we build a bunch of small, independent and reusable components and compose them to make complex UIs. It has data and describes what that piece of UI should look like. React ComponentsĬomponents are the building block of React apps. This means you get the freedom to choose the libraries that you’re familiar with or prefer. For those concerns, you need to use other libraries. ![]() It doesn’t have an opinion about other aspects of an app such as routing, calling HTTP services, etc. It only takes care of the view or what is rendered in the DOM. In my earlier post, I explained that React is a lightweight library for building fast and interactive user interfaces. Unlike Angular, which is a framework (or a complete solution), React is essentially a ‘view library’. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |