react app looks different from one in w3school and other tutorials

Question

this is the default app code in w3school or other courses in their directory (/myfirstreact/src/App.js:) :

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';



class App extends Component{
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
    }

    export default App;

and this is mine :

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

i still didn't change anything and i cant follow the course with this different code and even when i manually type the default code i get lots of errors !!!! can someone please tell me how can i solve this ??

Answer 1

Facebook introduces Hooks in their 16.8 version and it works with only functional components so in some of the tutorials they have started implementing a new hook API so that's why you found functional components .w3schools have not updated their tutorials for Hook API.

I suggest you to start with HOOK API because it is easy to understand and also there is less memory leak compare to class base components and they solve many issues which was there in class base components.

You can refer below link for hook startup:

https://reactjs.org/docs/hooks-reference.html