React 07: Import Export

---

include arbitrary code

import './bootstrap';

Includes a file without importing anything.

This will execute the target module without affecting the scope of the active module.

But it may have side-effects such as declaring globals or modifying existing globals.

https://stackoverflow.com/a/42252008/759452

---

import/export for utility functions

utilities.js

export function getNewExpirationTime() {
  return Date.now() + 15 * 1000;
}
export function generateId() {
  return 13423;
}

in other file

import { getNewExpirationTime, generateId } from './utilities';

export default function App() {
	const expTime = getNewExpirationTime();
	const genId = getArbitratyId()
}

---

import/export for utility functions

CommentsData.js

export const commentsProduct = [
  {
    prodname: 'bike',
    comment: 'My favorite bike!'
  },
  {
    prodname: 'washing liquid',
    comment: 'Clean it up'
  },
  {
    username: 'BuryHeadInSand',
    comment: 'Wild ostriches make the best pets.'
  }
]
export const commentsProfile = [
  {
    profileImg: 'https://images.unsplash.com/photo-1615751072497-5f5169febe17?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1335&q=80',
    username: 'ChewToy',
    comment: 'I don\'t like cats at all.'
  },
  {
    profileImg: 'https://images.unsplash.com/photo-1563482776068-4dac10f9373d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    username: 'BuryHeadInSand',
    comment: 'Wild ostriches make the best pets.'
  }
]

in other file

import {commentsProfile} from './CommentsData';

export default function App() {
	const firstProfile = commentsProfile[0];
}

---

import/export for CSS

TitleScreen.module.css

.btn {
  height: 45px;
  width: 110px;
}
.btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

App.js

mport titlescreen from './styles/TitleScreen.module.css'

button className={titlescreen.btn}>Play</button>

---

default vs named exports

You can export a function component from a file using either default or named exports.

Import must then be done using the relevant technique — different whether default or named exports.

// default export
export default function Gallery() {}
// must use import syntax:
import Gallery from './Gallery';

// named export
export function Profile() {}
// must use import syntax:
import { Profile } from './Gallery';