React on Rails
Bài đăng này đã không được cập nhật trong 3 năm
What is React?
React is the JavaScript library for building user interfaces. It was created by Facebook to make frontend development faster, less error-prone and more maintainable. It is focused only on the view part of the client-side application. Many people choose to think of React as the V in MVC. It’s like ERB for rich frontend solutions. React manages how DOM elements render and behave on your website.
I can quote directly from their official documents
We built React to solve one problem: building large applications with data that changes over time.
Why React?
Simple
Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
Declarative
React makes it easy and fast to create interactive UIs. Design simple views for each state in your application, when the state changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.
Composable Components React is all about building reusable components. In fact, with React the only thing you do is build components. Build encapsulated components that manage their own state, then compose them to make complex UIs. Since they're encapsulated, components make code reuse, testing, and separation of concerns easy.
Learn Once, Write Anywhere
React doesn't depend on the rest of the technology stack, so one can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.
Getting started
React comes with a nice gem that integrates this library well with Rails. react-rails is a complete solution to integrate and use all React features out of the box. It has a well documented site for easy installation and usage. https://github.com/reactjs/react-rails
Installation is very simple.
- Add react-rails in your project’s Gemfile and
bundle install
.
gem 'react-rails'
- We need to add React.js build variant (development, production, with or without add-ons) to serve in each environment by adding into config. Thus, for each environment in config/environments, under
<YourAppName>::Application.configure do
we have to add:
config.react.variant = :production # if you want production React variant
Or:
config.react.variant = :development # if you want development React variant
Typically we would use :development
variant in config/environments/development.rb
and config/environments/test.rb
and
:production
variant in config/environments/production.rb
.
- We’ll use React addons to provide means for testing our React components later. We'll add this line to our
application.rb
, insideconfigure
block:
config.react.addons = true
- . We also have to add react to our manifest JS file. By default it is application.js:
//= require react
//= require react_ujs
We need to restart the rails server to continue. We'll try a small react method to check if react working properly with our rails application. At first make a div
with id="example"
in any of the view file,
<div id="example">
</div>
And we'll use React render()
method for our testing. Lets add this small code in app/assets/javascripts/application.js
,
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Now reload the view page and if you see Hello, world! in your div
..... Congratulations!
You just implement and use react succesfully in your rails app.
We'll discuss more abour react and its work mechanism with a small example. Till then make the world a happy place.
Resource:
https://facebook.github.io/react/index.html
All rights reserved