Render a Stateless Component within a ReasonML Application using ReasonReact

Instructor: [00:00] Taking a look at this page, we see ReasonReact's rendering some text, and it's also logging some output to the console whenever it's clicked on. Pretty cool, but let's create our own component.

[00:15] If we added a file called helloworld.ra, now immediately, we're going to see BuckleScript create this .bs.js file for us. Right now, there's nothing inside there. Soon, it's going to hold the optimized JavaScript for our component.

[00:34] Inside this file, the first thing we're going to do is just define this component, say that component equals reasonreact.statelesscomponent. We could also create a reducer component. However, we're going to focus on stateless components right now.

[00:54] Additionally, our component's going to be named Hello World, and you'll notice that once I save this file, Reason automatically adds a semicolon to this. This is just one of the many advantages of Reason's awesome tooling.

[01:09] When working with ReasonReact, we return components by using a function called Make. Make is going to take the props of our component. The only prop that's necessary is the children prop.

[01:28] In cases such as this one, where we don't want to use this children prop, we can add an underscore in front of it to tell BuckleScript that this is going to be an optional prop. As a result of this, the compiler is not going to complain when it's not being used within our component.

[01:48] Inside of our Make function, the first thing we're going to do is use the spread syntax and just pass in the component that we defined above. Inside of our Make function, the next thing we're going to do is add a render method.

[02:03] Render is going to take the self argument, which is just like the this keyword that's seen when working within React Classes. Additionally, we're going to make this an optional prop by adding an underscore, and then we can just return some DOM elements.

[02:25] In this case, we're going to return an H2 that has some text inside of it. We're just going to say, "Hello there, world." Reason's not going to know how to treat this string, so we're going to need to use the string to element method that ReasonReact provides us with.

[02:47] The component inside of our page file is using this directly within the render function, and that works perfectly fine. However, there's going to be situations where you might be using this multiple times within a component, so you'll see it defined above like so.

[03:04] To use the variable we just defined, we're going to need to encapsulate it within parentheses. Inside our first set of parentheses, we're going to pass string. I'm actually going to rename that to just str, make it a little more shorthand.

[03:20] Before I do so, though, I'm just going to wrap our, "Hello there, world," in double quotes. If we don't do this, then we won't adhere to the string format that this function's expecting.

[03:30] Before we move on, let's just rename string to str. If you noticed, once I hit save, Reason automatically formatted our code for us. It also removed parentheses around the self argument that we're passing into our render function.

[03:48] Now that our component's ready, we can go back into our index.re file and swap out that page component for the Hello World component we just defined. One thing to point out is that we never exported any files, nor did we have to import this component in order to use it.

[04:11] Because we're using ReasonReact, it's going to infer the location of Hello World by searching for a Reason file with this same name. If we go back to the browser and refresh, we see that our, "Hello there, world," text is being rendered within the H2 tags that we specified within our component.