Join Eve Porcello for an in-depth discussion in this video Using properties, part of Learning React.js.
- [Voiceover] We can make our components more dynamic…by adding properties.…Sending properties to a component is very similar…to adding attributes to HTML.…The first thing that we'll do to demonstrate this…is we’re going to add an attribute here on line 22.…For text equals “Hello World”…and now instead of using “Hello World inside of this H1,…I'm actually going to use this…dot Props dot text”.…So this is just some JSX syntax.…
We’re going to wrap any JSX expression in these curly braces…and then we’re going to reference this on the Props object…by referring to text.…So if I give this a save and I load it up in my browser,…I should see the same thing appearing, “Hello World”.…Now, this makes it extremely useful when we’re dealing…with reusable components.…So if I create this one MyComponent,…I can use it as many times as I'd like to.…So let’s go ahead and demonstrate this by adding a Div.…
So React always wants to render one element.…So we’re going to wrap these multiple MyComponents…in this Div.…So, let’s just copy and paste a couple MyComponents here…
- 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.