Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 962 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Building a React.js App: Utilizing Stateless Function Components

5:01 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

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
Avatar
Ivo Sabev

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?

Avatar
Tyler

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

In reply to Ivo Sabev
Avatar
Andrey

Great course. Like the way you teach.
Thanks!

Avatar
Ruben

Thanks for this great course Tyler. Really enjoyed it!

Avatar
Fernando Alvarez Medina

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!

Avatar
Richard

awesome class, Great Job!!

Avatar
Max

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.

In reply to Tyler
Avatar
Nicholas

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.

Avatar
Sonar

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.

Avatar
Tyler

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.

In reply to Sonar
Avatar
Tyler

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.

In reply to Nicholas
Avatar
Sonar

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

In reply to Tyler
Avatar
Kylan Hurt

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!

Avatar
Rocky

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

Avatar
Igor Irianto

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!

Avatar
Mundaman

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.

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

components/Home.js

class Home extends React.Component {
  render() {
    return (
      <h2 className="text-center">
        Search By Github Username Above
      </h2>
    )
  }
}

export default Home;

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 Arrow 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 our function is props. In this example, we're not going to have any props.

components/Home.js

const Home = () => {

}

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.

components/Home.js

const Home = () => {
  return (
    <h2 className="text-center">
      Search By Github Username Above
    </h2>
  )
}

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

components/Main.js

const Main = ({children, history}) => {
  return (
    <div className="main-container">
      <nav className="navbar navbar-default" role="navigation">
        <div className="col-sm-7 col-sm-offset-2" style={{marginTop: 15}}>
          <SearchGithub history={history}/>
        </div>
      </nav>
      <div className="container">
        {children}
      </div>
    </div>
  )
}

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

Github/Repos.js

const Repos = ({repos}) => {
  return (
    <div>
      <h3> User Repos </h3>
      <ul className="list-group">
        {repos.map((repo, index) => {
          return (
            <li className="list-group-item" key={repo.name}>
              {repo.html_url && <h4><a href={repo.html_url}>{repo.name}</a></h4>}
              {repo.description && <p>{repo.description}</p>}
            </li>
          )
        })}
      </ul>
    </div>
  )
}

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

GithubUserProfile.js

const UserProfile = ({bio}) => {
  return (
    <div>
      {bio.avatar_url && <li> <img src={bio.avatar_url}/></li>}
      {bio.name && <li>Name: {bio.name}</li>}
      {bio.login && <li>Username: {bio.login}</li>}

      ...

    </div>
  )
}

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 addNote method. Then grab our return statement, throw that into here, and format it. Go ahead and update this.props. All right.

Notes/Notes.js

const Notes = ({username, notes, addNote}) => {
  return (
    <div>
      <h3> Notes for {username} </h3>
      <AddNote username={username} addNote={addNote} />
      <NotesList notes={notes} />
    </div>
  )
}

Then, the very last one, I believe, is NotesList. We have our function. Then we grab our render method. Notice here that I'm using the Arrow 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.

Notes/NotesList.js

const NotesList = ({notes}) => {
  return (
    <ul className="list-group">
      {notes.map((note, index) => (
        <li className="list-group-item" key={index}>{note}</li>
      ))}
    </ul>
  )
}

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 createClass, instead we're just having these lightweight functions that return us whatever our dom looks like for this component.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?