⚠️ This lesson is retired and might contain outdated information.

Building a React.js App: Utilizing Stateless Function Components

Tyler McGinnis
InstructorTyler McGinnis
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 6 years ago

As of React 0.14 we can now create components with functions rather than React.Component or createClass. In this video, we'll walk through transferring all our Class Components to Stateless Function Components.

...I was going to end this series at video number 16 but, as React keeps adding more features, I can go ahead and keep adding new videos. What we're going to do in this video is we're going to walk through a new feature as of React 1.4 which is called stateless functional components.

What stateless functional components are is you'll notice here that throughout a lot of our code, we have a lot of components that simply just have a render method. We have home. We have main. We have some other components as well. These components are really simple.

Ideally, if you're doing a good job of programming in React, you're going to have a lot of components that simply take in data as props. For example, this main component, all it does is it takes in some props, and it displays that to the view.

Sometimes it would be nice to not have to create a whole class if you want to simply make a component. What we're going to do here is we're going to walk through all of our components and modify them just a little bit to make them a little bit more clean.

I'm going to go ahead and simply make a function here. I'm using the ES6 Eros syntax, which we talked about a few videos ago, but this is fundamentally just a function. The very first argument that's going to be passed to out function is props. In this example, we're not going to have any props.

What we can do is this where we can take the render method of our component. If our component, one, doesn't have any state and, two, only has a render method, we can then go ahead and make that just a function. Now this function is pretty much the exact same thing as our class we had earlier. It'll behave the exact same way to React.

Let's go ahead and test this. There we go. Everything still works. Let's go ahead and fly through some of these other components. Let's go to main. Then I'm going to create a function here, which is just going to return our render method. You'll notice now that this function actually takes in some props. What React does is it provides props as the first argument into your function.

What I'm going to do here is kind of a mix of two ES 6 features. It's a mixture of object destructuring, which we talked about a few videos ago, and it's also a mixture of this thing called default parameters.

What we can do here is if you have a function that takes in an object, you can go ahead and use open curly brace, close curly brace, and put in the properties of that object. Then you can access the properties of that object inside of your function simply as the variable that you used here.

Again, it would be the exact same thing as doing something like that. Instead, we can go one level deeper. Go ahead and take off history and children from this .props and go like that. It's pretty clean.

Let's go ahead and do the rest of our components real quick. Here I'm going to make a repos function. Let's go ahead and grab our render method. Notice here, too, this function has prop types. It behaves the exact same way. We can go ahead and stick a prop type property on our function itself. It'll still behave normal.

In this one, we have this.props.repos. I'm going to go ahead and take off this.props and throw in repos up here. Now let's do user profile. I'm going to make a function. This function is going to take in some props, which is a bio object. Then we move our render method up. Now I'm going to get rid of this.props.

I think we just have one or two more. You'll notice this one has some methods on it, so we're not going to do that one. We are going to do notes, which takes in a few things. It takes in a username, it takes in notes, and it takes in an add note method. Then grab our return statement, throw that into here, and format it. Go ahead and update this.props. All right.

Then, the very last one, I believe, is notes list. We have our function. Then we grab our render method. Notice here that I'm using the Eros syntax for my functions. You don't need to do that. You can just use the regular function keyword. Since we've gone all ES6, I'm going to go ahead and do that. Then here we're going to have notes.

This looks great. We're good. Now we have everything functioning the exact same, but now instead of having classes all over the place or even using create class, instead we're just having these lightweight functions that return us whatever our down looks like for this component.

Siavash
Siavash
~ 8 years ago

you can avoid return also by using parens like

  <h2>hello world</h2>
)
Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

I believe I mention this in one of the previous videos. Thought it's a pretty common practice now, I'm not a huge fan just because if it's on a new line I want to explicitly see a return statements, since, Javascript. But, it's preference.

Pete
Pete
~ 8 years ago

Awesome update; Thanks for staying current!

Would love to see an extension on this for adding unit tests with karma!

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

Good idea!

Andreas
Andreas
~ 8 years ago

Did not know much about React & ES before and will definitely do one of the next projects based on this tech. Thanks for this series. Enjoyed it very much.

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

You're very welcome. Thanks Andreas!

Mac Ryan
Mac Ryan
~ 8 years ago

As a back-ender picking up a bit of modern front-end, I found this series spectacular. As a TDD geek, I second the idea of expanding on it with testing. Thanks a lot for the hard work! :)

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

Welcome to the front end world Mac! Glad you enjoyed the series. I really appreciate the kind words. Definitely planning on adding testing in eventually. Take care!

Tyler

Anton
Anton
~ 8 years ago

Is it possible to use Rebase with only ES6 Stateless Components? if so, please let me know I have been struggling! Thanks!

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

Hi Anton,

Unfortunately Stateless Functional Components don't have a this object (for now, not sure on the future plans), so it's impossible to use Re-base (or anything that requires context) with stateless functional components.

Ben Turner
Ben Turner
~ 8 years ago

Yep, been a great intro to React / ES5 / ES6 / basically front-end - as a Rubyist, I quite like some of the syntactic sugar of ES6. Dare I suggest it's sort of similar to what CoffeeScript set out to do! Am looking forward to trying to build my own app based off what I've learned here - thanks for a great video series Tyler; well worth this month's subscription fee alone.

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

Thanks Ben! "ES6 is Coffeescript the good parts". :)

Francisco De La Cruz
Francisco De La Cruz
~ 8 years ago

What an absolutely well done course man. I think the only the thing that would to it is doing some testing and perhaps use flux/redux. It seems it would be greatly received. Thanks for the great work.

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

Thanks Francisco! Testing and Redux are in my plans. Now just need to find the time. Thanks again!

Subeesh
Subeesh
~ 8 years ago

Great tutorial Tyler! Looking forward to the testing and redux lessons. thanks!

Charles
Charles
~ 8 years ago

How do you deploy this app to Heroku?

Joe
Joe
~ 8 years ago

Thanks for making this video series. It was excellent! I would love to see some lessons on testing this app as well. I am watching the React Testing Cookbook videos to try and understand how to write tests for this app, but I am having difficulties with the promise-based architecture of Axios and our Github functions.

Rajitha
Rajitha
~ 8 years ago

Thanks Tyler for awesome tutorial! Just wanted to know if using const instead of class has any performance enhancements

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

Hi Rajitha,

Great question. There is a VERY slight performance gain when using classes compared to createClass. The reason for that is createClass, as I partially touched on in the vids, autobinds the 'this' keyword for you. So if you have many components (1000+), you'll see a minor gain using classes because that autobinding doesn't occur.

Ivo Sabev
Ivo Sabev
~ 8 years ago

I love how the tutorial evolves from ES5 to ES6 and then the Stateless components syntax. Any thoughts on bringing this one step further and add Relay in the mix?

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

Thank you! I'd argue Relay is like 3 steps further :) No plans currently but maybe one day!

Andrey Zhuk
Andrey Zhuk
~ 8 years ago

Great course. Like the way you teach. Thanks!

Ruben
Ruben
~ 8 years ago

Thanks for this great course Tyler. Really enjoyed it!

Fernando Alvarez Medina
Fernando Alvarez Medina
~ 8 years ago

Amazing tutorial, I know this is not in the scope of the tutorial but I was wondering if you could explain how to serve this app using a server, node.js for example. I would like to understand the full stack.

Maybe in another tutorial or something.

Thanks!!! great work!

Richard Hess
Richard Hess
~ 8 years ago

awesome class, Great Job!!

Max Orelus
Max Orelus
~ 8 years ago

This is probably the best course I've watch on getting started with React. Most instructors jump straight into new syntax, and mix arrow function classes style. Your approach is very pragmatic to where I actually know the difference with all the curly brace non-sense going on. Thanks a bunch.

Nicholas Murray
Nicholas Murray
~ 8 years ago

Hi Tyler,

I've really enjoyed this tutorial and been trying to to take it one step further by adding Github authentication to my version of your firebase app.

After setting up the tokens on the github and firebase side I have ran into trouble setting up login facilities.

Could you point to any resources that could demonstrate the addition of a login route that would authenticate a user of your note-taker app as a github user.

Thanks, Nicholas.

Sonar
Sonar
~ 8 years ago

the stateless function components is very cool for me, and this is a pretty expression. But anyone can tell me is there any benefit to use function to express a component ? I have this question because some people say on of the reason make React popular is with React we can make a view as a function.

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

Hi Sonar, I think to answer your question we should take it out of the context of React and just look at it in the context of JavaScript. Rephrased, you're asking "What's the benefit of using a function?". The nice thing about React is your intuitions you have about creating functions will hold true for React components. So why are components as functions nice? The same reason functions are nice. Composability and re-usability, among other things.

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

Hi Nicholas, usually the Firebase docs are the best place to look. After that, make sure you're using the new Firebase 3.0 if you're using the new Firebase dashboard.

Sonar
Sonar
~ 8 years ago

Tyler, thanks for your answer! this concise answer make sense for me.

Kylan Hurt
Kylan Hurt
~ 7 years ago

Excellent tutorial Tyler. Making me feel good about my Egghead membership. I'd especially like to thank you for taking the time to do video edits / updates, reply to our comments, and keep the GitHub page maintained.

Much appreciated and I'll be on the lookout for your tutorials / work in the future!

Rocky
Rocky
~ 7 years ago

Excellent Tutorial! You take the academic and present it in a very practical, real-world way which is always the best way to learn! Thanks again

Igor Irianto
Igor Irianto
~ 7 years ago

I have been watching several of your React tutorials - more than half of my react knowledge is all thanks to you. Great video. Easy to follow, good increment, beginner/ intermediate friendly. Looking forward to see your future lessons, man!

Mundaman
Mundaman
~ 7 years ago

Hi Tyler, Thank you for a great course! Really helped to fill some gaps in my knowledge. I especially liked the way you went through refactoring from ES5 to ES6, then to Stateless Function Components.

Markdown supported.
Become a member to join the discussionEnroll Today