Simple Function

[00:00] Our objective here is to reduce the duplication. And the way that you reduce duplication in JavaScript is you make a function, and then you call that function. So we're going to make a function, a function called message. And it's going to accept some parameters.

[00:16] Maybe we want to have the parameters be an object. So we'll call this props. But I'll just destructure that into children. There we go. So it's a props object. We're going to destructure the property called children. And then we will just return this. And we'll interpolate the children in this position.

[00:35] Children, there it goes. And then down here, we can say message. We'll invoke it with the children set to the respective messages. And close our interpolation. Boom, there we go.

[00:51] Result is exactly what we wanted in the first place. It's all still working as expected. But now we have reduced duplication. So if I wanted to add a message, and maybe we want to put it in a box or something, now both of these have a box. And I don't have to update it in both places.

[01:09] That's part of the benefit of reducing that duplication. That's why we do it. So that is that. Now, of course, the children, we don't have to call this children. We could call it greeting or whatever. And that will still work. There's nothing special about that,

[01:28] that particular name. And in fact, the way that we have it written right now, there's nothing special about the fact that this is an object at all. We could just have this be children. And it's whatever they pass to us is going to be applied as children. But we're going to keep it as an object, because this is getting us closer to the way

[01:46] that React components actually function. And so we'll leave it as an object with the children prop or property and forward that along. And that is working swimmingly. So this isn't, again, not quite the way that we do React components. And in fact, it doesn't even have the same semantics. It's doing things a little bit differently.

[02:05] But we'll explore that in the next step.

[00:00] For this first part of the exercise, we're going to get ourselves a little bit closer to having some generic function that can generate some JSX that's reusable. So here we've got our container. We've got two messages, hello world and goodbye world. And there's some duplication there that we might want to reduce.

[00:19] And so here's what it would look like if it was a little more generic. So it's got a class name message, but it also has this dynamic children. And so what if we made a function called message that allowed us to pass those children, right? That could be useful, especially if this was a lot more complicated and we wanted to reuse it all over the place.

[00:39] And so your objective is to do pretty much exactly this, make this API work. This is not a React component, or at least it's not used in the way React components are intended to be used. But this will get us a little bit closer to the point where we can actually do this. And again, this only works because of interpolation. We're interpolating a function call,

[00:58] which is an expression into this position. And the result of that function call will be React elements. So that just, that works out nicely because the div children can take React elements. So have a good time with this one. We'll see you when you're finished.

Ever found yourself staring at React code, feeling like you're missing something crucial? You're not alone. Many developers use React without understanding the fundamentals in depth.

This can leave you struggling when faced with more complex challenges down the road.

But you can build a rock-solid React foundation that will transform how you approach React development for the rest of your career.

This tutorial guides you through the essential building blocks of React. You'll start from scratch and gradually build up to creating custom components, gaining invaluable insights along the way. By understanding not just the 'how', but the 'why' behind React's functionality, you'll transform your approach to React development.

### What to Expect:

- **Hello World in JS**: Pure JavaScript to understand the basics.

- **Raw React APIs:** Use React and ReactDOM without JSX.

- **JSX:** Explore the power and syntax of JSX.

- **Custom Components:** Create and use your first React component.

By the end of this tutorial, you'll have a deeper understanding of:

- The relationship between JavaScript and React

- How React elements are created and rendered

- The purpose and power of JSX

- The nature of React components and their role in building UIs

<Callout ctaLink="https://epicreact.dev/buy">
This tutorial is an excerpt from the React Fundamentals workshop
</Callout>

Learn React from scratch: build components, understand JSX, and master core concepts. Understand the 'why' and 'how' behind React's functionality. 

Get Started With React

Get Started With React

Transcript

Simple Function

Transcript