Connecting React with Phoenix

Most likely a Babel problem indeed, as it seems it’s not transpiling JSX to JS.

The Babel configuration is always giving me headaches, and right now I am not really sure, but isn’t babel.config.js supposed to replace .babelrc? If I am right about that, your babel.config.js will take precedence, and it does not include necessary presets like @babel/preset-react. That might be what causes JSX not to be transpiled.

If you are new to react use the creat react app it works with npx and the guide can be found here.

https://facebook.github.io/create-react-app/docs/getting-started

Also this is very important https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

const HelloReact = () => {
  return <div>Hello World</div>;
}

Is that your file?

I think You miss this…

import React from 'react';

Even if it is not visible, You need to import React before using this code

<div>...</div>

because it uses React.createElement() under the hood

Also can you post your package.json file to see what packages you installed?

Also this tutorial should offer you a complete introduction to react and babel config the right way.

https://www.valentinog.com/blog/babel/

Hm I’ve been trying to look into babel.config.js and it doesn’t seem to be a requirement. I may be wrong but thank you for replying. Will continue to look about both files.

Thank you for replying. Actually, it isn’t my first time using React but every time I try to use it for a project, the initial setup is usually a headache when it comes to webpack. Thank you for providing those linkes. I will take a look especially the tutorial I hope will point me in the right direction. As for the packages I installed, it’s

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/preset-env": "^7.5.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "copy-webpack-plugin": "^4.5.0",
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.4.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "4.28.4",
    "webpack-cli": "^3.3.5"
  }
}

I apologize for not copying the code exactly as what I wrote. That is my part that has mislead you. The entire file looks like this

import css from "../css/app.css";
import "phoenix_html";
import React from "react";

import ReactDOM from "react-dom";

console.log("I'm getting hit");

const HelloReact = () => {

return <h1>Hello React!</h1>;

};

const root = document.getElementById("root");

ReactDOM.render(<HelloReact />, root);

I may be wrong, but isn’t the return block supposed to be wrapped with parens ie :

return (<div>Hello react</div>);

?

Ok You do import React…

This is how I did for a babel 7.4.3 and React 16.8

I use a babel.config.js with this inside

module.exports = api => {
  api.cache(true);

  const presets = [
    [
      "@babel/preset-env",
      {
        targets: {
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1",
        },
        useBuiltIns: "usage",
        corejs: '3.0.0',
      },
      "@babel/preset-react",
    ],
  ];
  
  const plugins = [

  ];

  return {
    presets,
    plugins
  };
}

I think I got this config on the babel site.

You may adapt for your usage.

In webpack.config.js, I have

      {
        test: /\.jsx?$/,
        include: SRC_PATH,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          rootMode: "upward",
        },
      },

BTW, as a minor note… I put react, react-dom in dependencies, and all @babel… in devDependencies