React-Rails Gem Integration for ReactJS frontend - Revision history

Amedge at 22:00, 18 December 2019

2019-12-18T22:00:39Z

← Older revision		Revision as of 22:00, 18 December 2019
Line 76:		Line 76:

	== Redirecting to the Rails frontend of Expertiza ==		== 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.

Amedge at 18:13, 16 December 2019

2019-12-16T18:13:16Z

← Older revision		Revision as of 18:13, 16 December 2019
Line 59:		Line 59:
	</ul>		</ul>

	== Migrated Components ==		== 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:		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:
Line 74:		Line 74:
	<li>GradesViewMyScores</li>		<li>GradesViewMyScores</li>
	</ul>		</ul>

			== Redirecting to the Rails frontend of Expertiza ==

Amedge at 18:10, 16 December 2019

2019-12-16T18:10:38Z

← Older revision		Revision as of 18:10, 16 December 2019
Line 73:		Line 73:
	<li>ChangeHandleComponent</li>		<li>ChangeHandleComponent</li>
	<li>GradesViewMyScores</li>		<li>GradesViewMyScores</li>
	~~<li></li>~~
	</ul>		</ul>

Amedge at 18:10, 16 December 2019

2019-12-16T18:10:17Z

@@ Line 57: / Line 57: @@
 <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>

Amedge: /* Introduction */

2019-12-03T20:24:33Z

Introduction

← Older revision		Revision as of 20:24, 3 December 2019
Line 1:		Line 1:
	== 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.		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.		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.		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 ==		== React-Rails Integration Steps ==

Amedge: /* Introduction */

2019-12-03T20:23:54Z

Introduction

← Older revision		Revision as of 20:23, 3 December 2019
Line 1:		Line 1:
	== 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. 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.		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.		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.

Amedge at 17:01, 3 December 2019

2019-12-03T17:01:44Z

← Older revision		Revision as of 17:01, 3 December 2019
Line 1:		Line 1:
	== 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. 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]]~~.		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.		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.

Amedge at 17:00, 3 December 2019

2019-12-03T17:00:44Z

← Older revision		Revision as of 17:00, 3 December 2019
Line 1:		Line 1:
	== Introduction ==		== 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]].		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.		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.

Amedge at 16:53, 3 December 2019

2019-12-03T16:53:24Z

← Older revision		Revision as of 16:53, 3 December 2019
Line 13:		Line 13:
	<ul>		<ul>
	<li>'''Note:''' Detailed instructions can be found at the above link. </li>		<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>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'		<li>Add the gems 'react_on_rails' and 'webpacker'
	<pre>		<pre>

Amedge at 16:51, 3 December 2019

2019-12-03T16:51:55Z

← Older revision		Revision as of 16:51, 3 December 2019
Line 13:		Line 13:
	<ul>		<ul>
	<li>'''Note:''' Detailed instructions can be found at the above link. </li>		<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>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'		<li>Add the gems 'react_on_rails' and 'webpacker'
	<pre>		<pre>