The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building a React.js App: Utilizing Stateless Function Components

Building a React.js App: Utilizing Stateless Function Components

5:01
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.
Watch this lesson now
Avatar
egghead.io

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.

Avatar
Siavash

you can avoid return also by using parens like

comp = ()=> (
  <h2>hello world</h2>
)
Avatar
Tyler

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.

In reply to Siavash
Avatar
Pete

Awesome update; Thanks for staying current!

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

Avatar
Andreas

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.

Avatar
Tyler

You're very welcome. Thanks Andreas!

In reply to Andreas
Avatar
Mac Ryan

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! :)

In reply to Tyler
Avatar
Tyler

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

In reply to Mac Ryan
Avatar
Anton

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

In reply to Tyler
Avatar
Tyler

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.

In reply to Anton
Avatar
Ben Turner

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.

In reply to Tyler
Avatar
Tyler

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

In reply to Ben Turner
Avatar
Francisco De La Cruz

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.

Avatar
Tyler

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

In reply to Francisco De La Cruz
Avatar
Subeesh

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

Avatar
Charles

How do you deploy this app to Heroku?

Avatar
Joe

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.

Avatar
Rajitha

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

Avatar
Tyler

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.

In reply to Rajitha
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?