lesson 09: Understanding React Modules | import module | export module

Veröffentlicht am: 25 Juni 2023
auf dem Kanal: Javascript For Everything

lesson-09: Understanding React Modules | import module | export module

. What is Module in React
. how many modules system available for React or Node.js
. React used which module system
. How many way of export a module
. How many way to import a module
. What are the differences between named export and export default module
. named export vs export default
. What is re-export technique to reduce import mess

Modules:
When move our code into seperate file and attach that file to our main file,
that seperate file is called 'Module'.

. Understanding modules: import export

Modules are 2 types:
. CommonJS module : exports / modules.exports | require()
. ES6 module : export / export default | import

Export in ES6 module are 2 types:
. named export
. export default

Import in ES6 Modules are 2 types:
. Global Module
. User Created Module

. import entire files
. import a particular object

import from export default:
import Component from './component'
import { default as Component } from './component'

import from named export:
import { Component } from './component'
import * as Component from './component' : Wild Import
import { Component as MyComponents } from './component' : Rename

import from named export + export default
import Component, { Component as Com } from './component'
import Component, * as MyComponents from './component'

NB: React has no `export default` component, everything as named export

import * as React from 'react'

but if try this way,

import React from 'react' : Then why work this
import { default as React } from 'react' : or " " "

This is possible for two reasons:
. First
JavaScript doesn’t type check the imports. It will allow you to import whatever and
then if something goes wrong, it will only throw an error during runtime.

. Second:
you most likely use React with some bundler like WEBPACK, and it’s smart enough
to check if no default property is set in the export, and where this is the case
to just use the entire export as the default value.

When you use TypeScript, it’s a different story. TypeScript checks that what you are trying to
import has the matching export. If the default export doesn’t exist, the default behavior of
TypeScript will be to throw an error, something like this:

Thankfully, since version 2.7, TypeScript has the `allowSyntheticDefaultImports` option.

When this option is enabled TypeScript will pretend that the imported module has the default export.
So we’ll be able to import React normally. Modern versions of create-react-app enable this option by default.

Re-export:
When we use regular export command to export a module, then when we try to import that
component into our project, we have to impore every file seperately, if that component
is inside nexted folder then our code become very messy.

from:
import { AppHeaderSkeleton } from './lib/components/appHeaderSckeleton'
import { ErrorBanner } from './lib/components/errorBanner'
import { ListingCard } from './lib/components/listingCard'
import { PageSkeleton } from './lib/components/pageSkeleton'

to
import {

AppHeaderSkeleton,
ErrorBanner,
ListingCard,
PageSkeleton

} from './lib/componnents'

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Music: Ambient Corporate by RinkevichMusic
/ rinkevichmusic
https://protunes.net/
Video Link: • RinkevichMusic - ...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Auf dieser Seite können Sie das Online-Video lesson 09: Understanding React Modules | import module | export module mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Javascript For Everything 25 Juni 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 39 Mal angesehen und es wurde von 0 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!