Expertiza_Wiki - User contributions [en]

React-Rails Gem Integration for ReactJS frontend

2019-12-18T22:00:39Z

Amedge:

== Introduction ==

This page contains documentation for integrating ReactRails framework to Expertiza application which can be cloned from [https://github.com/pratik-abhyankar/react-expertiza/tree/react-rails-integration here]. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found [https://github.com/shakacode/react_on_rails/blob/master/docs/basics/installation-into-an-existing-rails-app.md here].

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found [https://github.com/reactjs/react-rails here].

== React-Rails Integration Steps ==

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

<ul>
<li>'''Note:''' Detailed instructions can be found at the above link. </li>
<li>Install yarn from https://yarnpkg.com/lang/en/docs/install/#debian-stable as it is a necessity for foreman</li>
<li>Add the gems 'react_on_rails' and 'webpacker'
<pre>
gem "react_on_rails", "11.1.4" # Update to the current version
gem "webpacker", "~> 3" # Newer versions might be supported
</pre>
</li>
<li>Execute the below commands:
<pre>
$ bundle exec rake webpacker:install
$ bundle exec rake webpacker:install:react
</pre>
<li>
Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.
<pre>
rails generate react_on_rails:install
</pre>
</li>
</li>
<li>Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'</li>
<li>Server can be started by:
<pre>foreman start -f Procfile.dev</pre>
</li>
</ul>

== Issues Faced ==

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

<ul>
<li>Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.</li>
<li>mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.</li>
</ul>

== Current Status ==

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

<ul>
<li>The JS code is mounted on to the expertiza.html.erb file.</li>
<li>The data is fetched from the controllers after the respective action.</li>
<li>This data is then converted into props, which are parameters that are passed on to the React Components.</li>
<li>These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.</li>
<li>The render() function, which is the base function to display the content, then renders the props in its appropriate section.</li>
</ul>

== Migrated Components for React-Rails ==

All of the components of the [https://github.com/expertiza/front-end Frontend Repository] have been migrated into our expertiza repository, to avoid constant lookback on the frontend repo. Currently, the migrated components which are functional are as follows:

<ul>
<li>Login Component</li>
<li>Logout Component</li>
<li>StudentList Component</li>
<li>Header Component</li>
<li>Main Component</li>
<li>SignupSheet Component</li>
<li>PasswordForgotten Component</li>
<li>ChangeHandleComponent</li>
<li>GradesViewMyScores</li>
</ul>

== Redirecting to the Rails frontend of Expertiza ==

During the process of this migration, as stated above, we focussed on gradually moving from the initial rails frontend to the react front end.

Hence, we did not change the previous routes. The older routes are still present in the configs/routes.rb file. Thus, whenever we click on any of the non working links, it will route us to the previous version of the link. Hence routes.rb has all the previously configured routes and if your server is on, you can access the previous front end.

React-Rails Gem Integration for ReactJS frontend

2019-12-16T18:13:16Z

Amedge:

React-Rails Gem Integration for ReactJS frontend

2019-12-16T18:10:38Z

Amedge:

== Introduction ==

This page contains documentation for integrating ReactRails framework to Expertiza application which can be cloned from [https://github.com/pratik-abhyankar/react-expertiza/tree/react-rails-integration here]. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found [https://github.com/shakacode/react_on_rails/blob/master/docs/basics/installation-into-an-existing-rails-app.md here].

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found [https://github.com/reactjs/react-rails here].

== React-Rails Integration Steps ==

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

<ul>
<li>'''Note:''' Detailed instructions can be found at the above link. </li>
<li>Install yarn from https://yarnpkg.com/lang/en/docs/install/#debian-stable as it is a necessity for foreman</li>
<li>Add the gems 'react_on_rails' and 'webpacker'
<pre>
gem "react_on_rails", "11.1.4" # Update to the current version
gem "webpacker", "~> 3" # Newer versions might be supported
</pre>
</li>
<li>Execute the below commands:
<pre>
$ bundle exec rake webpacker:install
$ bundle exec rake webpacker:install:react
</pre>
<li>
Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.
<pre>
rails generate react_on_rails:install
</pre>
</li>
</li>
<li>Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'</li>
<li>Server can be started by:
<pre>foreman start -f Procfile.dev</pre>
</li>
</ul>

== Issues Faced ==

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

<ul>
<li>Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.</li>
<li>mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.</li>
</ul>

== Current Status ==

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

<ul>
<li>The JS code is mounted on to the expertiza.html.erb file.</li>
<li>The data is fetched from the controllers after the respective action.</li>
<li>This data is then converted into props, which are parameters that are passed on to the React Components.</li>
<li>These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.</li>
<li>The render() function, which is the base function to display the content, then renders the props in its appropriate section.</li>
</ul>

== Migrated Components ==

All of the components of the [https://github.com/expertiza/front-end Frontend Repository] have been migrated into our expertiza repository, to avoid constant lookback on the frontend repo. Currently, the migrated components which are functional are as follows:

<ul>
<li>Login Component</li>
<li>Logout Component</li>
<li>StudentList Component</li>
<li>Header Component</li>
<li>Main Component</li>
<li>SignupSheet Component</li>
<li>PasswordForgotten Component</li>
<li>ChangeHandleComponent</li>
<li>GradesViewMyScores</li>
</ul>

React-Rails Gem Integration for ReactJS frontend

2019-12-16T18:10:17Z

Amedge:

== Introduction ==

This page contains documentation for integrating ReactRails framework to Expertiza application which can be cloned from [https://github.com/pratik-abhyankar/react-expertiza/tree/react-rails-integration here]. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found [https://github.com/shakacode/react_on_rails/blob/master/docs/basics/installation-into-an-existing-rails-app.md here].

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found [https://github.com/reactjs/react-rails here].

== React-Rails Integration Steps ==

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

<ul>
<li>'''Note:''' Detailed instructions can be found at the above link. </li>
<li>Install yarn from https://yarnpkg.com/lang/en/docs/install/#debian-stable as it is a necessity for foreman</li>
<li>Add the gems 'react_on_rails' and 'webpacker'
<pre>
gem "react_on_rails", "11.1.4" # Update to the current version
gem "webpacker", "~> 3" # Newer versions might be supported
</pre>
</li>
<li>Execute the below commands:
<pre>
$ bundle exec rake webpacker:install
$ bundle exec rake webpacker:install:react
</pre>
<li>
Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.
<pre>
rails generate react_on_rails:install
</pre>
</li>
</li>
<li>Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'</li>
<li>Server can be started by:
<pre>foreman start -f Procfile.dev</pre>
</li>
</ul>

== Issues Faced ==

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

<ul>
<li>Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.</li>
<li>mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.</li>
</ul>

== Current Status ==

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

<ul>
<li>The JS code is mounted on to the expertiza.html.erb file.</li>
<li>The data is fetched from the controllers after the respective action.</li>
<li>This data is then converted into props, which are parameters that are passed on to the React Components.</li>
<li>These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.</li>
<li>The render() function, which is the base function to display the content, then renders the props in its appropriate section.</li>
</ul>

== Migrated Components ==

All of the components of the [https://github.com/expertiza/front-end Frontend Repository] have been migrated into our expertiza repository, to avoid constant lookback on the frontend repo. Currently, the migrated components which are functional are as follows:

<ul>
<li>Login Component</li>
<li>Logout Component</li>
<li>StudentList Component</li>
<li>Header Component</li>
<li>Main Component</li>
<li>SignupSheet Component</li>
<li>PasswordForgotten Component</li>
<li>ChangeHandleComponent</li>
<li>GradesViewMyScores</li>
<li></li>
</ul>

React-Rails Gem Integration for ReactJS frontend

2019-12-03T20:24:33Z

Amedge: /* Introduction */

React-Rails Gem Integration for ReactJS frontend

2019-12-03T20:23:54Z

Amedge: /* Introduction */

== Introduction ==

This page contains documentation for integrating ReactRails framework to Expertiza application which can be cloned from [https://github.com/pratik-abhyankar/react-expertiza/tree/react-rails-integration here]. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found https://github.com/shakacode/react_on_rails/blob/master/docs/basics/installation-into-an-existing-rails-app.md.

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found at https://github.com/reactjs/react-rails.

== React-Rails Integration Steps ==

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

<ul>
<li>'''Note:''' Detailed instructions can be found at the above link. </li>
<li>Install yarn from https://yarnpkg.com/lang/en/docs/install/#debian-stable as it is a necessity for foreman</li>
<li>Add the gems 'react_on_rails' and 'webpacker'
<pre>
gem "react_on_rails", "11.1.4" # Update to the current version
gem "webpacker", "~> 3" # Newer versions might be supported
</pre>
</li>
<li>Execute the below commands:
<pre>
$ bundle exec rake webpacker:install
$ bundle exec rake webpacker:install:react
</pre>
<li>
Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.
<pre>
rails generate react_on_rails:install
</pre>
</li>
</li>
<li>Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'</li>
<li>Server can be started by:
<pre>foreman start -f Procfile.dev</pre>
</li>
</ul>

== Issues Faced ==

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

<ul>
<li>Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.</li>
<li>mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.</li>
</ul>

== Current Status ==

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

<ul>
<li>The JS code is mounted on to the expertiza.html.erb file.</li>
<li>The data is fetched from the controllers after the respective action.</li>
<li>This data is then converted into props, which are parameters that are passed on to the React Components.</li>
<li>These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.</li>
<li>The render() function, which is the base function to display the content, then renders the props in its appropriate section.</li>
</ul>

React-Rails Gem Integration for ReactJS frontend

2019-12-03T17:01:44Z

Amedge:

== Introduction ==

This page contains documentation for integrating ReactRails framework to Expertiza application which can be cloned from https://github.com/pratik-abhyankar/react-expertiza/tree/react-rails-integration. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found https://github.com/shakacode/react_on_rails/blob/master/docs/basics/installation-into-an-existing-rails-app.md.

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found at https://github.com/reactjs/react-rails.

== React-Rails Integration Steps ==

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

<ul>
<li>'''Note:''' Detailed instructions can be found at the above link. </li>
<li>Install yarn from https://yarnpkg.com/lang/en/docs/install/#debian-stable as it is a necessity for foreman</li>
<li>Add the gems 'react_on_rails' and 'webpacker'
<pre>
gem "react_on_rails", "11.1.4" # Update to the current version
gem "webpacker", "~> 3" # Newer versions might be supported
</pre>
</li>
<li>Execute the below commands:
<pre>
$ bundle exec rake webpacker:install
$ bundle exec rake webpacker:install:react
</pre>
<li>
Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.
<pre>
rails generate react_on_rails:install
</pre>
</li>
</li>
<li>Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'</li>
<li>Server can be started by:
<pre>foreman start -f Procfile.dev</pre>
</li>
</ul>

== Issues Faced ==

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

<ul>
<li>Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.</li>
<li>mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.</li>
</ul>

== Current Status ==

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

<ul>
<li>The JS code is mounted on to the expertiza.html.erb file.</li>
<li>The data is fetched from the controllers after the respective action.</li>
<li>This data is then converted into props, which are parameters that are passed on to the React Components.</li>
<li>These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.</li>
<li>The render() function, which is the base function to display the content, then renders the props in its appropriate section.</li>
</ul>

React-Rails Gem Integration for ReactJS frontend

2019-12-03T17:00:44Z

Amedge:

== Introduction ==

This page contains documentation for integrating ReactRails framework to Expertiza application which can be cloned from https://github.com/pratik-abhyankar/react-expertiza/tree/react-rails-integration. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found [[ https://github.com/shakacode/react_on_rails/blob/master/docs/basics/installation-into-an-existing-rails-app.md | here]].

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found at https://github.com/reactjs/react-rails.

== React-Rails Integration Steps ==

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

<ul>
<li>'''Note:''' Detailed instructions can be found at the above link. </li>
<li>Install yarn from https://yarnpkg.com/lang/en/docs/install/#debian-stable as it is a necessity for foreman</li>
<li>Add the gems 'react_on_rails' and 'webpacker'
<pre>
gem "react_on_rails", "11.1.4" # Update to the current version
gem "webpacker", "~> 3" # Newer versions might be supported
</pre>
</li>
<li>Execute the below commands:
<pre>
$ bundle exec rake webpacker:install
$ bundle exec rake webpacker:install:react
</pre>
<li>
Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.
<pre>
rails generate react_on_rails:install
</pre>
</li>
</li>
<li>Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'</li>
<li>Server can be started by:
<pre>foreman start -f Procfile.dev</pre>
</li>
</ul>

== Issues Faced ==

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

<ul>
<li>Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.</li>
<li>mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.</li>
</ul>

== Current Status ==

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

<ul>
<li>The JS code is mounted on to the expertiza.html.erb file.</li>
<li>The data is fetched from the controllers after the respective action.</li>
<li>This data is then converted into props, which are parameters that are passed on to the React Components.</li>
<li>These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.</li>
<li>The render() function, which is the base function to display the content, then renders the props in its appropriate section.</li>
</ul>

React-Rails Gem Integration for ReactJS frontend

2019-12-03T16:53:24Z

Amedge:

== Introduction ==

This page contains documentation for integrating ReactRails framework to Expertiza application. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found [[ https://github.com/shakacode/react_on_rails/blob/master/docs/basics/installation-into-an-existing-rails-app.md | here]].

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found at https://github.com/reactjs/react-rails.

== React-Rails Integration Steps ==

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

<ul>
<li>'''Note:''' Detailed instructions can be found at the above link. </li>
<li>Install yarn from https://yarnpkg.com/lang/en/docs/install/#debian-stable as it is a necessity for foreman</li>
<li>Add the gems 'react_on_rails' and 'webpacker'
<pre>
gem "react_on_rails", "11.1.4" # Update to the current version
gem "webpacker", "~> 3" # Newer versions might be supported
</pre>
</li>
<li>Execute the below commands:
<pre>
$ bundle exec rake webpacker:install
$ bundle exec rake webpacker:install:react
</pre>
<li>
Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.
<pre>
rails generate react_on_rails:install
</pre>
</li>
</li>
<li>Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'</li>
<li>Server can be started by:
<pre>foreman start -f Procfile.dev</pre>
</li>
</ul>

== Issues Faced ==

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

<ul>
<li>Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.</li>
<li>mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.</li>
</ul>

== Current Status ==

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

<ul>
<li>The JS code is mounted on to the expertiza.html.erb file.</li>
<li>The data is fetched from the controllers after the respective action.</li>
<li>This data is then converted into props, which are parameters that are passed on to the React Components.</li>
<li>These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.</li>
<li>The render() function, which is the base function to display the content, then renders the props in its appropriate section.</li>
</ul>

React-Rails Gem Integration for ReactJS frontend

2019-12-03T16:51:55Z

Amedge:

== Introduction ==

This page contains documentation for integrating ReactRails framework to Expertiza application. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found [[ https://github.com/shakacode/react_on_rails/blob/master/docs/basics/installation-into-an-existing-rails-app.md | here]].

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found at https://github.com/reactjs/react-rails.

== React-Rails Integration Steps ==

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

<ul>
<li>'''Note:''' Detailed instructions can be found at the above link. </li>
<li>Install yarn from this [[ https://yarnpkg.com/lang/en/docs/install/#debian-stable | link ]] as it is a necessity for foreman</li>
<li>Add the gems 'react_on_rails' and 'webpacker'
<pre>
gem "react_on_rails", "11.1.4" # Update to the current version
gem "webpacker", "~> 3" # Newer versions might be supported
</pre>
</li>
<li>Execute the below commands:
<pre>
$ bundle exec rake webpacker:install
$ bundle exec rake webpacker:install:react
</pre>
<li>
Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.
<pre>
rails generate react_on_rails:install
</pre>
</li>
</li>
<li>Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'</li>
<li>Server can be started by:
<pre>foreman start -f Procfile.dev</pre>
</li>
</ul>

== Issues Faced ==

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

<ul>
<li>Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.</li>
<li>mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.</li>
</ul>

== Current Status ==

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

<ul>
<li>The JS code is mounted on to the expertiza.html.erb file.</li>
<li>The data is fetched from the controllers after the respective action.</li>
<li>This data is then converted into props, which are parameters that are passed on to the React Components.</li>
<li>These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.</li>
<li>The render() function, which is the base function to display the content, then renders the props in its appropriate section.</li>
</ul>

React-Rails Gem Integration for ReactJS frontend

2019-12-03T16:50:19Z

Amedge: /* React-Rails Integration Steps */

== Introduction ==

This page contains documentation for integrating ReactRails framework to Expertiza application. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found [[ https://github.com/shakacode/react_on_rails/blob/master/docs/basics/installation-into-an-existing-rails-app.md | here]].

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found at https://github.com/reactjs/react-rails.

== React-Rails Integration Steps ==

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

<ul>
<li>'''Note:''' Detailed instructions can be found at the above link. </li>
<li>Install yarn from the link as it is a necessity: </li>
<li>Add the gems 'react_on_rails' and 'webpacker'
<pre>
gem "react_on_rails", "11.1.4" # Update to the current version
gem "webpacker", "~> 3" # Newer versions might be supported
</pre>
</li>
<li>Execute the below commands:
<pre>
$ bundle exec rake webpacker:install
$ bundle exec rake webpacker:install:react
</pre>
<li>
Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.
<pre>
rails generate react_on_rails:install
</pre>
</li>
</li>
<li>Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'</li>
<li>Server can be started by:
<pre>foreman start -f Procfile.dev</pre>
</li>
</ul>

== Issues Faced ==

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

<ul>
<li>Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.</li>
<li>mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.</li>
</ul>

== Current Status ==

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

<ul>
<li>The JS code is mounted on to the expertiza.html.erb file.</li>
<li>The data is fetched from the controllers after the respective action.</li>
<li>This data is then converted into props, which are parameters that are passed on to the React Components.</li>
<li>These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.</li>
<li>The render() function, which is the base function to display the content, then renders the props in its appropriate section.</li>
</ul>

Architecture and Setup

2019-11-26T19:59:35Z

Amedge: Created page with "== Introduction == This project is about creating a new front-end for Expertiza, which is a RoR MVC application, by separating the view from the MVC architecture. For separating..."

== Introduction ==
This project is about creating a new front-end for Expertiza, which is a RoR MVC application, by separating the view from the MVC architecture. For separating the view, the existing RoR application needs to be modified by creating APIs that will help the new front-end interact with the back-end. These APIs will render JSON objects instead of views that are rendered in the original application, thereby creating RESTful services that will enable the new front-end to procure information. ReactJS is used for creating the new front-end, with Redux used for state maintenance. For HTTP requests to the back-end services, axios, a promise based HTTP client is used.

[[File:RailsArchitecture.png]]

[[File:ReactRedux.png]]

== Setup ==

=== React Application ===

The React application is created following https://github.com/facebook/create-react-app. This will create a structure like the one shown below,

<pre>
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
</pre>

One of the most agreed upon structure for a React project is to have a components directory for storing your Components. Having a single directory for all your components is the most intuitive and logical one. Therefore, our React Application has a directory for components where you can find all the components, thereby having related code as close as possible. 
One of the other things to have is an assets folder, where you can store all the dependencies shared by your application, such as SASS mixins, images, etc. This could be used as a single location for storing files that are external to the project itself. It is of great convenience to group these related, non-JavaScript files together.
Another important addition is the utilities directory, which is a folder full of helper function that are used globally. This helps in keeping the code DRY by exporting repeated logic to a singular location and importing it where used. This directory goes by the name shared in our project. With these things present, the directory structure of client looks like the following,

[[File:directoryStructure.PNG]]

=== Redux Middleware ===

Libraries like React are built with a way for components to internally manage their state without any need for an external library or tool. But, as the application grows bigger, managing states shared across components becomes tedious. For instance, to share data among siblings, a state has to live in the parent component. A method for updating this state is provided by the parent component and passed as props to these sibling components. If the state has to be shared between components that are far apart in the component tree, the problem worsens. This is why we use Redux, which makes it easier to maintain these states. Redux is a central store that holds the entire state of the application, which can be accessed by every component of the React app, without having to send down props from one component to the other.

For setting up Redux in the React application, three packages are required, viz, redux, react-redux and redux thunk.The three building parts of Redux are actions, store and reducers. Actions are events by which you can send data from your application to the Redux store. Reducers are pure functions that take the current state of the application, perform an action and return a new state. The store holds the state of the application. As the application grows, we will have multiple reducers, each managing independent parts of the state. We use configureStore to combine all such reducers into a single reducer function.

The resulting directory structure of the Redux store is as follows,

[[File:Redux.PNG]]

The ActionType.js contains string literals for our action types. These strings are exported as an object literal which can then be imported into your reducers and action creators instead of hard-coding them. In index.js we re-export our operations, reducers and action types.

=== Rails API ===

The Rails back-end code-base now has a separate namespace called api/v1 for the new API only controllers. HTTP requests from the front-end will be received by these controllers, which in turn will return JSON objects to the calling services.

React-Rails Gem Integration for ReactJS frontend

2019-11-26T19:56:21Z

Amedge: Created page with "== Introduction == This page contains documentation for integrating ReactRails framework to Expertiza application. The whole idea was to continue using the existing backend crea..."

== Introduction ==

This page contains documentation for integrating ReactRails framework to Expertiza application. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found [[ https://github.com/shakacode/react_on_rails/blob/master/docs/basics/installation-into-an-existing-rails-app.md | here]].

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found at https://github.com/reactjs/react-rails.

== React-Rails Integration Steps ==

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

<ul>
<li>'''Note:''' Detailed instructions can be found at the above link. </li>
<li>Add the gems 'react_on_rails' and 'webpacker'
<pre>
gem "react_on_rails", "11.1.4" # Update to the current version
gem "webpacker", "~> 3" # Newer versions might be supported
</pre>
</li>
<li>Execute the below commands:
<pre>
$ bundle exec rake webpacker:install
$ bundle exec rake webpacker:install:react
</pre>
<li>
Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.
<pre>
rails generate react_on_rails:install
</pre>
</li>
</li>
<li>Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'</li>
<li>Server can be started by:
<pre>foreman start -f Procfile.dev</pre>
</li>
</ul>

== Issues Faced ==

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

<ul>
<li>Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.</li>
<li>mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.</li>
</ul>

== Current Status ==

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

<ul>
<li>The JS code is mounted on to the expertiza.html.erb file.</li>
<li>The data is fetched from the controllers after the respective action.</li>
<li>This data is then converted into props, which are parameters that are passed on to the React Components.</li>
<li>These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.</li>
<li>The render() function, which is the base function to display the content, then renders the props in its appropriate section.</li>
</ul>

Front-End/Back-End

2019-10-29T23:45:28Z

Amedge: Added a new title for a new page.

* [[Architecture and setup]]

* [[Login Component]]

* [[Student Tasks Component]]

* [[Profile Component]]

* [[Student Task View]]

* [[React-Rails Integration]]