Modifying the code

1. open App.js 

You should see the pre-included code

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;

 

2. replace everything with just this 

import React from 'react';

const App = () => {
  return <h1>Hello World!</h1>
}

export default App;

 

3. Save the file 

4. Open the terminal in this directory and run 

npm start

 

5. Now open your web browser and go to this link http://localhost:3000/. You should see something like this

Hurray 🥳 You have edited your own ReactJS application. Pat your back and get ready for even more action. 

 

Note -

function App () {
}

and 

const App = () => {
}

 

Are both valid ways of defining a function in JavaScript ES6. For this series we will be using the second method also called as "fat arrow" method as it provides some additional benefits over simple functions.

Discussion

Be the first one to comment!