From 4959ddb810eaa01509b34c3d551cd7eb6bc07843 Mon Sep 17 00:00:00 2001 From: Ray Villalobos Date: Tue, 30 Aug 2022 01:18:16 +0000 Subject: [PATCH 01/12] 01_01b --- src/App.jsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 1fc4d0a6..1d87fc4d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,17 +1,9 @@ function App() { - const name = 'StarGazers'; return ( -
-
- StarGazer Group -
-

Meet the {name}

-

Members of an intergalactic alliance
- paving the way for peace and benevolence among all species. They are known for their enthusiasm for science, for their love of fun, and their dedication to education.

- -
-
-
+
+

Meet the StarGazers

+

Members of an intergalactic alliance paving the way for peace and benevolence among all species. They are known for their enthusiasm for science, for their love of fun, and their dedication to education.

+
) } export default App From 695bd79177a2bf3b6f209ed113a133d663bcc090 Mon Sep 17 00:00:00 2001 From: Ray Villalobos Date: Mon, 29 Aug 2022 21:40:00 -0400 Subject: [PATCH 02/12] Update devcontainer.json --- .devcontainer/devcontainer.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 65e08498..e4a332ac 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -7,7 +7,8 @@ "stylelint.vscode-stylelint" // Additional Extensions Here ], - "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc" //Set Terminal Prompt to $ + "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc", //Set Terminal Prompt to $ + "postStartCommand": "npm start" } // DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference From c1e7dbbc3f48f2250433617867779f309b6fad6f Mon Sep 17 00:00:00 2001 From: Ray Villalobos Date: Mon, 29 Aug 2022 21:45:58 -0400 Subject: [PATCH 03/12] Update devcontainer.json --- .devcontainer/devcontainer.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index e4a332ac..e6fee914 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -3,12 +3,10 @@ "GitHub.github-vscode-theme", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", - "ritwickdey.LiveServer", "stylelint.vscode-stylelint" // Additional Extensions Here ], - "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc", //Set Terminal Prompt to $ - "postStartCommand": "npm start" + "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc" //Set Terminal Prompt to $ } // DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference From 51a0f2d4ef5df733783d0f0dfdf15d0d3153d3ef Mon Sep 17 00:00:00 2001 From: Ray Villalobos Date: Mon, 29 Aug 2022 21:58:49 -0400 Subject: [PATCH 04/12] Update .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 4b64bc3c..1c206ea3 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules .tmp npm-debug.log +dist From fcc826b9020c1da9505b5d4adf77e26889872761 Mon Sep 17 00:00:00 2001 From: Ray Villalobos Date: Tue, 30 Aug 2022 02:20:01 +0000 Subject: [PATCH 05/12] added postcreate command --- .devcontainer/devcontainer.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index e6fee914..d8f54dbf 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -6,7 +6,8 @@ "stylelint.vscode-stylelint" // Additional Extensions Here ], - "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc" //Set Terminal Prompt to $ + "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc", //Set Terminal Prompt to $ + "postCreateCommand": "npm start" //Start the app } // DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference From 6de97c828127743e1478b07006b7da6d919fb8a3 Mon Sep 17 00:00:00 2001 From: Ray Villalobos Date: Tue, 30 Aug 2022 02:21:09 +0000 Subject: [PATCH 06/12] added postcreate command --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index d8f54dbf..f4479990 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -7,7 +7,7 @@ // Additional Extensions Here ], "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc", //Set Terminal Prompt to $ - "postCreateCommand": "npm start" //Start the app + "postStartCommand": "npm start" //Start the app } // DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference From a624f72ee3f822d16aa1208edfd25aa592c74d30 Mon Sep 17 00:00:00 2001 From: smoser-LiL Date: Mon, 7 Nov 2022 16:01:03 +0000 Subject: [PATCH 07/12] Moving files using main --- .github/workflows/main.yml | 4 ++- NOTICE | 69 +++++++++++++++++++++++++++++++++++++- README.md | 23 ++++++------- 3 files changed, 82 insertions(+), 14 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 17325664..e71e5972 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -9,4 +9,6 @@ jobs: with: fetch-depth: 0 - name: Copy To Branches Action - uses: planetoftheweb/copy-to-branches@v1 + uses: planetoftheweb/copy-to-branches@v1.2 + env: + key: main diff --git a/NOTICE b/NOTICE index 547595f9..04a6f5f6 100644 --- a/NOTICE +++ b/NOTICE @@ -5,7 +5,18 @@ Licensed under the LinkedIn Learning Exercise File License (the "License"). See LICENSE in the project root for license information. ATTRIBUTIONS: -[PLEASE PROVIDE ATTRIBUTIONS OR DELETE THIS AND THE ABOVE LINE “ATTRIBUTIONS”] + +React +https://github.com/facebook/react +Copyright (c) Facebook, Inc. and its affiliates. +License: MIT +https://opensource.org/licenses/MIT + +Babel +https://github.com/babel/babel +Copyright (c) 2014-present Sebastian McKenzie and other contributors +License: MIT +https://opensource.org/licenses/MIT Please note, this project may automatically load third party code from external repositories (for example, NPM modules, Composer packages, or other dependencies). @@ -13,3 +24,59 @@ If so, such third party code may be subject to other license terms than as set forth above. In addition, such third party code may also depend on and load multiple tiers of dependencies. Please review the applicable licenses of the additional dependencies. + + +=-=-=-=-=-=-=-=-=-=-=-=-=- + +MIT License + +Copyright (c) Facebook, Inc. and its affiliates. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the ""Software""), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +=-=-=-=-==-=-=-=-=-=-=-=-- + +"MIT License + +Copyright (c) 2014-present Sebastian McKenzie and other contributors + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +""Software""), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +Footer +© 2022 GitHub, Inc. +Footer navigation +Terms +Privacy +" diff --git a/README.md b/README.md index 422e0932..034bd5b4 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,10 @@ -# COURSENAME -This is the repository for the LinkedIn Learning course `course-name`. The full course is available from [LinkedIn Learning][lil-course-url]. +# Hands-On Introduction: React +This is the repository for the LinkedIn Learning course Hands-On Introduction: React . The full course is available from [LinkedIn Learning][lil-course-url]. -![course-name-alt-text][lil-thumbnail-url] +![Hands-On Introduction: React ][lil-thumbnail-url] + +When you learn a new framework, you sometimes get to start fresh, from scratch, with plenty of time. Other times, though, you need to dive right in and get things done. This hands-on course helps you quickly get up to speed with React—the popular JavaScript library for building user interfaces—by allowing you to change code directly as you follow along. Instructor Ray Villalobos highlights the aspects of React that set it apart from other JavaScript libraries, including how to approach templating and React Hooks. He then details how to build with React and use it in a web project.

The best way to learn a framework is to use it in practice. That’s why this course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With GitHub Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that you’ll likely encounter in the workplace. Check out the [Using GitHub Codespaces with this course][gcs-video-url] video to learn how to get started. -_See the readme file in the main branch for updated instructions and information._ ## Instructions This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add `/tree/BRANCH_NAME` to the URL to go to the branch you want to access. @@ -22,15 +23,13 @@ To resolve this issue: Add changes to git using this command: git add . Commit changes using this command: git commit -m "some message" -## Installing -1. To use these exercise files, you must have the following installed: - - [list of requirements for course] -2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree. -3. [Course-specific instructions] +### Instructor -[0]: # (Replace these placeholder URLs with actual course URLs) +Ray Villalobos -[lil-course-url]: https://www.linkedin.com/learning/ -[lil-thumbnail-url]: http:// +Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/ray-villalobos). +[lil-course-url]: https://www.linkedin.com/learning/hands-on-introduction-react +[lil-thumbnail-url]: https://media.licdn.com/dms/image/D560DAQFfGNmb1Kxvkw/learning-public-crop_675_1200/0/1666989585426?e=1667955600&v=beta&t=T8baitOBf_RV8nbyKAHNSxqmNsyiYClfQ2oalLHwq20 +[gcs-video-url]: https://www.linkedin.com/learning/hands-on-introduction-react/using-github-codespaces-with-this-course From 9aa40459f5fe285b072d106933612ed8ff41e0f5 Mon Sep 17 00:00:00 2001 From: smoser-LiL Date: Tue, 8 Nov 2022 22:43:54 +0000 Subject: [PATCH 08/12] Moving files using main --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 034bd5b4..ee47fe55 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # Hands-On Introduction: React -This is the repository for the LinkedIn Learning course Hands-On Introduction: React . The full course is available from [LinkedIn Learning][lil-course-url]. +This is the repository for the LinkedIn Learning course Hands-On Introduction: React. The full course is available from [LinkedIn Learning][lil-course-url]. ![Hands-On Introduction: React ][lil-thumbnail-url] From 8051412cb029cb6d9566f8241bbc1f8cb81a8989 Mon Sep 17 00:00:00 2001 From: pcstevens Date: Wed, 9 Nov 2022 05:34:24 +0000 Subject: [PATCH 09/12] Moving files using main --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ee47fe55..be4a96a1 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ # Hands-On Introduction: React This is the repository for the LinkedIn Learning course Hands-On Introduction: React. The full course is available from [LinkedIn Learning][lil-course-url]. -![Hands-On Introduction: React ][lil-thumbnail-url] +![1666989585426](https://user-images.githubusercontent.com/25848438/200747140-294450cb-2309-4fd5-a8de-30feca3cc60f.jpeg)] + When you learn a new framework, you sometimes get to start fresh, from scratch, with plenty of time. Other times, though, you need to dive right in and get things done. This hands-on course helps you quickly get up to speed with React—the popular JavaScript library for building user interfaces—by allowing you to change code directly as you follow along. Instructor Ray Villalobos highlights the aspects of React that set it apart from other JavaScript libraries, including how to approach templating and React Hooks. He then details how to build with React and use it in a web project.

The best way to learn a framework is to use it in practice. That’s why this course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With GitHub Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that you’ll likely encounter in the workplace. Check out the [Using GitHub Codespaces with this course][gcs-video-url] video to learn how to get started. @@ -31,5 +32,4 @@ Ray Villalobos Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/ray-villalobos). [lil-course-url]: https://www.linkedin.com/learning/hands-on-introduction-react -[lil-thumbnail-url]: https://media.licdn.com/dms/image/D560DAQFfGNmb1Kxvkw/learning-public-crop_675_1200/0/1666989585426?e=1667955600&v=beta&t=T8baitOBf_RV8nbyKAHNSxqmNsyiYClfQ2oalLHwq20 [gcs-video-url]: https://www.linkedin.com/learning/hands-on-introduction-react/using-github-codespaces-with-this-course From aea846bb79fe6e2019fd81c8efbef931d2fac23a Mon Sep 17 00:00:00 2001 From: pcstevens Date: Wed, 9 Nov 2022 05:36:20 +0000 Subject: [PATCH 10/12] Moving files using main --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index be4a96a1..5fa4cd7e 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,7 @@ # Hands-On Introduction: React This is the repository for the LinkedIn Learning course Hands-On Introduction: React. The full course is available from [LinkedIn Learning][lil-course-url]. -![1666989585426](https://user-images.githubusercontent.com/25848438/200747140-294450cb-2309-4fd5-a8de-30feca3cc60f.jpeg)] - +![1666989585426](https://user-images.githubusercontent.com/25848438/200747140-294450cb-2309-4fd5-a8de-30feca3cc60f.jpeg) When you learn a new framework, you sometimes get to start fresh, from scratch, with plenty of time. Other times, though, you need to dive right in and get things done. This hands-on course helps you quickly get up to speed with React—the popular JavaScript library for building user interfaces—by allowing you to change code directly as you follow along. Instructor Ray Villalobos highlights the aspects of React that set it apart from other JavaScript libraries, including how to approach templating and React Hooks. He then details how to build with React and use it in a web project.

The best way to learn a framework is to use it in practice. That’s why this course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With GitHub Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that you’ll likely encounter in the workplace. Check out the [Using GitHub Codespaces with this course][gcs-video-url] video to learn how to get started. From 28ac5cec6672aea1afd5457582c6785a28edb88b Mon Sep 17 00:00:00 2001 From: Ray Villalobos Date: Thu, 29 Dec 2022 01:25:13 +0000 Subject: [PATCH 11/12] updated devcontainer, deleted docs files --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index f4479990..5d70dccb 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -7,7 +7,7 @@ // Additional Extensions Here ], "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc", //Set Terminal Prompt to $ - "postStartCommand": "npm start" //Start the app + "postAttachCommand": "git pull --all && npm start" } // DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference From 3b2817cbb126e6546d54bbb07d799cd77bd2ab35 Mon Sep 17 00:00:00 2001 From: Roro <102007040+ruwinolga99@users.noreply.github.com> Date: Wed, 11 Sep 2024 03:26:08 +0000 Subject: [PATCH 12/12] Change to App.jsx code --- src/App.jsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 1d87fc4d..add15131 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,17 @@ function App() { + const name = 'StarGazers' return ( -
-

Meet the StarGazers

-

Members of an intergalactic alliance paving the way for peace and benevolence among all species. They are known for their enthusiasm for science, for their love of fun, and their dedication to education.

-
+
+
+
+ StarGazers Group +

Meet the {name}

+

Members of an intergalactic alliance
+ paving the way for peace and benevolence among all species. They are known for their enthusiasm for science, for their love of fun, and their dedication to education.

+ +
+
+
) } export default App