DEV Community

Cover image for Introducing React to Laravel with Bower
Kenta Takeuchi
Kenta Takeuchi

Posted on • Originally published at bmf-tech.com

Introducing React to Laravel with Bower

#react #laravel

This article was originally published on bmf-tech.com.

Recently, it seems that Laravel 5.3 has decided to adopt Vue.js as the default frontend framework.

I usually develop the frontend with jQuery, but I decided to try React to keep up with the latest trends. Although I thought sticking with Vue.js would be safer with Laravel, I chose React because it seems to be growing the most right now. I was torn between AngularJS and React, but since I was looking for something to replace jQuery and only handle the View, I chose React.

I'm not a frontend expert who can explain the technical value of each framework, so honestly, I don't really understand... lol

The official recommendation for installing React seems to be npm, but I feel more familiar with Bower, so I'll install it with Bower this time. (Is npm richer in packages than Bower??)

After some research, it seems that npm is more standard.

Environment

  • Laravel 5.2
  • React... the latest version at the time of writing (v15.3.0)
  • babel... a JavaScript compiler. With babel, you can write React in JSX syntax as it interprets jsx.
  • bower... Refer to laravelでbowerのセットアップ for setup.
  • gulp (elixir)

Required Knowledge

  • Knowledge of setting up Bower.
  • Knowledge of gulp (elixir).

By looking at tutorials on the official site or sources available online, you might get a sense of it, but it's good to be aware of the recent chaotic frontend landscape, including babel, jsx, and browserify.

Setting Up React

bower install react --save
bower install babel --save

Use the following files:

  • react.min.js (react)
  • react-dom.js (react)
  • browser.min.js (babel)

※ If you want to use animations, load react-with-addons.js instead of react.js.

This is all you need to prepare to use React.

Trying Out React 

<!DOCTYPE html>
<html>
  <head>
    <script src="path/to/react.min.js"></script>
    <script src="path/to/react-dom.min.js"></script>
    <script src="path/to/browser.min.js"></script>
    <script src="path/to/example.js" type="text/babel"></script>
  </head>

  <div id="example"></div>
Enter fullscreen mode Exit fullscreen mode 
ReactDOM.render(
   <h1>Hello React Boy and Girl!</h1>
   document.getElementId("example")
);
Enter fullscreen mode Exit fullscreen mode

You can also write the js before the closing body tag.

Impressions

It seems there is less information about React in Japanese compared to Laravel. (Laravel seems to have increased rapidly this year...)
However, since it seems to be gaining attention, I have high hopes for the future.

Additional Notes

If you want to use require() with React, use browserify or webpack. What is require()?
Since Laravel comes with browserify by default, it might be easier to use that, but choose according to your environment.

References

Top comments (0)