- [Voiceover] The basis of any React project is the component. So here's the key points you need to understand. First, in order to use component, we'll need to import the regular react Library. However, in order to render those components, we'll also need to install the react-dom library. Now components are created with the createClass method, which is part of the general react Library. It takes in an object's specification, which is a series of methods that determine what the component does.
React comes with a few built in libraries, the main one is called React and gives you most of the functionality. However, in order to work with the DOM, we need a separate library called ReactDOM. So let's go ahead and import that as well. Now we're ready to create our first component. You create component by using the create class method of the React library. Components are always CamelCased, with the first letter being capitalized.
Now in order for this to make it into our page, we'll need to use the render method of the ReactDOM object. This method needs a couple of things. First is the element we want to render, and then where we want to put it. Now the object we want to render is our MainInterface. Because we're using something that looks like XML, my closing tag will have this extra slash next to it. We also need to tell React where this is gonna go in our HTML. So I'm gonna use a document getElementById command, and then look for a tag with an ID of petAppointments.
Now we're done with our first component. But, in order for this to show up in our layout, we'll need to make sure that we have an element with an ID of petAppointments, as well as a call to this app.js file. So I'm gonna go into my index.html and I'm gonna look here under this div and add just another div with an id of petAppointments. Animals are gonna to the very bottom of the page. I have a couple of script calls here, these are to j query as well as bootstrap.
And I'm gonna add a different script tag, and this one's gonna point to our app.js file. This is the process app.js that is in the builds folder, and the app folder, and in the JS folder. This is going to be processed from this file by our goal process into this folder. Once we save that, you should see the H1 with the text Pet Appointments right here. This return statement has to contain at least one HTML element.
Right now, that's the H1. So, because it only has one of them, we can put this in one line. If we want to, we can use a parenthesis and split things into multiple lines. This return statement can only have one main element. If you want to add some additional HTML tags, we'll need to add a container so that it wraps everything in a return statement. So let's go ahead and add an unordered list and some list items.
But I think you'll learn it quickly. And after a while, you'll be able to create other components with ease.
- Using components and subcomponents
- Working with state
- Handling events
- Creating subcomponents
- Using references
- Sorting and updating views, events, and search results