How to use React With Node.js/html-CodePudding

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)

CodePudding user response：

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 adding type="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.

CodePudding user response：

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:

Make sure you have Node.js installed on your machine (should include npm)
Open your machine's terminal, and run npm i react
Go to your preferred editor, open a new terminal and run npx create-react-app name-of-project
(may take a bit)
Then do cd name-of-project
Then do npm start
Go to the localhost link in your browser, or one of the IP addresses to preview the page
(you can even go to the IP address on your phone - if it's on the same WiFi network)

All 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.

CodePudding user response：

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.