Join Eve Porcello for an in-depth discussion in this video Introducing JSX, part of Learning React.js.
- [Instructor] In the previous video, we looked at…how to create a React element, using React.createElement.…This worked fairly well when creating a simple div,…but consider how much code we'd have to write…for an unordered list.…The number of createElement calls nested inside…of another would start to create a bit of a mess.…So just for the sake of demo,…let's replace the div with a ul.…Then we're going to replace Hello World,…the child, with another React.createElement.…Then I'm going to move this React.createElement…to the next line so I can actually read it.…
We're going to add an li, we're going to add null,…and then I'll say item 1.…The next thing I want to do here is add another comma,…React.createElement…li, null, item 2,…and then React.createElement…li, null, and item 3.…Perfect!…So, now, if I save this and I upload it up…in my browser, I should see that this is working correctly.…
I see all of the items here.…But, as this tree becomes more complex,…there's a lot more room for error here.…So, as an alternative, the React team…
- What is React.js?
- Introducing JSX
- Creating a React component
- Handling events
- Using state
- Working with PropTypes
- Adding child elements
- Mounting and updating components
- Creating a React.js app
Skill Level Beginner
Building a Web Interface with React.jswith Ray Villalobos1h 21m Intermediate
1. What Is React.js?
2. Getting Started
3. React Components
4. Props and State
5. Enhancing Components
6. Creating an App
Using create-react-app4m 38s
Next steps1m 4s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.