{"id":19811094,"url":"https://github.com/accenture/openathon-2019-react","last_synced_at":"2025-08-16T23:49:37.083Z","repository":{"id":141762287,"uuid":"150626636","full_name":"Accenture/openathon-2019-react","owner":"Accenture","description":"Openathon edition organised for the Accenture Technology Custom Open Cloud community where we will have again the opportunity to discover, in a practical way, the possibilities offered by the different architectures and leading frameworks in the market.","archived":false,"fork":false,"pushed_at":"2019-05-03T07:56:43.000Z","size":760,"stargazers_count":14,"open_issues_count":0,"forks_count":17,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-06T11:51:43.375Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Accenture.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-27T17:51:49.000Z","updated_at":"2025-01-16T10:55:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"0bb0df9d-29cb-437c-9fb3-8464c7ab3eae","html_url":"https://github.com/Accenture/openathon-2019-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Accenture%2Fopenathon-2019-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Accenture%2Fopenathon-2019-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Accenture%2Fopenathon-2019-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Accenture%2Fopenathon-2019-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Accenture","download_url":"https://codeload.github.com/Accenture/openathon-2019-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251847828,"owners_count":21653582,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T09:24:45.356Z","updated_at":"2025-05-01T08:32:28.509Z","avatar_url":"https://github.com/Accenture.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# II Openathon Custom Open Cloud\n\n![II Openathon Custom Open Cloud](https://github.com/Albarian/openathonFY19/raw/master/resources/images/IIopenathon_customopencloud.png \"II Openathon Custom Open Cloud\")\n\nYou are welcome to a new **Openathon** edition organized for the\n**Accenture Technology Custom Open Cloud community** where, once\nagain, we will have the opportunity to discover, in a practical way,\nthe possibilities offered by the different architectures and leading\nframeworks in the market.\n\nAs you already knows, this time we will learn to develop a **FrontEnd\nweb application** using **React**.  We will also use some of the\nrecommended best practices such as routing, asynchronous REST API\naccess, reusable components and state management.\n\nReact’s strongest capability is the creation of web interfaces based\non _reusable_ components.  Therefore, we are going to create and reuse\nour own components while learning how to manage their life cycle, the\nmanagement of props and the JSX syntax while exercising our knowledge\nof JavaScript (ES6).\n\n## What we are going to do\n\nWe will learn how to develop a web application using React, playing\nwith **props**, **JSX**, **Virtual DOM**, **components**, routing,\nREST API consumption, components reuse… and applying some of the\nrecommended good practices like **Single responsibility principle**,\n**Isolation**, **functional programming** and **prototypal\ninheritance**.\n\nThe web application will consist on a Main and two detail pages:\n\n![Web Map](https://github.com/Albarian/openathonFY19/raw/master/resources/images/web%20map.png \"Web Map\")\n\nThe main page of the application will have this structure:\n\n![Mockup](https://github.com/Albarian/openathonFY19/raw/master/resources/images/main%20page%20mockup.png \"Mockup\")\n\nThe main page is a modularized page that takes advantage of many\nreusable components, whose hierarchy can be seen in the following\npicture:\n\n![Components Use](https://github.com/Albarian/openathonFY19/raw/master/resources/images/components%20use.png \"Components Use\")\n\nTo provide data to the page we will also use a mocked REST API\nendpoint emulating the [Accenture\nsite](https://www.accenture.com/us-en/company) data services:\n\n![Components and API](https://github.com/Albarian/openathonFY19/raw/master/resources/images/components%20and%20API.png \"Components and API\")\n\n## Openathon Labs\n\nThis edition of the Openathon is divided in the following labs:\n\n| Lab                                 | Title                                      |\n|-------------------------------------|--------------------------------------------|\n| [Lab 00](/labs/lab-00)              | JavaScript and React                       |\n| [Lab 01](/labs/lab-01)              | Starting a New React Project               |\n| [Lab 02](/labs/lab-02)              | React Fundamentals                         |\n| [Lab 03](/labs/lab-03)              | Fetching Data in your React Application    |\n| [Lab 04](/labs/lab-04)              | Using React Router                         |\n| [Lab 05](/labs/lab-05)              | Completing your App Home Page              |\n| [Lab 06](/labs/lab-06)              | Using Nested Routes                        |\n| [Lab 07](/labs/lab-07)              | Form Components in React                   |\n| [Lab 08](/labs/lab-08)*             | Integrating Axios Library                  |\n| [Lab 09](/labs/lab-09)*             | Persisting data in your JSON Server        |\n| [Lab Testing](/labs/lab-testing)*   | React Unit Testing                         |\n\n\\* Optional Labs for further learning\n\n## Prerequisites\n\n1. Install **Visual Studio Code** for your operating system:\n\n    **Visual Studio Code** is a source code editor with support\n    for debugging, embedded Git control, syntax\n    highlighting, intelligent code completion, snippets, and code\n    refactoring.\n\n    [Click here](https://code.visualstudio.com/) to download and install\n\n2. Install **Node.js** for your operating system:\n\n    **Node.js** is a free, open source server environment that runs on\n    various platforms (Windows, Linux, Unix, Mac OS X, etc.) using\n    the JavaScript runtime built on Chrome's V8 JavaScript engine.\n\n    [Click here](https://nodejs.org/en/download/) to download and install.\n\n    This installation will also install **npm**, the package manager\n    for Node.js and the world's largest software registry.\n\n3. Install **webpack**\n\n    Open your terminal or command prompt and run:\n\n    ```sh\n    npm install webpack -g\n    ```\n\n    **webpack** is a module bundler. Its main purpose is to bundle\n    JavaScript files for usage in a browser, yet it is also capable of\n    transforming, bundling, or packaging. [More\n    info](https://webpack.js.org/).\n\n4. Install **json-server**\n\n    Open your terminal or command prompt and run:\n\n    ```sh\n    npm install json-server -g\n    ```\n\n    **JSON Server** is a Node module that can be used to create demo\n    REST web services in a few minutes using a JSON file to provide\n    sample data. We will configure it later.\n\n    [Click here](https://github.com/typicode/json-server) to know more.\n\n5. Download and install **React Developer Tools**\n\n    **React Developer Tools** is a Chrome DevTools extension for the\n    open-source React JavaScript library.  It allows you to inspect the\n    React component hierarchies in the Chrome Developer Tools.\n\n    [Click\n    here](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)\n    to download and install.\n\n[Next \u003e](labs/lab-00)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccenture%2Fopenathon-2019-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faccenture%2Fopenathon-2019-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccenture%2Fopenathon-2019-react/lists"}