#How can I use react with Typescript Electron. How can I render it.

1 messages · Page 1 of 1 (latest)

glossy magnet
#

What do you mean "App.tsx system"?
You just need a main component, what we usually call "App" but you can name it as you want, and then you render it:

import { createRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(<App />);
#

You can test it as simply as:
App.tsx

const App = () => <div>Hello World!</div>
worldly wing
glossy magnet
#

I just forgot to import it but you need to import it of course

#

you can name the component as you want

#

but keep in mind that the convention is PascalCase for a React component's name (and its file name)

worldly wing
#

and this will render it.

glossy magnet
#

yep

#

you need to export the component too...

worldly wing
glossy magnet
#

Only if you need componentDidCatch

#

Class components is the old way, now you can use functionnal components with hooks

worldly wing
#

any actual documentation?

glossy magnet
worldly wing
#

Most of them are functions instead of a const

glossy magnet
#

that the same thing

# 
const myFunc = () => "Hello";
function myFunc() { return "Hello"; }
#

Maybe you should take a JS course before learning React

worldly wing
#

I know how to use js.

glossy magnet
#

Well, now you know one more thing

worldly wing
glossy magnet
#

No

worldly wing
#

Alright so just the componenets

glossy magnet
#

you don't even need the "x" part for anything

#

But if you use it then it's when your file contains JSX

worldly wing
#

Mhm.

#

Well I think I have to use it for my renderer file sense webstorm dosen't like ts for <App />

glossy magnet
#

what's the error on domNode?

worldly wing
#

TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'.   Type 'null' is not assignable to type 'Element | DocumentFragment'.

glossy magnet
#

do you have a div with the id root?

worldly wing
#

watcha mean

glossy magnet
#

your HTML file

#

does it have a root div?

worldly wing
#

yes

glossy magnet
#

with the id root?

worldly wing
#

The renderer.tsx is not detecting the html to see if its got it in there.

tribal vine
#

this error from typescript

#

missing typing for variable

worldly wing
#

huh

worldly wing
tribal vine
#

explain typescript?

worldly wing
#

No.

glossy magnet
#

Ah ah, the joy of TypeScript

worldly wing
#

Just the error.

tribal vine
#

error explain

worldly wing
#

idk adding a ! fixed it lmao

tribal vine
#

you just skip error

worldly wing
#

I think I know what it is

tribal vine
#

dont think so

worldly wing
#

its domNode

#

or wait no. Its actually createRoot

#

I think createRoot passes 2 param.

tribal vine
#

only one

glossy magnet
#

Nope

tribal vine
#

2nd one is optional

worldly wing
#

Alright, anyways do I need to register the renderer anywhere or should it load it by default.

tribal vine
#

register?

#

you build your app and open it as web page

worldly wing
#

In electron.

glossy magnet
#

Have you read the docs?

tribal vine
#

same with electron

#

you open a web page

worldly wing
#

I built it

tribal vine
#

via browserwindow

worldly wing
glossy magnet
#

Have you configured webpack correctly?

worldly wing
#

This uses webpack. oopsies

#

Honestly webpack is kinda weird to me. Is there any other way

glossy magnet
#

Vite

#

Forge with webpack plugin

worldly wing
#

Again not very found of using webpack

#

I'm going to have a few html pages and then they are just going to rename them to diff names and its just annoying to setup in general :/

open cave
#

Typescript react requires the use of .tsx file extension and telling typescript Compiler via jsx flag (?) In tsconfig that it has to compile those as jsx

worldly wing
open cave
#

Not the setup part but every other subpage which gives examples of how to add typescript to hooks etc

worldly wing
#

Alright.

#

@open cave wouldn't this work?

open cave
#

I guess?

worldly wing
#

Alright. Well, how can I make react work cus it seems this is not helping.

open cave
#

Have you ever used react before? If no. Give create react app a try

#

I have the feeling that this is not about Electron but about learning those frameworks first

worldly wing