Create React Component

David Joseph Katz
A free video tutorial from David Joseph Katz
Software Engineer
4.5 instructor rating • 19 courses • 245,286 students

Learn more from the full course

React JS Web Development - The Essentials Bootcamp

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!

10:33:13 of on-demand video • Updated August 2019

  • Learn React the right and learn best practices.
  • Dive into the React engine, and learn how it works under the hood.
  • See how React fits in the big picture of web development.
  • Learn how to build applications from scratch.
  • Cover the crucial concepts of bundling and transpiling, and create frontend application build systems.
English [Auto] At this point we can create our first Riette component in Riak cupolas comprise user interface and they usually have some reusable and independent quality about them for our first component. We'll call it and then when we create reac components we use indite GSX extension rather than a dot GSX engine. So that's right. Up G as X. Now those of you with some web development experience might find you is very familiar. It looks just like each female sexuality. Dodgiest X is not H.A.. It's javascript with the look of a template language like X-amount but we use it to treat components and elements within react. So let's create this Riak component now we need to import react as usual from. But now we're missing a set. We also want to import the component feature from the and we add the component. That's all we're going to need to import for now. We don't mean that we don't anymore since indexed our Jaspal is already covering to begin reading our component declaring E6 class. Now those of you with a computer science background will like your six classes you were introducing ECMAScript 2015 in a lacerate javascript and an object oriented model. This is especially useful in creating our Kusum component because we can simply extend Riyadh's components with our class inherit all of their default methods which we will discuss later as they become relevant to our applications. But the first one and the most used one is a render method the render method allows us to return any GSX that we would like. So let's return a new div that says countdown chip component. Now you've already discussed importing when we import react and the reaction from the models. But now this component is our own module that we can export to other classes that will later imported so it's exported to McLaren as the default component. Finally we need the application to recognize this component as a difficult unit to use. Let's good the index touchiness and replace this deal with our app component. Now some of you might be wondering why we can use the app component without even importing it first while he has it be exactly right. We need to import from the current directory and don't always refers to the current directory slash at nasy save We just did update onto the screen. Up. There's nothing rendering on the page. Why is that. Well a common mistake with the render method is to forget to use the return statement. You always have to return the GSX. You can't simply read it out. This is something a lot of people starting out with Riak forget to do something I myself had to deal with a little bit as I was learning I was going to say that now to get back in there we go. Countdown champ app comput. Before we move on let's briefly review the three topics we just discussed a componentry at is an independent and reasonable piece of UI. Next GSX looks just like each female or ex-MIL but is actually javascript and allows us to create Riak components and finally importing and exporting allows us to share code between modules and files. Let's move on to the next video.