# Import export not working with React

**URL:** <https://forum.freecodecamp.org/t/import-export-not-working-with-react/572446>\
**Category:** Curriculum Help\
**Created:** [November 19, 2022, 5:59pm UTC](https://forum.freecodecamp.org/t/import-export-not-working-with-react/572446 "2022-11-19T17:59:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tsmithcode](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Tsmithcode](https://forum.freecodecamp.org/u/Tsmithcode)\
**Post date:** [November 19, 2022, 5:59pm UTC](https://forum.freecodecamp.org/t/import-export-not-working-with-react/572446/1 "2022-11-19T17:59:39Z")

</div>

I’m trying to follow along to a video and I’ve gotten to a point where I’m supposed to use import and export.

I’ve done everything the same in the video but my Header.js file is not getting imported so nothing actually renders onto the page when saved.

I’m VERY new to react

```auto
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js" type="text/babel" defer></script>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

```

```auto
import Header from './Header'
const root = document.getElementById('root')

ReactDOM.render(<Header />, root)

```

```auto
import React from 'react'

export default function Header() {
  return (
    <header>
      <img src="react.png" alt=""></img>
      <ul>
        <li>Pricing</li>
        <li>About</li>
        <li>Contacts</li>
      </ul>
    </header>
  )
}

```

---

<div class="post-metadata">

**Author:** ![Tsmithcode](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Tsmithcode](https://forum.freecodecamp.org/u/Tsmithcode)\
**Post date:** [November 19, 2022, 6:43pm UTC](https://forum.freecodecamp.org/t/import-export-not-working-with-react/572446/2 "2022-11-19T18:43:48Z")

</div>

Failed to load resource: the server responded with a status of 404 (Not Found)

I’m noticing export / import are not working regardless of using react or not.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [November 19, 2022, 7:05pm UTC](https://forum.freecodecamp.org/t/import-export-not-working-with-react/572446/3 "2022-11-19T19:05:24Z")

</div>

Don’t use CDN links, use Vite.

> [@React Course: Uncaught ReferenceError: require is not defined](https://forum.freecodecamp.org/t/react-course-uncaught-referenceerror-require-is-not-defined/569059/3):
>
> As far as I know, component import/export is not going to work with just the CDN link (without a build process). You will have to have all the components in index.js (or the HTML with a script element). I would highly recommend you use [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) and not CDN links. Or an online editor like StackBlitz or CodeSandbox.

---

<div class="post-metadata">

**Author:** ![Tsmithcode](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Tsmithcode](https://forum.freecodecamp.org/u/Tsmithcode)\
**Post date:** [November 19, 2022, 7:24pm UTC](https://forum.freecodecamp.org/t/import-export-not-working-with-react/572446/5 "2022-11-19T19:24:10Z")

</div>

edit\*\* I’ll look into vite

So clearly, I’m importing react in a wrong way.

he did mention this was the “easy” way to set up react. does anyone have a source for the proper way to import react to be able to use it? Like I said, I’m really new to React.

---

<div class="post-metadata">

**Author:** ![Tsmithcode](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Tsmithcode](https://forum.freecodecamp.org/u/Tsmithcode)\
**Post date:** [November 19, 2022, 9:06pm UTC](https://forum.freecodecamp.org/t/import-export-not-working-with-react/572446/7 "2022-11-19T21:06:25Z")

</div>

So, I’m watching a video of how to set up React.

It had me downloade Node.js and a chrome extension and then download and create some things in the VS code terminal.

I have now launched a “server” that popped up in my browser that has a spinning react symbol with “learn react” underneath.

Does this sound like I’m importing React in the correct way?

Sorry, I just want to make sure I’m actually doing this correctly haha.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [November 19, 2022, 9:24pm UTC](https://forum.freecodecamp.org/t/import-export-not-working-with-react/572446/9 "2022-11-19T21:24:47Z")

</div>

Yes, if the starting code is showing up the project is running correctly.

When using create-react-app it will have the imports in `index.js` by default at the top (in Vite it is in `main.jsx`).

```auto
import React from 'react';
import ReactDOM from 'react-dom/client';

```

`React` does not need to be imported anywhere else for function components. With class components you will have to either import `Component` or `React` when using `React.Component`

---

<div class="post-metadata">

**Author:** ![Tsmithcode](https://avatars.discourse-cdn.com/v4/letter/t/0ea827/32.png) [@Tsmithcode](https://forum.freecodecamp.org/u/Tsmithcode)\
**Post date:** [November 19, 2022, 9:28pm UTC](https://forum.freecodecamp.org/t/import-export-not-working-with-react/572446/10 "2022-11-19T21:28:04Z")

</div>

I used Create React App but now I think I understand what Vite is. It apparently just creates the starting template faster? Is Vite kind of the standard? What are the differences other than set up speed?

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [May 21, 2023, 9:37am UTC](https://forum.freecodecamp.org/t/import-export-not-working-with-react/572446/12 "2023-05-21T09:37:51Z")

</div>

Closed on May 21, 2023, 9:37am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.