Arrow Function In React JS
Default Export VS Named Export In React JS

In This Blog, you are going to lean 2 things, firstly Arrow functions in react js and secondly default export vs named exports. Both concepts are very useful for react developers or full stack developers.

React Arrow Function

  • It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword.
  • We can also create arrow functions with parameters.
  • Arrow functions were introduced in ES6.
Arrow Function Example

App.js File – Code (Arrow Function)

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

 function App() {
   return (
     <h1>Learning Never Ends</h1>

 const App = () => <h1>Mohammad Adil</h1>;
 const App = (props) => {
   return (
 const App = (props) => <h1>{props.age}</h1>;
const App = props => <h1>{props.age}</h1>;

export default App;

Index.js File – Code (Arrow Function)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
    <App name="Adil" age={23}/>

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:

Default Export VS Named Export In React JS

Default Export Vs Named Export

  • ES6 provides us to import a module and use it in other files
  • ES6 provides two ways to export a module from a file: named export and default export.

Default Export: (export default)

  • One can have only one default export per file.
  • When we import we have to specify a name

Named Export: (export)

  • With named exports, one can have multiple named exports per file.
  • Then import the specific exports they want surrounded in curly braces.
  • The name of imported module has to be the same as the name of the exported module.

Click Below Link to Download Notes & Source Code Of This Blog

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *