React component is a function not a class

Question

So I'm trying to learn ReactJs( I have an AngularJs Background) and Im having trouble following a tutorial.

To create the project we run this command:

npx create-react-app app-name

Then after that in the tutorial the App.js is class. But when I run that command mine is a function.

Tutorial App.js

class App extends Component {
render() {
return (
  <div className="App">
    <h1>Hello, world!</h1>
  </div>
);
}
}

My App.js

function App() {
return (
<div className="App">

</div>
);
}

I'm so confused in this part.

It's likely just the version of react they're using in the tutorial. Yours is the most up to date. But like John says, you can write components both ways. — Chris Ngo, Jul 25 '19 at 06:24

score 3 · Accepted Answer · answered Jul 25 '19 at 06:34

There are different ways to write that same: function component and class component.
Where class component supports the whole lifecycle of React component, function component is actually only the render function.
You can learn about the differences here:
https://reactjs.org/docs/components-and-props.html#function-and-class-components

In the last versions of React a new feature called Hooks came out, which let you do everything you need in function component: https://reactjs.org/docs/hooks-intro.html

Hope this helps :)

Thanks for the answer it looks like react direction is in to `hooks` — code.cycling, Jul 25 '19 at 06:42

score 0 · Answer 2 · answered Jul 25 '19 at 12:11

React components can be classes or can be functions. It works for both. The advantage with using class components is that it gives your component a lot more functionality like state, lifecycle methods. These components are usually complex. On the other hand function components are pretty straight forward and basic to learn. You can also convert functional components to class components using this: https://reactjs.org/docs/state-and-lifecycle.html

Hope this helps!!

React component is a function not a class

2 Answers2