![]() ![]() Then our children, and we can provide any number of children, and it doesn't have to be all on one line. Then we provide our attributes just like we would in HTML with a string here. For example, in HTML, you use class, and in JSX, you use class name. There are a couple of things that are different. Let's learn a couple of things about JSX. It's easier to compose these things together. Now, with this new syntax, we can do a couple of tricks, and it looks a little bit nicer. The HTML output is exactly the same as we had before with the class container. Then I'm going to change this from text JavaScript to text Babel to make that work. I'll go ahead and paste this script tag there. Normally, to do this you would have a build system set in place with web pack or something like that, but we're just going to use Babel standalone so that we can do this right in the browser without having any sort of build system. This JSX, so it needs to be transpiled into this React create element call. ![]() This is actually not JavaScript syntax at all. When we refresh, we're going to get a syntax error. We want the class name to be container, and then the children to be hello world. ![]() I'm going to just comment this out and we'll say const element equals div. This is JSX, and it looks similar to HTML and behaves in similar ways. The React team created JSX to allow us to write our UI in a way that's a little bit more familiar to us. Writing our entire app using React.create element is totally possible, but it's not entirely ergonomic. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |