What is React?
I can quote directly from their official documents
We built React to solve one problem: building large applications with data that changes over time.
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.
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.
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
- 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 dowe have to add:
config.react.variant = :production # if you want production React variant
config.react.variant = :development # if you want development React variant
Typically we would use
:development variant in
:production variant in
- We’ll use React addons to provide means for testing our React components later. We'll add this line to our
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
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
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Now reload the view page and if you see Hello, world! in your
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.