React Guide? about parcel HOT 25 CLOSED

jsx is a supported file extension. you just need to setup babel in your project by adding a .babelrc, and install babel-preset-react

from parcel.

Another example is here https://github.com/jaredpalmer/react-parcel-example

from parcel.

Hi @NullVoxPopuli
I've created a minimal React example. Take a look: https://github.com/reicheltp/parcel-react-example

from parcel.

Just chiming in that a react example with hot reloading would be super neat since that is the only thing that the competition (create-react-app) can't easily provide. Some opportunity here. :)

from parcel.

I'm thinking of adding a "recipes" section or something to the docs, for e.g. react and other common frameworks. Might be something someone could countribute :)

from parcel.

I wrote a guide on how to create a minimal React app using Parcel.

from parcel.

@thejameskyle How does this issue have anything to do with #15??? They are completely different issues!!!

from parcel.

Nice work @albinotonnina! Want to write up a small tutorial for the Parcel website with some code and explanations? The pages are just markdown files here: https://github.com/parcel-bundler/website.

from parcel.

It was a typo, calm down.

-> parcel-bundler/website#15

from parcel.

It's possible to use jsx? How?

from parcel.

this is my existing .babelrc

{
  "presets": [
    "env",
    "stage-0",
    "react",
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-runtime"
  ],
  "env": {
    "production": {
      "plugins": [
        ["babel-plugin-remove-attribute", {
          "attribute": "data-test",
        }]
      ]
    }
  }
}

:-\

from parcel.

Is there an examples repo/document somewhere to put examples so new starters can find them easily / understand what is needed to get parcel to work in their stack?

from parcel.

Hot reloading would be neat! 😄

from parcel.

This is my first test with Parcel, React and hot-reload altogether:
https://github.com/albinotonnina/hot-parcel-react
It's based on the example @mjackson linked that for me didn't work. Component would get unmounted, not preserving the state, at every change.

I am not so sure about what I did here, because:

• Didn't need any module.hot method
• Actual Hot reload only after first save on a file. First time I get the component unmounted.
• I needed to add require('react-hot-loader/patch') at the first line of the app because of a warning from react hot loader:

React Hot Loader: It appears that "react-hot-loader/patch" did not run immediately before the app started. Make sure that it runs before any other code. For example, if you use Webpack, you can add "react-hot-loader/patch" as the very first item to the "entry" array in its config. Alternatively, you can add require("react-hot-loader/patch") as the very first line in the application code, before any other imports.

I may have messed a bit with it.
Anyway, great stuff @devongovett

from parcel.

@devongovett I would like to. My solution smells a bit though! Let me see if I can do better

from parcel.

I think I found the root of my problem.
This project imports css into js... which, not sure if parcel should support that, cause I think it's a stupid pattern. :-\

some errors I've gotten:

after commenting all the styles out:

another caveat I found is that all pathing is apparently relative to the dist directory -- rather than relative to the index.html -- kinda weird.

from parcel.

@webular is having the same issue in #56… his example looks a lot more minimal

from parcel.

I figured out why @NullVoxPopuli is getting this bug!!! The .babelrc he’s using has a syntax error…

It’s not a problem with Parcel

There are 2 trailing commas which cause JSON.parse() to throw an error:

{
  "presets": [
    "env",
    "stage-0",
    “react” ,<—————HERE (unnecessary comma)
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-runtime"
  ],
  "env": {
    "production": {
      "plugins": [
        ["babel-plugin-remove-attribute", {
          “attribute”: “data-test” ,<—————HERE (unnecessary comma)
        }]
      ]
    }
  }
}

Here’s the corrected version:

{
	"presets": [
		"env",
		"stage-0",
		"react"
	],
	"plugins": [
		"transform-decorators-legacy",
		"transform-runtime"
	],
	"env": {
		"production": {
			"plugins": [
				["babel-plugin-remove-attribute", {
					"attribute": "data-test"
				}]
			]
		}
	}
}

Try to use the corrected .babelrc above, and see if the error goes away

from parcel.

We need to add a try/catch around the JSON.parse() in /src/utils/config.js:35:17 to through a better error whenever we encounter a syntax error with the users .babelrc

from parcel.

@jakoblind nice work! Want to make a PR to https://github.com/parcel-bundler/website with that guide?

Would be nice to have an additional section about setting up hot module reloading with react-hot-loader as well.

from parcel.

@devongovett should I put my solution? Would you have a look at it again?
#19 (comment)

from parcel.

Moving to #15

from parcel.

oh haha, that explains it...

from parcel.

@davidnagli .babelrc accepts JSON5, so I think trailing comma is not a syntax error. parcel fails if JSON5-flavored .babelrc exists in node_modules.

from parcel.

I made a PR to handle JSON5 #256

from parcel.