component in separate files

[samant-rags]

hi ,

Not sure if i am doing some silly mistake but not able to move jsx functions to their own files and make them work.
Eg.

If i have 3 functions say header, content and footer. If all 3 are in on-init.tsx then it works fine

Now, if i move any 1 or more of these functions to a separate file -say Footer.tsx and do
import Footer from "./Footer"; in on-init.tsx then getting a error

what could be the issue ? If i return plain js data types it works fine.

[samant-rags]

found option with class component by means of

`
import React, { Component } from "react";

class Footer extends Component {
render(): JSX.Element {
return (

© 2022 . All rights reserved.

);
}
}

export default Footer;

`

[ZuperZee]

The template uses React v17, which requires import React from "react" at the top of the file(s) with jsx in them.

[ZuperZee]

Example:

[ZuperZee]

I updated the react template to use v18 of React. Should work without importing React. It's kinda slow when developing, but I'll look at some HMR solutions later in the week.

[samant-rags]

Thanks Zupperzee..

[ZuperZee]

A little late, but the template should be a lot easier to work with. It now uses vite and has hmr.
Created a file called Dummy.tsx in the src/components folder. Which kinda shows how to create and use components.

[samant-rags]

Thanks Zuper , this is useful and with Vite and HMR its super fast !
Small thing to note : If i have grafana running locally on default port 3000, Vite also starts on same port :) .. maybe we can add different port in vite.config.ts

server: {
port: 3030
},
preview: {
port: 8080
}

[ZuperZee]

The 3000 port is really common when developing. It's not just Vite. I would rather suggest changing the Grafana port to something else. I have my Grafana running on 3100.
If you want to change the port Vite uses, add --port XXXX in the package.json file in the scripts -> dev section.
.
The Vite port uses a different port if 3000 is taken, so it shouldn't really be a problem.