Arrow Function & 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.

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 (
     <>
       <h1>{props.name}</h1>
       <h2>{props.age}</h2>
     </>
   );
 }
 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'));
root.render(
  <React.StrictMode>
    <App name="Adil" age={23}/>
  </React.StrictMode>
);

// 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: https://bit.ly/CRA-vitals
reportWebVitals();

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

https://www.mediafire.com/file/3udvd1hhxjzm7om/Arrow+Function+And+Exports.rar/file