React Design Doc

This page references the design doc for the React. We will discuss React in the following sections.

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.

Members of the Dashboard team will be applying their knowledge gained from the tic-tac-toe React project to develop their own React app.

Task 1 : Button Press and Accumulation
Create an app that accumulates and displays the amount of times a specific button was pressed. For the app, be sure to include Smart Campus Energy Lab at the top and be mindful of spacing.

Task 2 : Components
From Task 1, break down the main file into different components. For instance if there is a component that accumulates the amount of clicks, be sure to separate it into another file and import it to the main file to be used.

Task 3 : Semantic 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.