-1

I am making a Typescript and React app. I am using 4 main files, App.tsx, Header.tsx, Ap.css. I think the real problem is the way I am trying to use the add the Header.tsx file to App.tsx.

Please help

App.tsx:

import React from "react";
import Header from "./Header";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

export default App;

Header.tsx:

import React from "react";
import "./Header.css";

function Header() {
  return (
    <div className="nav-container">
      <nav>
        <a href="#!">Home</a>
        <a href="#!">About</a>
        <a href="#!">Projects</a>
        <a href="#!">Resume</a>
      </nav>
    </div>
  );
}
export default Header;

App.css:

.App {
  text-align: center;
  color: white;
}

body {
  background-color: #171A25;
  color: #ffffff;
}

Header.css:

body {
    margin: 0px;
    background-color: #121625;
}
.nav-container {
    text-align: center;
    font-size: 24px;
    color: white;
}
Phil
  • 157,677
  • 23
  • 242
  • 245
xpress
  • 90
  • 1
  • 6
  • 1
    What is your question? What do you expect to see vs what do you actually see? Are there any errors reported in your terminal or the browser dev-tools console? – Phil Jul 03 '22 at 23:27
  • No repro ~ https://codesandbox.io/s/wizardly-meadow-9m6yp1?file=/src/App.tsx – Phil Jul 03 '22 at 23:30
  • I am expecting to see a header that is described by the Header.tsx file. What I see now is just a blue background. And no there are no errors or warnings. – xpress Jul 03 '22 at 23:35

1 Answers1

0

It looks like there is nothing wrong with your import method. I think you should check your webpack.config.js file. In resolve part should contain ts and tsx types.

resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },

and also you have to add tsconfig.json file to your project. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

https://webpack.js.org/guides/typescript/

Kaan Bayram
  • 59
  • 4