Unreference Error: React is Not Defined

[abarcenas29]

I'm trying to make my own preact boilerplate (for learning) and I trying to learn by referencing the preact-boilerplate and reading the preact start guide.

I have crated a repo here to reference. But for some reason, it looks like its looking for a React to load my app to the DOM.

Here's my repo for duplication: https://github.com/abarcenas29/preact-sandbox-v0

Many thanks.

[bwhitty]

You need to change https://github.com/abarcenas29/preact-sandbox-v0/blob/master/.babelrc#L6 to

    [
      "transform-react-jsx",
      {
        "pragma": "h"
      }
    ]

The pragma tells the plugin to use preact's h.

[abarcenas29]

@bwhitty now I got a h is not defined.

[xtuc]

Did you import {h} from 'preact' ?

[abarcenas29]

I just did and it worked. Thanks everyone!

[RajeshBatth]

Is this import {h} from 'preact' mandatory, what if i'm switching an existing react project to preact, do I have to go to each component file and add this ?

[xtuc]

@RajeshBatth it's explained in https://preactjs.com/guide/switching-to-preact

[RajeshBatth]

@xtuc I'm using the boilerplate's webpack config which has aliases to react => preact-compat . So is there anything else I need to do?

[felipe-gdr]

Having to write import {h} from 'preact' is also bothering me a little bit.

[developit]

You can automate that using babel-plugin-jsx-pragmatic. preact-cli does it by default (here).

[allexon]

I'm taking a beating to understand the preact.

I'm taking a beating to understand the react
My webpack configuration looks like this:

{
test: /.jsx?/i,
loader: 'babel-loader',
options:{
presets:['env'],
plugins:[
['transform-react-jsx', {progma:'h'}]
]
}

}

I am having problems when the syntax is React, I intend to use only Preact!
See the example below

import {h, render} from 'preact';

*** Exemplo React! ***

function Welcome() {

return (<h1>Hello</h1>);

}

render(, document.querySelector('body'));

*** Exemplo Preact ****

const ola = h(
'div',
{class:'app'},
[
h('h2', null, 'PRATOS'),
h('h1', null, 'Bif Gran Bacon'),
h('p', null, 'Carne artesanal, salada de alface e tomate, cebolas, muitas tiras de bacon crocante.')

]

);

render(ola, document.querySelector('body'));

The Preact example works normally, BUT JSX does not work: React is not defined

[allexon]

Is this the error when rendering Hello JSX?

[felipe-gdr]

Watch out for the typo on your webpack configuration:

['transform-react-jsx', {progma:'h'}]

should be:

['transform-react-jsx', {pragma:'h'}]

This will make babel use h instead of React.createElement to create elements.

[allexon]

Perfect, sorry the error, is that the concept is very new to me, I'm learning to do the configuration from scratch, I did a lot with webpack, and still lacking to understand a lot about webpack and Preact, THANK YOU !!!!!!! THANK YOU!!!!!!!. If you can help in these setup steps I would appreciate it, as I am already pleased with the help !!! Could it be the case to send some more doubts? I really like to communicate by email: allexon@gmail.com, if there is anything in these settings, we opened a post here in Preact git to help other people!