Building a React.js App: Utilizing Stateless Function Components

you can avoid return also by using parens like

  <h2>hello world</h2>
)

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.

Awesome update; Thanks for staying current!

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

Good idea!

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!

Tyler

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

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.

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

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.

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.

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.

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 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.

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.