Application 2017-09-26

Laravel+React+ES6+Browserify

Integrate React with Laravel using Browserify and Babel transpilation to write modern ES6 code with proper module support.

Read in: ja
Laravel+React+ES6+Browserify

I previously wrote about setting up a React environment using bower, but managing React packages with npm is smarter, and it's better to be able to write in ES6 for future benefits. So, I rebuilt the environment.

Since the way of writing changes quite a bit from ES5 to ES6, making those modifications was a bit of a hassle, but it doesn't seem too difficult, so there's no need to feel overwhelmed.

Environment

Setting up React with npm

npm i react react-dom -D

Compilation

elixir(function(mix) {
  mix
    .browserify('hoge.js', 'hogehoge.js')
});

Modifying ES5 to ES6

This is very helpful. Rewrite React.js source from ES5 to ES6

Making ES6 compatible with ES5

Use a transpiler, like Babel.

Thoughts

This was just a memo.

Tags: React JavaScript npm webpack ES6 browserify ES5
Share: 𝕏 Post Facebook Hatena
✏️ View source / Discuss on GitHub
☕ Support

If you enjoy this blog, consider supporting it. Every bit helps keep it running!


Related Articles