|
1 | 1 | # React Labyrinth
|
2 | 2 |
|
3 |
| - |
| 3 | +<p align="center"> |
| 4 | + <img width="400" height="400" src="https://github.com/oslabs-beta/React-Labyrinth/assets/127361061/ca9ab4e5-cb28-4dc3-83fa-9ef47e4fdbeb"> |
| 5 | +</p> |
4 | 6 |
|
5 |
| -# __Table of Contents__ |
| 7 | +## __Table of Contents__ |
6 | 8 | 1. [Overview](#overview)
|
7 |
| -2. [Features](#features) |
8 |
| -3. [Installation](#installation) |
9 |
| -4. [Getting Started](#getting-started) |
10 |
| -5. [Known Issues](#known-issues) |
11 |
| -6. [Release Notes](#release-notes) |
| 9 | +2. [Installation](#installation) |
| 10 | +3. [Getting Started](#getting-started) |
| 11 | +4. [Tech Stack](#tech-stack) |
| 12 | +5. [Publications](#publications) |
| 13 | +6. [Contributing](#contributing) |
12 | 14 | 7. [Meet Our Team](#meet-our-team)
|
13 | 15 | 8. [License](#license)
|
14 | 16 |
|
15 | 17 | *work in progress as of 11/13/23*
|
16 | 18 | ## Overview
|
17 |
| -React Server Components are components that run exclusively on the server, allowing the components to do things such as making their own database queries inside of the component, rather than having to make a request to the backend first. These components are different from the components we usually write in React, which under this new paradigm are refered to as Client Components. But the problem is it's not always clear which Client Components could instead be Server Components which would save space on the bundle size and decrease TTI(time to interactive) for the client. |
| 19 | +React Server Components operate exclusively on the server, enabling tasks such as executing database queries within the component itself, rather than relying on backend requests. This paradigm distinguishes them from traditional React components, known as Client Components. However, identifying which Client Components could be optimized as Server Components isn't always straightforward, potentially leading to inefficient bundle sizes and longer time to interactive (TTI) for clients. |
18 | 20 |
|
19 |
| -We want to create a visualization tool to help developers know where these changes could be implemented and how much time and space their application would save from these potential changes. _(Make sure to "trust our extension" in order to see the bundle size and TTI metrics)_ |
| 21 | +To address this challenge, we aim to develop a visualization tool to help developers determine their application's component types. By enhancing component-type visibility and aiding in the transition to server components, our tool empowers developers to optimize their applications effectively. |
20 | 22 |
|
21 |
| -## Features |
| 23 | +## Installation |
22 | 24 |
|
23 |
| -Our tool will |
24 |
| -* Show which components are currently considered Client Components or Server Components |
25 |
| -* Show if a Client Component has the potential to be a Server Component. |
26 |
| -* Display the change in Bundle Size and TTI for the web application |
| 25 | +React Labyrinth extension can be installed via the VS Code Marketplace. Start by clicking the Extensions icon in the Activity Bar on the side of VS Code or by using the View: Extensions command (Ctrl+Shift+X). Search for 'react-labyrinth' and click the "install" button. Upon completion, VS Code will have installed the extension and React Labyrinth is ready for use. |
27 | 26 |
|
28 |
| -\!\[feature X\]\(images/feature-x.png\) |
| 27 | +## Getting Started |
29 | 28 |
|
30 |
| -> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow. |
| 29 | +Once React Labyrinth is installed in your VS Code, you'll notice its logo added to the Activity Bar on the left-hand side. Simply click on the React Labyrinth logo to launch the extension. |
| 30 | +<p align="center"> |
| 31 | + <img width="250" height="450" src="https://github.com/oslabs-beta/React-Labyrinth/assets/127361061/d72b483b-7785-4a5d-9836-9c79ff46e3a3"> |
| 32 | +</p> |
31 | 33 |
|
32 |
| -## Installation |
| 34 | +Upon activation, a sidebar will appear, featuring a 'View Tree' button. Clicking this button will prompt the file explorer to open, allowing you to select the root file of your React App to load the tree structure. |
33 | 35 |
|
34 |
| -Our visualization tool can be downloaded as an extension in the VS Code Editor. Search for React Labrynth and click "install". |
35 |
| - |
36 |
| -## Getting Started |
| 36 | +Client Components will be distinguished by a orange background, while Server Components will feature an blue background for easy identification. |
37 | 37 |
|
38 |
| -Select the root file for your React App to load the tree. |
| 38 | +## Tech Stack |
39 | 39 |
|
40 |
| -Any components that are Client Components will have a blue background and Server Components will have an orange background. |
| 40 | +<p align="center"> |
| 41 | + <a href="https://skillicons.dev"> |
| 42 | + <img src="https://skillicons.dev/icons?i=js,ts,html,css,tailwind,babel,react,d3,jest,nodejs,webpack,git,azure,vscode)](https://skillicons.dev" /> |
| 43 | + </a> |
| 44 | +</p> |
41 | 45 |
|
42 |
| -If the component has the potential to be a Server Component, there will be an orange dotted outline surrounding the component node on the tree. |
| 46 | +## Publications |
43 | 47 |
|
44 |
| -* `myExtension.enable`: Enable/disable this extension. |
45 |
| -* `myExtension.thing`: Set to `blah` to do something. |
| 48 | +Check out our medium article (insert hyperlink) for more information about React Labyrinth! |
46 | 49 |
|
47 |
| -## Known Issues |
| 50 | +## Contributing |
48 | 51 |
|
49 |
| -Calling out known issues can help limit users opening duplicate issues against your extension. |
| 52 | +Contributions are the cornerstone of the open-source community, fostering an environment of learning, inspiration, and innovation. Your contributions are invaluable and greatly appreciated. |
50 | 53 |
|
51 |
| -## Release Notes |
| 54 | +For more details and to begin exploring React Labyrinth, visit its official webpage and [LinkedIn page](https://www.linkedin.com/company/react-labyrinth). These resources offer comprehensive insights into the project, its functionality, key features, and how to get started. |
52 | 55 |
|
53 |
| -Users appreciate release notes as you update your extension. |
| 56 | +Furthermore, you can access the project's source code, documentation, and issue tracker on GitHub. Feel free to fork the project, implement changes, and submit pull requests to enhance its development. |
54 | 57 |
|
55 |
| -### 1.0.0 |
| 58 | +If you find React Labyrinth beneficial, consider starring it on GitHub to boost its visibility and attract more contributors and users. Your support is crucial in advancing the project's growth and impact. |
56 | 59 |
|
57 |
| -Initial release of ... |
| 60 | +[Report Bug / Request Feature](https://github.com/oslabs-beta/React-Labyrinth/issues) |
58 | 61 |
|
59 | 62 | ## Meet Our Team
|
60 | 63 |
|
61 |
| -* Ashley Luu |
62 |
| -* Christina Raether |
63 |
| -* Francisco Lopez |
64 |
| -* Johnny Arroyo |
65 |
| -* Louis Kuczykowski |
| 64 | +* Ashley Luu — [Github](https://github.com/ash-t-luu) & [LinkedIn](https://www.linkedin.com/in/ashley-t-luu/) |
| 65 | +* Christina Raether — [Github](https://github.com/ChristinaRaether) & [LinkedIn](https://www.linkedin.com/in/christinaraether/) |
| 66 | +* Francisco Lopez — [Github](https://github.com/Ponch49) & [LinkedIn](https://www.linkedin.com/in/francisco-g-lopez/) |
| 67 | +* Johnny Arroyo — [Github](https://github.com/Johnny-Arroyo) & [LinkedIn](https://www.linkedin.com/in/johnny-arroyo/) |
| 68 | +* Louis Kuczykowski — [Github](https://github.com/Louka3) & [LinkedIn](https://www.linkedin.com/in/louiskuczykowski/) |
66 | 69 |
|
67 | 70 |
|
68 | 71 | ## License
|
69 | 72 |
|
70 |
| -React Labrynth is developed under the [MIT license](https://en.wikipedia.org/wiki/MIT_License) |
| 73 | +React Labyrinth is developed under the [MIT license](https://en.wikipedia.org/wiki/MIT_License) |
0 commit comments