Import export not working with React

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

<!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>
import Header from './Header'
const root = document.getElementById('root')


ReactDOM.render(<Header />, root)
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>
  )
}

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.

Don’t use CDN links, use Vite.

When using CDNs for Babel and React, you do not import anything. The libraries are already available. Also, you can not use import and export unless the script element’s type attribute value is module. However, for Babel to work, the type attribute value needs to be babel/text. This means you will not be able to use import Header from ./Header either.

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.

It is a very easy way to use React, but you just can not import other components. All the components would need to be inside index.js. The problem with that is as your app grows in size, there is just too much code in index.js. Plus, being able to create separate components in separate files is much better.

Example:

index.html

<!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">
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="index.js" type="text/babel"></script>
  </body>
</html>

index.js

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

function App() {
  return (
    <div>
      <Header />
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

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.

Did you use Vite or Create React App?

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).

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

1 Like

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?

Vite has a little more setup configuration than CRA, but it runs faster in development while making changes to your project, even as your project grows in size.

1 Like