- React
- Create React .gitignore file
npx react-gitignore
- Create React App
npx create-react-app . --template typescript- Install Luxon library to work with dates
npm install --save luxon npm i --save-dev @types/luxon
- Install React Router
npm i react-router-dom @types/react-router-dom
- Run the project and open http://localhost:3000
npm start
- DotNet Core
- Create web api project
dotnet new webapi- MariaDB
- Add nuget package
dotnet add package Pomelo.EntityFrameworkCore.MySql
dotnet add package Microsoft.EntityFrameworkCore.Design- Migrations
- First Migration
dotnet ef migrations add InitialCreate- Database schema
dotnet ef database update- Password hash
dotnet add package BCrypt.Net-Next --version 4.0.3 - JWT
dotnet add package System.IdentityModel.Tokens.Jwt --version 6.18.0
dotnet add package Microsoft.AspNetCore.Cors --version 2.2.0- Function components with TypeScript
- useState hook with TypeScript
- Event handling with Typescript
- Calculate timespan with DateTime.diff()
- Formatting
- DurationObjectUnits
- Authentication
- Authorization
❌Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .
Solution All routes needs to be wrapped in .
❌Type '{ path: string; component: (props: Props) => Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'
Solution In React Router V6, use <Route path="/" element={<HomePage />} />, instead of <Route path="/" component={HomePage}/>
❌Error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type ''
Solution Use type assertion: element as keyof typeof object.
❌Uncaught TypeError: Cannot assign to read only property 'searchIsSet' of object '#'
Solution Create a copy of the property and assign the new value to it.
❌Parameter 'e' implicitly has an 'any' type.
Solution Check the event type in the event parameter of the tag, then add it to the 'e' being passed in the function.
❌TypeError: Ajv is not a constructor.
Solution Delete node_modules folder, npm i and restart VSCode.
❌Type 'Date' is not assignable to type 'ReactNode'.
Solution Objects, with the exception of React Elements, are not valid as children. Format the object to string type instead.
🔼Typescript🔼
✖Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect...
Solution Property didn't need to be set as state. In case access current state while changing it is needed:
useEffect(() => {
setItems(currentItems => getCart(currentItems));
}, []);
✖Exception has occurred: TypeError: Cannot read properties of undefined (reading 'length')
Solution Initialize array state properly. Array wasn't defined in React
✖React Hook useEffect has a missing dependency: 'props.orders'. Either include it or remove the dependency array.
Solution useEffect accepts multiple dependencies.
✖Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.
Solution Add the onChange event handler.
✖Uncaught Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
Solution The initial input value should be added to the value attribute.
✖ Array.prototype.filter() expects a value to be returned at the end of arrow function
Solution Add an else statement to the end of the function with a return null.
✖ Array.prototype.map() is not a function.
Solution Add a check "?" to map: const beerList = beerListState.data?.map((beer) =>
✖ Warning: Each child in a list should have a unique "key" prop.
Solution Add a key parameter to the component <Todo key={todo} todo={todo} />
✖ Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
Solution Add <>Components</> in the component return (fragment).
✖ 'TodoList' is not defined.
Solution Add import TodoList from './TodoList' to the file.
✖ This component is not running in strict mode.
Solution Change root.render(<Game />); to root.render(<React.StrictMode><Game /></React.StrictMode>);
✖ Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
Solution: Change import ReactDOM from 'react-dom'; to import ReactDOM from 'react-dom/client';
✖ ERROR in Plugin "react" was conflicted between "package.json and BaseConfig.
Solution: Open package.json and hit ctrl + save (temporary workaround). Changed directory structure that was case sensitive (real solution).