This is a common pattern while building components in React and these types are known as stateless or functional components. This is going to be a really simple component, with no logic attached to it. Check this well written post by Todd Motto to see the details of each option.Īs we already have the setup for the Carousel class, we should start looking at what we are going to render inside of it. With that, you'll have several differences while implementing your component methods. The former is just a "syntactic sugar" provided in the ES6 set of features. It is important to point that this is the ES6 equivalent of the React.createClass method. You should notice that here we are extending the React.Component class in order to declare that this specific class is going to be a React component. The render method of this class will be responsible to return the markup for your entire layout, so we'll add all the other components to the div block being returned. Here we are creating a simple wrapper class that will be responsible to handle all the logic you'll have in your interface. So, with that, you will have an instance of the ImageSlide for each image you give as the input for the carousel and two instances of the Arrow component, one for each arrow.įirst things first, let's build the Carousel component.īefore anything, you have to tell React in which part of your HTML file you want it to render your component.Įnter fullscreen mode Exit fullscreen mode For this example I decided to create three basic components, the first, the Carousel component, will be the wrapper for the entire layout and logic, the second, ImageSlide component, will simply render the image slides for the carousel, and the third will be the Arrow component, which will act as both the right and left arrows for the carousel transition.
You should be aware that there are tons of ways of doing an image carousel in React, regarding the way you organize components and even how many components you create.
It looks really simple, right? And it, in fact, can be simple since we are using React :) If you look at the header image for this post you'll get the idea of what we are going to build here. One of the first things to do when you start creating a UI, is to think about it as a set of components that will wrap parts of your interface and then work together to create a good user experience, that is one of the things React does to you, it changes the way you organize your apps.
As in this post I'll focus on a real example of using React, you can look at the documentation if you find yourself lost while reading the code or if you don't know any concepts mentioned here. By using a concept called virtual Dom, which is a lightweight representation of the real DOM, React makes interaction with the interface a really fast task, since for every change it compares the virtual DOM to the real DOM and updates only the portion that has changed.Īlright, so that is only one of the reasons why React is much more powerful than other libraries when you use it to build UIs. It uses techniques and concepts that focus on making the interaction with the interface a more efficient task. Recently, I'm having the opportunity to work a lot with React and as its advantages become clearer to me, I'm more and more willing to dive into this path of learning to build user interfaces powered with the library.Īs you may know, React is a JavaScript library with which you can build complex interactive UIs following a component-based approach.
For this post, I decided to work with something I'm currently passionate about, React.