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

Creating a Stateless Functional Component in React

Creating a Stateless Functional Component in React

3:11
Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these components "stateless functional components". In this lesson, let's take a look at how to define a stateless function component, and how to integrate useful React features like Prop Type validation while using this new component syntax.
Watch this lesson now
Avatar
egghead.io

Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these components "stateless functional components". In this lesson, let's take a look at how to define a stateless function component, and how to integrate useful React features like Prop Type validation while using this new component syntax.

Avatar
Tey

I know this is on the frontier, but for now, while hot reload 3 is being worked on, have you found a way to have the stateless 'non-extended' components play nice with hot reload (aka trigger the expected code refreshes). I fully embrace the simplicity of this syntax when you don't need react methods, but the constant browser refreshing... the horror... the effort...

In reply to egghead.io
Avatar
Josh Black

I know your pain! I went through the exact same thought process when I first started using them, and actually ended up sticking to the Class variation as a result for a while.

Thankfully, the work being done on react-hot-loader@^3.0.0 is relatively stable, and so in more recent projects I've been adding the newest version of the loader in order to get hot module replacement for stateless components. The setup involves around 3 steps, adding RHL to your webpack config, your babel config, and then inside of your application itself when you use the new AppContainer component to register your application.

Hope this helps!

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