Show the code to create a stateful React component called Timer according to the following specification: The component must contain a "state" named count and initialize it 120. The value of the "state" count will be decreased by 1 every second until O is reached. The component renders the following template:

Count: COUNT

Where: o The "COUNT" is the value of the "state" count o When the "Reload" button is clicked, add 60 to the current value of the "state" count. Note: o Write the function to create the Timer component only no import or export statement is needed. Appropriate hooks discussed in class need to be used. o Complete the JSX code for a React project's root (App.js) component to provide "routing" options for the React application. We will assume that each view in the application has been created in its own component and BrowserRouter has been added to the index.js file surrounding the App component. The following describes each component and what "route" should be used to render them on the page: - this component should be rendered using the route "/help". If query parameters active is provided to the route, e.g. "/users? active=true", the "Users" component should be able to accept a single property "query" with the query string as value. - this component should be rendered using the route "/users". - this component should be rendered using the route "/user/userld", where userld can be any value. The "User" component accepts a single property: "id" which represents the userld in the route. - this component should be rendered whenever any of the above routes is not matched. For the 'root' route "/", redirects to the route "/users". Note: (same as the note for the previous question) You must not edit or change your answer in the following text box on the test because it causes your markup code to be removed. So you should write your answer in other editor, then copy/paste your final answer to the following text box. The code of the component: function App () { return ( // your code starts here The following is the App component of a React project: import Courses from './courses'; function App() { const courseArray [ {code: "WEB222", desc: "Web Programming Principles"}, {code: "WEB322", desc: "Web Programming Tools and Frameworks"}, {code: "WEB422", desc: "Web Programming for Apps and Services"} ]; return } export default App; Show the complete code (including import and export statements) to create a component named Courses which receives a property with the value of an array of course objects from its parent - the App component. The Courses component is required to render the passed-in array data to an unorder list with a heading

Web Courses

on top, and for the course "WEB422", use the tags to make the text displayed in bold. Here are the results: Web Courses WEB222 - Web Programming Principles WEB322 - Web Programming Tools and Frameworks WEB422 - Web Programming for Apps and Services Note: Hard code is not allowed for rendering the array's elements. Class component syntax is not allowed. You must not edit or change your answer in the following text box on the test because it causes your markup code to be removed. So you should write your answer in other editor, then copy/paste your final answer to the following text box. 0 . Show the code to create a stateful React component called Timer according to the following specification: The component must contain a "state" named count and initialize it 120. The value of the "state" count will be decreased by 1 every second until O is reached. The component renders the following template:

Count: COUNT

Where: o The "COUNT" is the value of the "state" count o When the "Reload" button is clicked, add 60 to the current value of the "state" count. Note: o Write the function to create the Timer component only no import or export statement is needed. Appropriate hooks discussed in class need to be used. o Complete the JSX code for a React project's root (App.js) component to provide "routing" options for the React application. We will assume that each view in the application has been created in its own component and BrowserRouter has been added to the index.js file surrounding the App component. The following describes each component and what "route" should be used to render them on the page: - this component should be rendered using the route "/help". If query parameters active is provided to the route, e.g. "/users? active=true", the "Users" component should be able to accept a single property "query" with the query string as value. - this component should be rendered using the route "/users". - this component should be rendered using the route "/user/userld", where userld can be any value. The "User" component accepts a single property: "id" which represents the userld in the route. - this component should be rendered whenever any of the above routes is not matched. For the 'root' route "/", redirects to the route "/users". Note: (same as the note for the previous question) You must not edit or change your answer in the following text box on the test because it causes your markup code to be removed. So you should write your answer in other editor, then copy/paste your final answer to the following text box. The code of the component: function App () { return ( // your code starts here The following is the App component of a React project: import Courses from './courses'; function App() { const courseArray [ {code: "WEB222", desc: "Web Programming Principles"}, {code: "WEB322", desc: "Web Programming Tools and Frameworks"}, {code: "WEB422", desc: "Web Programming for Apps and Services"} ]; return } export default App; Show the complete code (including import and export statements) to create a component named Courses which receives a property with the value of an array of course objects from its parent - the App component. The Courses component is required to render the passed-in array data to an unorder list with a heading

Web Courses

on top, and for the course "WEB422", use the tags to make the text displayed in bold. Here are the results: Web Courses WEB222 - Web Programming Principles WEB322 - Web Programming Tools and Frameworks WEB422 - Web Programming for Apps and Services Note: Hard code is not allowed for rendering the array's elements. Class component syntax is not allowed. You must not edit or change your answer in the following text box on the test because it causes your markup code to be removed. So you should write your answer in other editor, then copy/paste your final answer to the following text box. 0