Create a Simple Reusable React Component

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

Just like in regular JavaScript, when you want to reuse code, you create a function. With React, you create components. In this lesson, we'll walk through the process of creating custom React components and you'll walk away with a deep understanding of how to create and use basic components to compose a larger component you render. We will look at how JSX works by calling React.creatElement under the hood.

ahairshi
ahairshi
~ 4 years ago

Hi,

I see an arrow function with no arguments for props in the transcript. Please change it

from

const message = () => <div>{props.msg}</div>

to

const message = props => <div>{props.msg}</div>
Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

Thanks ahairshi!

RentPath User 5
RentPath User 5
~ 3 years ago

@Kent; how do you move/get/run the babel compiler to compile/display the message at the 3.0 marker in your video?

Thank you and happy holidays...

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

See: https://babeljs.io/repl/

:)

RentPath User 5
RentPath User 5
~ 3 years ago

Thanks for your quick response; I did just that and came back to see ur answer.... my bad... thanks again,, enjoying the course a great deal, second time around...

:)

Kingsley Silas Chijioke
Kingsley Silas Chijioke
~ 3 years ago

@Kent, I am trying to play with the code further - trying to pass a prop as className. Any reason why the code below doesn't work?

  const Message = props => <div {props.className}>{props.children}</div>
  const element = (
    <div className="container">
      <Message>Hello World
        <Message>Next!</Message>
      </Message>
    </div>
  )
Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

Hey Kingsley,

Your syntax is incorrect. Also, you need to pass the prop to the Message component. Try this:

  const Message = props => <div className={props.className}>{props.children}</div>
  const element = (
    <div className="container">
      <Message className="first-message">Hello World
        <Message className="second-message">Next!</Message>
      </Message>
    </div>
  )

I hope that helps. Good luck!

Kingsley Silas Chijioke
Kingsley Silas Chijioke
~ 3 years ago

I tried this

var Message = function Message(props) {
  return React.createElement(
    "div",
    null,
    props.children,
    props.className
  );
};
var element = React.createElement(
  "div",
  { className: "container" },
  React.createElement(
    Message,
    null,
    "Hello World",
    { className: "test" },
    React.createElement(
      Message,
      null,
      "Next!"
    )
  )
);

That gave this error;

Uncaught Error: Objects are not valid as a React child (found: object with keys {className}). If you meant to render a collection of children, use an array instead.
Kingsley Silas Chijioke
Kingsley Silas Chijioke
~ 3 years ago

I am trying to see if it's possible to pass a className to either of the divs via props.

Kingsley Silas Chijioke
Kingsley Silas Chijioke
~ 3 years ago

Okay, I get it now. They are components, thus it is impossible to give them a className. Right?

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

Well, as you can see in my example, I'm passing the prop called className to the component, and it uses that prop to forward it into the underlying div.

Fortech, RO 16013724
Fortech, RO 16013724
~ 3 years ago

Hey Kent,

I have identified two issues in the transcript:

    1. <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> (src instead of type)
    1. the rootElement is not defined

Thanks for the course!

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

Thanks Fortech! I'll let the egghead folks know.

Ifeoluwa Sobogun
Ifeoluwa Sobogun
~ 2 years ago

Maybe it's just me, but I've tried using these tutorials three times and it seems too fast-paced.

Rian Sanjaya Ng
Rian Sanjaya Ng
~ 2 years ago

Hi Kent greate course. I notice the code is sandbox there is a folder src with index.js inside, and in the index.js it somehow use parcel.js I wonder when this index.js is called and what it does ?

Keith Price
Keith Price
~ 2 years ago

Coming from VB programming, I find myself struggling with the idea that props don't have to be defined in the receiving component. Anything we pass to it just becomes a prop. I kinda get it but it still keeps tripping me up when trying to understand existing code.

Keith Price
Keith Price
~ 2 years ago

I was surprised that we can assign html to a variable with no enclosures, such as quotes.

const greeting = (props) => <div> { props.msg } </div>
Keith Price
Keith Price
~ 2 years ago

Can you help us understand all the different syntax supported by arrow functions? I keep getting lost when I see some with parenths, some without, some with empty parenths. Some with curly braces, some without, etc. I can look up the supported syntax, but I can't figure out when I should (or must) use one over another?

Keith Price
Keith Price
~ 2 years ago

So, does capitalizing a function like that (Message) essentially make it a component variable (that is, a variable that holds a component)?

Keith Price
Keith Price
~ 2 years ago

Is there a guideline or rule to help us know when to use name=value vs name: value? I find it very confusing.

<Welcome msg= "Welcome to our site" />

And I guess, the reason the above didn't require {} is because Welcome is defined as a component variable?