Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: THEend8_
The repository is structured as a react application. The public/ directory has metadata about the application such as images and logos and the main HTML page, index.html. You should not change anything in this file.
The src/ directory has the directories, components, data, models, stylesheets, and tool. Further, it has two files index.js and App.js. The index.js file is used to render the component exported in App.js in public/index.html’s “root” div.
The data directory defines the in-memory data structure that the application uses. Currently, it only has model.js and is identical to the one you used in the JavaScript MVC assignment.
The models directory defines several objects that provide a representation of the underlying in-memory data. All access (read and write) to the underlying data must
happen through the model objects as they are designed optimally for the presentation layer.
All React components are defined in the components directory. Additional react components that you define must also be part of the same directory. Each component is defined to have its local stylesheet as defined by the corresponding css files. You must not change the selector names in the style rules. You are free to change the style elements or add more style rules.
The tool directory contains utility functions. You should modify the utility functions if they do not exhibit expected behavior. Further, you can add your own utility functions to this directory.
In the repository, you will find two files called package.json and package- lock.json. If you have added dependencies to these files, then you will need to commit these files to the repository so we can run your application with the same dependencies. However, there should be no reason for you to change these files. These files list the external dependencies which we will need for the react application to run successfully on any
machine. When you clone the repository run the command npm install. Running the command will create a directory called node_modules which will contain all the required packages. You can then start your application using the command npm start. Running this command will open a local host server at port 3000. The application will automatically open in a browser. If it does not, then manually open http://localhost:3000/ in a browser. In the browser, you should see a collection of questions currently in data/model.js. You can now proceed and make changes to the code base. If you change code and save it, the server will automatically pick up the changes.
Debugging
In addition to the debugging tools used in the previous assignment, you can use the React Dev tools extension for specifically debugging React components. Here is a short video tutorial on using the tool on Chrome.
Testing
As before, we will use the Cypress tool to test and verify the correctness of the graphical user interface (GUI). All GUI tests are defined in cypress/e2e/.
In addition to the GUI tests, component tests are defined in cypress/component. The purpose of the component tests is two-fold:
1. Theyhelpusverifythebehaviorofindividualcomponentswithouthavingtorunthe entire application. If we make a mistake while developing a component the error is immediately detected at the component level. This aligns with one of characteristics of component-based development, that is, components should be individually developed and tested.
2. Theydefinetheinterfacespecificationofacomponent,thatis,itsinputs,theexpected elements it is supposed to return, and the functions or methods it is supposed to call when expected events are triggered. This aligns with one of the crucial aspects of component-based development, that is, components must have well-defined interfaces to facilitate communication between components.