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.
you can avoid return also by using parens like
Awesome update; Thanks for staying current!
Would love to see an extension on this for adding unit tests with karma!
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.
You're very welcome. Thanks Andreas!
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! :)
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!
Is it possible to use Rebase with only ES6 Stateless Components? if so, please let me know I have been struggling! Thanks!
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.
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.
Thanks Ben! "ES6 is Coffeescript the good parts". :)
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.
Thanks Francisco! Testing and Redux are in my plans. Now just need to find the time. Thanks again!
Great tutorial Tyler! Looking forward to the testing and redux lessons. thanks!
How do you deploy this app to Heroku?
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.
Thanks Tyler for awesome tutorial! Just wanted to know if using const instead of class has any performance enhancements
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.
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?
Thank you! I'd argue Relay is like 3 steps further :) No plans currently but maybe one day!
Great course. Like the way you teach. Thanks!
Thanks for this great course Tyler. Really enjoyed it!
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!
awesome class, Great Job!!
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.
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.
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.
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.
Tyler, thanks for your answer! this concise answer make sense for me.
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!
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
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!
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.