Feature: create react vite capacitor example #73
Conversation
matiaspompilio
requested review from
ulises-jeremias and
rpmolina
as code owners
WalkthroughThis pull request introduces a comprehensive React-Vite-Capacitor example project. It includes the setup of various development tools, project structure, and best practices documentation. The project also includes a basic routing setup, a landing page, and a loading component. The configuration files for ESLint, Prettier, and Vite are added, and web vitals reporting is set up. Changes
TipsChat with CodeRabbit Bot (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 4
Files ignored due to filter (5)
- examples/react-vite-capacitor-example/package-lock.json
- examples/react-vite-capacitor-example/package.json
- examples/react-vite-capacitor-example/public/favicon.ico
- examples/react-vite-capacitor-example/tsconfig.json
- examples/react-vite-capacitor-example/tsconfig.node.json
Files selected for processing (33)
- examples/react-vite-capacitor-example/.editorconfig (1 hunks)
- examples/react-vite-capacitor-example/.env.example (1 hunks)
- examples/react-vite-capacitor-example/.eslintignore (1 hunks)
- examples/react-vite-capacitor-example/.eslintrc.js (1 hunks)
- examples/react-vite-capacitor-example/.gitignore (1 hunks)
- examples/react-vite-capacitor-example/.markdownlint.json (1 hunks)
- examples/react-vite-capacitor-example/.node-version (1 hunks)
- examples/react-vite-capacitor-example/.prettierignore (1 hunks)
- examples/react-vite-capacitor-example/.prettierrc.js (1 hunks)
- examples/react-vite-capacitor-example/README.md (1 hunks)
- examples/react-vite-capacitor-example/docs/COMPONENTS_AND_STYLING.md (1 hunks)
- examples/react-vite-capacitor-example/docs/PERFORMANCE.md (1 hunks)
- examples/react-vite-capacitor-example/docs/PROJECT_CONFIGURATION.md (1 hunks)
- examples/react-vite-capacitor-example/docs/PROJECT_STRUCTURE.md (1 hunks)
- examples/react-vite-capacitor-example/docs/README.md (1 hunks)
- examples/react-vite-capacitor-example/docs/STATE_MANAGEMENT.md (1 hunks)
- examples/react-vite-capacitor-example/index.html (1 hunks)
- examples/react-vite-capacitor-example/src/App.tsx (1 hunks)
- examples/react-vite-capacitor-example/src/components/Animation/Cracked.tsx (1 hunks)
- examples/react-vite-capacitor-example/src/components/Animation/cracked.css (1 hunks)
- examples/react-vite-capacitor-example/src/components/Animation/slicer.scss (1 hunks)
- examples/react-vite-capacitor-example/src/components/Loading/Loading.tsx (1 hunks)
- examples/react-vite-capacitor-example/src/components/Loading/index.ts (1 hunks)
- examples/react-vite-capacitor-example/src/components/Loading/loader.scss (1 hunks)
- examples/react-vite-capacitor-example/src/global.d.ts (1 hunks)
- examples/react-vite-capacitor-example/src/main.tsx (1 hunks)
- examples/react-vite-capacitor-example/src/pages/Landing.css (1 hunks)
- examples/react-vite-capacitor-example/src/pages/Landing.tsx (1 hunks)
- examples/react-vite-capacitor-example/src/report-web-vitals.ts (1 hunks)
- examples/react-vite-capacitor-example/src/routes/AppRoutes.tsx (1 hunks)
- examples/react-vite-capacitor-example/src/theme/index.ts (1 hunks)
- examples/react-vite-capacitor-example/src/vite-env.d.ts (1 hunks)
- examples/react-vite-capacitor-example/vite.config.ts (1 hunks)
Files skipped from review due to trivial changes (28)
- examples/react-vite-capacitor-example/.editorconfig
- examples/react-vite-capacitor-example/.env.example
- examples/react-vite-capacitor-example/.eslintignore
- examples/react-vite-capacitor-example/.eslintrc.js
- examples/react-vite-capacitor-example/.gitignore
- examples/react-vite-capacitor-example/.markdownlint.json
- examples/react-vite-capacitor-example/.node-version
- examples/react-vite-capacitor-example/.prettierignore
- examples/react-vite-capacitor-example/.prettierrc.js
- examples/react-vite-capacitor-example/README.md
- examples/react-vite-capacitor-example/docs/COMPONENTS_AND_STYLING.md
- examples/react-vite-capacitor-example/docs/PERFORMANCE.md
- examples/react-vite-capacitor-example/docs/PROJECT_CONFIGURATION.md
- examples/react-vite-capacitor-example/docs/PROJECT_STRUCTURE.md
- examples/react-vite-capacitor-example/docs/README.md
- examples/react-vite-capacitor-example/docs/STATE_MANAGEMENT.md
- examples/react-vite-capacitor-example/index.html
- examples/react-vite-capacitor-example/src/components/Animation/slicer.scss
- examples/react-vite-capacitor-example/src/components/Loading/Loading.tsx
- examples/react-vite-capacitor-example/src/components/Loading/index.ts
- examples/react-vite-capacitor-example/src/components/Loading/loader.scss
- examples/react-vite-capacitor-example/src/global.d.ts
- examples/react-vite-capacitor-example/src/pages/Landing.css
- examples/react-vite-capacitor-example/src/pages/Landing.tsx
- examples/react-vite-capacitor-example/src/report-web-vitals.ts
- examples/react-vite-capacitor-example/src/theme/index.ts
- examples/react-vite-capacitor-example/src/vite-env.d.ts
- examples/react-vite-capacitor-example/vite.config.ts
Additional comments (Suppressed): 6
examples/react-vite-capacitor-example/src/App.tsx (1)
- 1-17: The new hunk looks good overall. It properly sets up a React application with routing and lazy loading. However, please ensure that the environment variable
VITE_APP_BASE_URLis correctly set in your.envfile and that it matches the base URL of your application. This is important for theBrowserRouterto function correctly.examples/react-vite-capacitor-example/src/routes/AppRoutes.tsx (1)
- 1-12: The new hunk introduces a
Routescomponent fromreact-router-domthat wraps aRoutecomponent. TheRoutecomponent has a path prop set to "/" and its element prop set to theLandingcomponent. This means that when the application's URL path is "/", theLandingcomponent will be rendered. This is a common pattern for defining routes in a React application usingreact-router-dom. The code is clear, concise, and follows best practices for routing in a React application.examples/react-vite-capacitor-example/src/main.tsx (1)
- 1-17: The use of
createRootfromreact-dom/clientis a part of the new concurrent mode in React. Ensure that the rest of your application is compatible with concurrent mode, as it can lead to unexpected behavior if not used correctly. Also, be aware that as of my knowledge cutoff in September 2021, concurrent mode is still experimental and its APIs are subject to change.examples/react-vite-capacitor-example/src/components/Animation/cracked.css (3)
18-18: The
animation-directionproperty is set toalternate, which means the animation will reverse direction each cycle, going from 0% to 100%, then 100% to 0%, and so on. If this is the intended behavior, then it's fine. However, if you want the animation to always start from 0% after reaching 100%, you should remove this property.39-39: The
clip-pathproperty is used to create complex shapes. However, it's not fully supported in all browsers (especially IE). If cross-browser compatibility is a concern, consider using an alternative method to achieve the same effect.40-40: The
animationshorthand property is used here, which includes the animation name, duration, timing function, and delay. Theforwardsvalue for theanimation-fill-modeproperty means that the animation will apply the property values for the time the animation ends. If this is the intended behavior, then it's fine. However, if you want the animation to reset to its initial state after it ends, you should remove this value.
| const Cracked: FC<CrackedProps> = ({ children }) => ( | ||
| <div className="bg-text"> | ||
| <div className="slicer-gradient"> | ||
| {new Array(40).fill(1).map((_, i) => ( | ||
| <div key={`slice-${i + 1}`} className="text"> | ||
| {children} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
The Cracked component is creating 40 identical divs with the same content. This could potentially lead to performance issues if the content passed as children is complex or large. Consider if there's a more efficient way to achieve the desired effect, or if the number of divs can be reduced.
- {new Array(40).fill(1).map((_, i) => (
+ {new Array(10).fill(1).map((_, i) => (| import './slicer.scss'; | ||
| import './cracked.css'; |
There was a problem hiding this comment.
Both .scss and .css files are being imported. This could lead to confusion and inconsistency in the codebase. Consider standardizing the use of one preprocessor or the other for maintainability.
| // If you want to start measuring performance in your app, pass a function | ||
| // to log results (for example: reportWebVitals(console.log)) | ||
| // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals | ||
| reportWebVitals(console.log); |
There was a problem hiding this comment.
You are logging web vitals to the console. This is fine for development, but in a production environment, you might want to send these metrics to an analytics endpoint. Make sure to conditionally log these metrics based on the environment.
- reportWebVitals(console.log);
+ if (process.env.NODE_ENV === 'development') {
+ reportWebVitals(console.log);
+ } else {
+ // replace `analyticsEndpointFunction` with your actual function to report metrics
+ reportWebVitals(analyticsEndpointFunction);
+ }| .cracked { | ||
| font-family: Coolvetica, Arial; | ||
| font-size: 16.74rem; | ||
| line-height: 1.15 !important; |
There was a problem hiding this comment.
The use of !important is generally discouraged in CSS as it breaks the natural cascading in your stylesheets. It's better to use more specific selectors or restructure your CSS to avoid the need for !important. However, if it's absolutely necessary in this case, it's acceptable.
What's this PR do?
Summary of changes in this PR or what it accomplishes.
The idea of this example is to show a React Capacitor application setup.
This PR is made in order to set the initial project structure with a functional React application
@ulises-jeremias @rpmolina
Summary by CodeRabbit
Crackedcomponent with a slicer gradient effect and aLoadingcomponent with a spinning loader effect.