Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
weatherbox:dashboard_v2:react:start [2018/03/01 03:27] gli |
weatherbox:dashboard_v2:react:start [2021/09/19 21:59] (current) |
||
|---|---|---|---|
| Line 5: | Line 5: | ||
| === Motivation === | === Motivation === | ||
| + | We are using React because it is one the most popular web frameworks used in production today. Created by Facebook the open-source framework has rapidly gained followers and is now used in multiple web applications today. Since the original version of the dashboard was done in Django, the next obvious step to improve the web app was to follow the open-source community and create a React application. | ||
| ---- | ---- | ||
| Line 13: | Line 13: | ||
| === Technologies Involved === | === Technologies Involved === | ||
| + | |||
| + | One of the React technologies used in our application is the React Router. Most of the code for the React Router currently can be found in index.js and the SCELMenu component. Semantic's Menu component thankfully takes care of handling React Router's Link Component so integration was simple. In order to put React Router in a new react app, we need to take care to initialize the BrowserRouter at the top most level (index.js). Most new projects come with an App.js, but you can very quickly delete App.js and create your own components once you understand how React works as a whole. | ||
| ---- | ---- | ||
| Line 28: | Line 30: | ||
| Task 3 : Semantic React\\ | Task 3 : Semantic React\\ | ||
| - | For Task 3, create the same app in Tasks 1 and 2, but using Semantic UI for React. | + | Create the same app in Tasks 1 and 2, but using Semantic. |
| + | |||
| + | Task 4 : Changing Display\\ | ||
| + | Create a React App using Semantic such that when a button is pressed, the corresponding button's image is displayed. | ||