Show the Lists of volunteers & contributors and Assign role

Show the lists of volunteers and contributors and Assign role feature already present in the application. Bugs in the feature is that volunteers can also add and remove the volunteers and contributors but they don’t have the access. So I decided to generate a new react component and create a new wep page in the site view and user interface was also not so good. So that seperate the functionality of list of volunteers and contributors and assign role. For this feature I learnt about react-rails gem, jsx, coffeescript, react components. Brief description about them are as follows:

react-rails gem

React is a JavaScript library for creating user interfaces. We built React to building large applications with data that changes over time. To embed the react in rails we use react-rails gem. This gem is already used in the application, I just understand the gem and try to use this for generating the new react component.

JSX

JSX is the Javascript syntax library that is similar to XML. In our application we use JSX with the CoffeeScript. So for any editing the file I have learnt jsx like learn the syntax of the jsx and how to use the jsx with the coffeescript.

CoffeeScript

CoffeeScript is programming language that transcompiles to JavaScript. And the view of the users and sites are written in the coffeescipt with jsx. I faced some problem of the indentation while working with the coffeescript. We use the backticks “`” to embed the jsx code in the coffeescript.

React component

Code for list of volunteers & contributors and assign role is in the single component in the single webpage. I tried to create a new component in the same view but within the diferent web page. Either both render to the same component or it shows the error of the is not defined. I cross checked the react-rails gem documentation but did not get the solution. I searched alot but did not find the solution yet. Then create new component in the new view then its working fine that means we might be create only single react component for single view. So I reassemble the code of list of Volunteers and contributors and assign role in a single component but now add the can? method helper so that only admin can add and remove the roles and also improve the UI.

Thanks :).