I tried multiple ways used google, checked the official site but didn't work. The code only works if I do it like this in the HTML file of node.js
<!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>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
<script>
function Hello() {
return React.createElement('h1', null, "Hello world")
}
ReactDOM.render(Hello(), document.getElementById('root')); </script>
</body>
</html>
and I want it to work if I do this change in the code
<script>
function Hello() {
return <h1>Hello World</h1>
}
ReactDOM.render(<Hello />, document.getElementById('root')); </script>
also how do I transfer data from my MongoDB database or a array in app.js to react useState?
my app.js file:
const express = require('express')
const app = express()
app.get('/', (req,res) => {
res.sendFile(__dirname + '/index.html')
})
app.listen(3000)
Node.js is completely irrelevant there. You're dealing with entirely client-side code.
JSX syntax is not part of JavaScript. You can't use it in plain JavaScript. You have to run it through a transpiler to convert it to JavaScript.
You've loaded a transpiler (Babel) but you aren't using it.
Look at the React documentation:
Now you can use JSX in any
<script>tag by addingtype="text/babel"attribute to it.
You didn't add that attribute.
Note that in-browser transpiling is slow and relatively hard to debug. I strongly recommend using a local development environment.
First of all: You can't use Node.js client-side.
If you want to use React in a HTML website you've made already: reactjs.org/docs/add-react-to-a-website
If you want to make a new React app, follow this guide: reactjs.org/docs/create-a-new-react-app
For making a new React app...
My quick tldr instructions:
npm i reactnpx create-react-app name-of-project cd name-of-projectnpm startAll in all, I really recommend that you try CodeCademy's Free React Course
When I used it, it helped me learn React to a good standard.
How do I transfer data from my MongoDB database or a array in app.js to react useState?
You are going to write an API route on your Node.js server, which would return the data from mongodb or array. Then you are going to call that API from React.js application using fetch API or something. Finally, you will use the useState to store & render the data in your React application.
I want it to work if I do this change in the code
<script>
function Hello() {
return <h1>Hello World</h1>
}
ReactDOM.render(<Hello />, document.getElementById('root'));
</script>
Okay, the above code is JSX code. This is not the JavaScript/HTML/CSS code that the browsers can understand. You need to convert this JSX code to JavaScript/HTML/CSS code that the browsers can understand. If you use to create the react project with create-react-app, it will do that conversion for you. Learn about create-react-app. You will be good to go.
Once you are there, post a separate question about how to make an API call from react to Node.js server.