Import export not working with React

JavaScript
1

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>
  )
}
2

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.

3

Don’t use CDN links, use Vite.

5

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.

7

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.

9

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
10

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?

12

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