Architecture and setup: Difference between revisions
Line 7: | Line 7: | ||
=== React Application === | === React Application === | ||
The React application is created following https://github.com/facebook/create-react-app. | 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> |
Revision as of 20:14, 21 July 2019
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-services, axios, a promise based HTTP client is used.
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,
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