A Case for Learning Functional Components First

A week or so ago I wrote a quick intro article about leveling up with React, and wanted to continue with that thought.

I've been doing some more reading in the React docs, and found it interesting that they introduce Functional Components before Class Components. Which is totally backwards from the way that I learned it, but makes good sense.

I learned to create components with classes first, which made functional components look foriegn and difficult. Probably because of how I learned, I have always taught students to write class components first as well. In the future I think I will change that and teach functional components first though, because they are less complicated and teach people to think about their components as functions that take arguments.

In teaching students React, the hardest beginner concept is ALWAYS Props and State. People who have just gotten functions more or less firmly under their feet are suddenly thrown classes and internal objects, and the idea of passing information between instances. In my experience it takes an average beginner a solid three weeks of exposure to these ideas before they start to click. I think we could lower this hurdle (if not remove it entirely) by progressively teaching people to first write js functions, then React with functional components, and then introduce classes and class functions.

Here is an example of the progression I'm talking about.

An absolute beginner greeter function in javascript:

function greetUser(name) {
  console.log("Hello" + name)
}

If a person understands function declaration/invocation and paramaters, they can get this far.

It is not much harder to teach a stateless React Functional Component:

const Greeting = (props) => {
  return (
    <h3>Hello {props.name}</h3>
  )
}

export default Greeting

Yes, it is a simplistic example. We have done little more than move from the most basic named function to an arrow function held in a const -- so in other words we have es6-ified our initial function. And we are combining it with what a beginner will view as HTML (the JSX).

The big wins I see here are that a beginner learns about props as a single object, passed to a function as an argument. This might cause much less confusion when state is added with class components. Separating the learning of those two concepts might be a helpful strategy when state and props would be too much all at once.