React
I create my React-project in Visual Studio 2022 (at least 17.8.0):
- React and ASP.NET Core
A full-stack application with a frontend React project and a backend ASP.NET Core project
TypeScript Web
Then I can add BFF to the backend.
Laboration
To laborate I will use Visual Studio Code and the “create-react-app” command.
Create a directory/folder for your app. Drag it in to Visual Studio Code. This will open the directory/folder in Visual Studio Code. Now, open the terminal in Visual Studio Code, View -> Terminal and run any of the commands below.
React app with TypeScript:
npx create-react-app ./ --template typescript
React app with JavaScript:
npx create-react-app ./
then
npm start
Common React stuff
- The Ultimate React.js Guide
- React JS Full Course 2023 | Build an App and Master React in 1 Hour
- Why it is Recommended to use Functional Components over Class Components
- TypeScript with React Functional Components
- Bootstrap in Create React App Typescript
- Styling React Using Sass
- How to Structure Your TypeScript React Application Using CRA
Visual Studio React stuff
- Visual Studio tutorials | JavaScript and TypeScript
- Quickstart: Use Docker with a React Single-page App in Visual Studio
- Modify the Dockerfile (Linux containers)
Examples
Google: react examples
React Router
- https://reactrouter.com
- https://reactrouter.com/en/main/start/tutorial
- https://github.com/remix-run/react-router
- https://www.npmjs.com/package/react-router
- https://www.npmjs.com/package/react-router-dom
- https://www.npmjs.com/package/react-router-native
React Context
- https://react.dev/learn/passing-data-deeply-with-context
- https://react.dev/reference/react/createContext
- https://react.dev/reference/react/useContext
- https://www.w3schools.com/react/react_usecontext.asp
Google: react context authentication
API calls
Vite
- Go to your project directory. Drag the directory in to Visual Studio Code.
- Open the terminal: View -> Terminal
- Run command:
npm create vite@latest name-of-your-project -- --template react-ts