An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow functions are always function expressions; there is no arrow function declaration. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

Syntax

The descriptive declarations below contain the basic syntax of an arrow function.

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }

Let's declare a constant called perimeter...

const perimeter = function (value1, value2, value3) {
  return value1 + value2 + value3;
};
console.log(perimeter(5, 7, 9));

//21

That above is the old JavaScript way. With arrow functions, we have a cleaner way to write the same code. To convert to an arrow function, we remove the function keyword and put a fat arrow between the body and the parameters.

const perimeter = (value1, value2, value3) => {
  return value1 + value2 + value3;
};
console.log(perimeter(5, 7, 9));
//21

We can make this code much cleaner. Since the body of the function includes only a single line of code and returns a value, the code can be made even shorter by removing the return keyword as well as the curly braces

const perimeter = (value1, value2, value3) => value1 + value2 + value3;
console.log(perimeter(5, 7, 9));
//21

The function below takes zero parameters

const noParameter = () => "I have no parameter";
console.log(noParameter());
// Expected Output: I have no parameter

If there is only a single parameter, we don't include the parenthesis.

const square = number => number * number;
console.log(square(4));
//16

Let’s look at the regular function expression involving arrays. In the function expression below, the array method map() is used to obtain the length of the individual length of each name in the array.

const developers = ["Blanc", "Gozzy", "Bern", "Daniel"];

const devLength = developers.map(function (dev) {
  return dev.length;
});
console.log(devLength);
//Expected Output: Array[ 5, 5, 4, 6 ]

ES6 arrow functions provides an alternative way to write a shorter syntax compared to the function expression.

const developers = ["Blanc", "Gozzy", "Bern", "Daniel"];

// This statement returns the array: [5, 5, 4, 6]
developers.map(function (developer) {
  return developer.length;
});

// The regular function above can be written as the arrow function below
developers.map((developer) => {
  return developer.length;
}); // [5, 5, 4, 6]

// When there is only one parameter, we can remove the surrounding parentheses
developers.map((developer) => {
  return developer.length;
}); // [5, 5, 4, 6]

// When the only statement in an arrow function is `return`, we can remove `return` and remove
// the surrounding curly brackets
developers.map((developer) => developer.length); // [5, 5, 4, 6]

One of the factors that influenced the introduction of arrow functions was the need for shorter functions. The above function expression can be made shorter with just a single line of code.

const developers = ["Blanc", "Gozzy", "Bern", "Daniel"];

console.log(developers.map((dev) => dev.length));
//Expected Output: Array[ 5, 5, 4, 6 ]

Now that we know that one line function does not need braces. Let’s say we have an array of developers, each person is an object. We can use an array method called filter() to check for the developers under 28 years of age. In the example below, the first object in the array does not make the last print out of the array list because his age is above 28.

const developers = [
  {
    name: "Nnochiri Ezekiel",
    age: 45,
  },
  {
    name: "Okpara Favour",
    age: 26,
  },
  {
    name: "Eze Bernardine",
    age: 23,
  },
  {
    name: "Mere Daniel",
    age: 27,
  },
];

const under28 = developers.filter(developer => developer.age < 28);
console.log(under28);
/*
Expected Output: [ { name: 'Okpara Favour', age: 26 },
  { name: 'Eze Bernardine', age: 23 },
  { name: 'Mere Daniel', age: 27 } ]
*/

Let’s explore another method of finding the first object in the array which seems to have been excluded because of its age.

const developers = [
  {
    name: "Nnochiri Ezekiel",
    age: 45,
  },
  {
    name: "Okpara Favour",
    age: 26,
  },
  {
    name: "Eze Bernardine",
    age: 23,
  },
  {
    name: "Mere Daniel",
    age: 27,
  },
];

//const under28 = developers.filter(developer => developer.age < 28)

const developer = developers.find(developer => developer.age === 45);
console.log(developer.name);
//Expected Output: Nnochiri Ezekiel

Arrow function make functional programming code look cleaner and solve closure problems with readable and minimal syntax.

Before we start, let's quickly run through a couple of tools that should be in place before you start using or learning React.

• Basic familiarity with HTML & CSS.
• Basic knowledge of JavaScript and programming.
• Basic understanding of the DOM.
• Familiarity with ES6 syntax and features.
• Node.js and npm installed globally.
• Node.js and npm installed globally.

The goal of this article is to guide beginners to

• Learn about essential React concepts and related terms, such as components, props and state
• Build a very simple React app that demonstrates the above concepts.

Setup and Installation

Facebook has created Create React App, an environment that comes pre-configured with everything you need to build a React app. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, auto-prefix CSS files, and use ESLint to test and warn about mistakes in the code.

To set up a react app, run the following code in your terminal, one directory up from where you want the project to live.

npx create-react-app reactapp

Once that finishes installing, move to the newly created directory and start the project.

     cd react-tutorial
     npm start

Once you run this command, a new window will popup at localhost:3000 with your new React app.

Now, look into the project structure, we'd find the /public and /src directory, along with the regular node_modules, .gitignore, README.md, and package.json.

In /public, our important file is index.html, which is more like the index.html file we normally use just that is has a root div.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

To see how the environment automatically compiles and updates your React code, find the line that looks like this in /src/App.js:

To get started, edit src/App.js and save to reload.

And replace it with any other text. Once you save the file, you'll notice localhost:3000 compiles and refreshes with the new data.

Go ahead and delete all the files out of the /src directory, and we'll create our own boilerplate file without any bloat. We'll just keep index.js.

For my styling, I just copy-and-pasted the CDN link of materializecss into the index.html in the public folder. If you want, you can use Bootstrap or whatever CSS framework you want, I will go with Materializecss, I just find it easier to work with.

Go to https://materializecss.com/getting-started.html and grab the cdnjs link <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> which is the latest as of the time of writing this article. Paste this link just before the title element tag in index.html in the public folder

Now, we start proper in index.js, we're importing React, ReactDOM. Here, we render a simple message that says

We are fully prepare to build our react app

index.js
import React from "react";
import ReactDOM from "react-dom";
const message = <h3>We are fully prepare to build our react app</h3>;

ReactDOM.render(message, document.getElementById("root"));

We aim to create an App.js component where other components will be nested. We call it our root component. Let's render the App component in the index.js file before creating it in our src directory and import it as well.

index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />,document.getElementById("root"));

We are going to create the App component which is going to be a class component. Class components can have state, variables, methods etc. It is used for dynamic sources of data and handles data that might change like fetching data and user events.

App.js
import React from "react";
export default App;

Importing React and exporting components is seen as a compulsory thing when building with React. else there would be errors. These errors occur during the build time and cannot be dismissed. With this, the written code fails to compile.

App.js
import React from "react";
class App extends React.Component {
  render() {
    return (
      <div className='container'>
        <h1 className='blue-text'>World Best Footballers</h1>
      </div>
    );
  }
}
export default App;

The syntax we returned is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. JSX comes with the full power of JavaScript. React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

We are going to add state into our App.js

In the React sense, “state” is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called this. state We defined the data up in the state and pass down the properties of the state into the component.

App.js
import React from "react";
import Footballers from "./Footballers";
class App extends React.Component {
  state = {
    footballers: [
      {
        name: "Cristiano Ronaldo",
        club: "Juventus",
        position: "Forward",
        country: "Portugal",
        id: 1,
      },
      {
        name: "Lionel Messi",
        club: "Barcelona",
        position: "Forward",
        country: "Portugal",
        id: 2,
      },
    ],
  };
  render() {
    return (
      <div className='container'>
        <h1 className='blue-text'>World Best Footballers</h1>
      </div>
    );
  }
}
export default App;

Let's import a component I have created called Footballers and use its props, to display the array of objects I have created for the state.

App.js
render() {
    return (
      <div className='container'>
        <h1 className='green-text'>World Best Footballers</h1>
        <Footballers />
      </div>
    );
  }

Let's use the state created...

App.js
import React from "react";
import Footballers from "./Footballers";
class App extends React.Component {
  state = {
    footballers: [
      {
        name: "Cristiano Ronaldo",
        club: "Juventus",
        position: "Forward",
        country: "Portugal",
        id: 1,
      },
      {
        name: "Lionel Messi",
        club: "Barcelona",
        position: "Forward",
        country: "Portugal",
        id: 2,
      },
    ],
  };
  render() {
    return (
      <div className='container'>
        <h1 className='green-text'>World Best Footballers</h1>
        <Footballers footballers={this.state.footballers} />
      </div>
    );
  }
}
export default App;

We pass the properties in the Footballer component. Then use an ES6 arrow function to map through the individual footballers.

src/App.js
import React from "react";
const Footballers = (props) => {
  const { footballers } = props;
  const footballersList = footballers.map((footballer) => {
    return (
      <div>
        <p>Name:</p>
        <p>club:</p>
        <p>position:</p>
        <p>country:</p>
      </div>
    );
  });
};
export default Footballers;

Circling through this, we try to access each footballer.

src/App.js
import React from "react";
const Footballers = (props) => {
  const { footballers } = props;
  const footballersList = footballers.map((footballer) => {
    return (
      <div key = {footballer.id}>
        <p>Name: {footballer.name}</p>
        <p>club: {footballer.club}</p>
        <p>position: {footballer.position}</p>
        <p>country: {footballer.country}</p>
        <hr />
      </div>
    );
  });
  return <div>{footballersList}</div>;
};
export default Footballers;

Here, we are going to add another class component. We call it AddFootballer.js. This component would have a form. HTML form elements work a little bit differently from other DOM elements in React because form elements naturally keep some internal state. Also notice that a key prop was added to the div element that wraps the outputting JSX elements. Each child in an array or iteractor should have a unique key prop.

src/AddFootballer.js
import React, { Component } from "react";
class AddFootballer extends Component {
  render() {
    return (
    <div>
      <form>
        <label htmlFor='name'>Name:</label>
        <input type='text' id='name' onChange={} />
        <label htmlFor='club'>Club:</label>
        <input type='text' id='club' onChange={} />
        <label htmlFor='position'>Position:</label>
        <input type='text' id='position' onChange={} />
        <label htmlFor='country'>Country:</label>
        <input type='text' id='country' onChange={} />
      </form>
    </div>
   )
  }
}
export default AddFootballer;

Adding state to our class component..

src/AddFootballer
import React, { Component } from "react";
class AddFootballer extends Component {
    state = {
        name: null,
        club: null,
        position: null,
        country: null
    }
  render() {
    return (
    <div>
      <form>
        <label htmlFor='name'>Name:</label>
        <input type='text' id='name' onChange={} />
        <label htmlFor='club'>Club:</label>
        <input type='text' id='club' onChange={} />
        <label htmlFor='position'>Position:</label>
        <input type='text' id='position' onChange={} />
        <label htmlFor='country'>Country:</label>
        <input type='text' id='country' onChange={} />
      </form>
    </div>
   )
  }
}
export default AddFootballer;

The component created does nothing as we have not added the necessary events it needs to function. Handling events with React elements is very similar to handling events on DOM elements.

src/AddFootballer.js
import React, { Component} from "react";
class AddFootballer extends Component {
  state = {
    name: null,
    club: null,
    position: null,
    country: null,
  };
  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value,
    });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor='name'>Name:</label>
          <input type='text' id='name' onChange={this.handleChange} />
          <label htmlFor='club'>Club:</label>
          <input type='text' id='club' onChange={this.handleChange} />
          <label htmlFor='position'>Position:</label>
          <input type='text' id='position' onChange={this.handleChange} />
          <label htmlFor='country'>Country:</label>
          <input type='text' id='country' onChange={this.handleChange} />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}
export default AddFootballer;

In the code above, e is a synthetic event. React defines these synthetic events according to the W3C spec, so you don’t need to worry about cross-browser compatibility.

In the App.js, we create a function that handles the events which add data to our Array data.

src/App.js
Addfootballer = (footballer) => {
    footballer.id = Math.random();
    let footballers = [...this.state.footballers, footballer];
    this.setState({
      footballers: footballers,
    });
  };
  render() {
    return (
      <div className='container'>
        <h1 className='blue-text'>List of World Best Footballers</h1>
        <AddFootballer footballers={this.state.footballers} />
        <AddFootballers addfootballer={this.Addfootballer} />
      </div>
    );
  }
}

This now becomes the full screen of App.js file..

src/App.js
import React, { Component } from "react";
import Footballer from "./Footballer";
import AddFootballers from "./AddFootballer";

class App extends Component {
  state = {
    footballers: [
      {
        name: "Christiano Ronaldo",
        club: "Juventus",
        position: "Forward",
        country: "Portugal",
        id: 1,
      },
      {
        name: "Lionel Messi",
        club: "Barcelona",
        position: "Forward",
        country: "Argentina",
        id: 2,
      },
    ],
  };
  Addfootballer = (footballer) => {
    footballer.id = Math.random();
    let footballers = [...this.state.footballers, footballer];
    this.setState({
      footballers: footballers,
    });
  };
  render() {
    return (
      <div className='container'>
        <h1 className='blue-text'>List of World Best Footballers</h1>
        <Footballer footballers={this.state.footballers} />
        <AddFootballers addfootballer={this.Addfootballer} />
      </div>
    );
  }
}

export default App;

Going back to the AddFootballer component, we remove the console.log(this.state) which only enabled us to view the added array in the console.

src/AddFootballer.js
handleSubmit = (e) => {
    e.preventDefault();
    this.props.addfootballer(this.state);
  };

Here is the full screen

src/AddFootballer.js
import React,{ Component } from "react";
class AddFootballer extends Component {
  state = {
    name: null,
    club: null,
    position: null,
    country: null,
  };
  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value,
    });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.addfootballer(this.state);
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor='name'>Name:</label>
          <input type='text' id='name' onChange={this.handleChange} />
          <label htmlFor='name'>Club:</label>
          <input type='text' id='club' onChange={this.handleChange} />
          <label htmlFor='name'>Position:</label>
          <input type='text' id='position' onChange={this.handleChange} />
          <label htmlFor='name'>Country:</label>
          <input type='text' id='country' onChange={this.handleChange} />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}
export default AddFootballer;

Below is an overview of our simple React App