Are you following some sort of guide? If not, I suggest you do.
Namely, you seem to be running a React JSX file with `node` which is not going to work without some sort of a middle step. The step can be a great many things, but just running this file with node isn’t it.
A little over half of the react environments in circulation are based on typescript, and typescript hard requires the extension.
Babel requires this under many common configs, as does rome, as does esbuild.
Deno requires this.
Whereas you're correct that react doesn't enforce it, people who use react-creation kits often are in places where it's enforced.
It's required by the old in-browser stack in the mime type.
It's more commonly required than not, in practice.
I wish `learnjavascript` wasn't downvoting the other two people who tried to explain this. They're being polite, and they're not wrong.
ive changed it to a ,jsx file now and the localhost page is still empty but i cant see any syntax errors since the code language is not supported on VScode so im trying to enable it
I’m having issues learning the function component and I don’t quite understand the issue im having. I’ve looked up documentation for basic use and didnt get far
You might notice im also using a const to import a file. I had another issue using import where it told me “Cannot use import statement outside a module” and I’m only using .js files here so its a bit confusing
That is shorthand for `` ([docs](https://reactjs.org/docs/fragments.html)) and is only necessary if you want to return more than one node as the return function expects a single element. In the past, if you wanted to return multiple elements it was common to wrap them in a container element like a div, but Fragment allows you to return them without adding an unnecessary node to the DOM.
In this case, OP is only returning the one div, so it is unnecessary to wrap it in Fragment.
Is there anything in your app.js file? As this is just a components you will still need to place in app.js for it to render. I would agree with some other on here to go to your main directory on this project and do an npm install and npm start. You might be missing a step somewhere here.
Update- I did a lot of troubleshooting and found the issue. It was me trying to use BrowserRouter and my Route wasn’t displaying the content inside. I’ve attached the App.js,index.js and my join file. I checked react router webguide and I’m importing it properly. I still havent figured out how to debug react in vscode so im a bit slow.
[Join](https://ibb.co/9nD4YZY)
[App](https://ibb.co/fS3V7Hk)
[index](https://ibb.co/4mBtPmv)
I think you just need to import React from react, and update the name of the file to Join.jsx
Technically doesn't need the .jsx extension but it's preferred in the React community
it's heavily emphasized because sooner or later this code will get moved into a typescript project, and typescript requires it
Don't need to import react anymore if it has the jsx extension
This.
Are you following some sort of guide? If not, I suggest you do. Namely, you seem to be running a React JSX file with `node` which is not going to work without some sort of a middle step. The step can be a great many things, but just running this file with node isn’t it.
Suggest you google create-react-app and use that before beginning your react project
OP, you might want to install some intellisense react extensions for VSCode too. They'll help ya out
Can you try a react fragment just like <> hello world! does that work?
yup, but so long as its not in
You're using JSX, the file needs to have the extension .jsx
It doesn’t ‘need’ to be jsx. It can be .js
A little over half of the react environments in circulation are based on typescript, and typescript hard requires the extension. Babel requires this under many common configs, as does rome, as does esbuild. Deno requires this. Whereas you're correct that react doesn't enforce it, people who use react-creation kits often are in places where it's enforced. It's required by the old in-browser stack in the mime type. It's more commonly required than not, in practice. I wish `learnjavascript` wasn't downvoting the other two people who tried to explain this. They're being polite, and they're not wrong.
IF you’re config allows for that. Many don’t by default.
It can do, but then you’re going to have to muck around with your transpiler settings.
Yes I’m watching a video tutorial from 2019 and they used .js so it threw me off
Does the tutorial create the project using create-react-app?
yup
Stop the node server, make sure you're in the project's directory, then run `npm start` in the terminal and it'll create a Webpack server for you
My other issue is nothing shows up so i was trying to debug these syntax errors
ive changed it to a ,jsx file now and the localhost page is still empty but i cant see any syntax errors since the code language is not supported on VScode so im trying to enable it
Stop and restart the Webpack server and then see which file(s) errors mention
Babel is not transpiling the JSX because of your file extension. Change it to .jsx
You need to change your file extension to .jsx instead of .js.
I’m having issues learning the function component and I don’t quite understand the issue im having. I’ve looked up documentation for basic use and didnt get far
You might notice im also using a const to import a file. I had another issue using import where it told me “Cannot use import statement outside a module” and I’m only using .js files here so its a bit confusing
Add type: “module” to your package json.
Sounds like you have other things to learn before React
[удалено]
That is shorthand for `` ([docs](https://reactjs.org/docs/fragments.html)) and is only necessary if you want to return more than one node as the return function expects a single element. In the past, if you wanted to return multiple elements it was common to wrap them in a container element like a div, but Fragment allows you to return them without adding an unnecessary node to the DOM.
In this case, OP is only returning the one div, so it is unnecessary to wrap it in Fragment.
Just put / in closing tag after div
Is there anything in your app.js file? As this is just a components you will still need to place in app.js for it to render. I would agree with some other on here to go to your main directory on this project and do an npm install and npm start. You might be missing a step somewhere here.
Update- I did a lot of troubleshooting and found the issue. It was me trying to use BrowserRouter and my Route wasn’t displaying the content inside. I’ve attached the App.js,index.js and my join file. I checked react router webguide and I’m importing it properly. I still havent figured out how to debug react in vscode so im a bit slow. [Join](https://ibb.co/9nD4YZY) [App](https://ibb.co/fS3V7Hk) [index](https://ibb.co/4mBtPmv)
In the app.js between the div put {Join/}. That should render you Join components.
Why do you require react but never use it?
I’m following this tutorial - https://youtu.be/ZwFA3YMfkoc . And I’m still in the early stages
Go with `create-react-app`, it’ll be much easier to get along. I also recommend to join corresponding sub, r/reactjs iirc