No description
| .idea | ||
| backend | ||
| src | ||
| src-examples/zod | ||
| src-solution-async-calls | ||
| src-solution-data-validation | ||
| src-solution-forms | ||
| src-solution-hooks | ||
| src-solution-react | ||
| src-solution-react-2 | ||
| src-solution-react-layout | ||
| src-solution-react-lifecycle | ||
| src-solution-react-lifecycle-hooks | ||
| src-solution-redux-1 | ||
| src-solution-redux-2 | ||
| src-solution-redux-big | ||
| src-solution-redux-hooks | ||
| src-solution-redux-simple | ||
| src-solution-redux-tools | ||
| src-solution-routing | ||
| src-solution-tanstack-query | ||
| src-solution-useReducer | ||
| test | ||
| test-exercises-zod | ||
| test-solution-async-calls | ||
| test-solution-async-calls-tanstack-query | ||
| test-solution-react | ||
| test-solution-react-integration | ||
| test-solution-redux | ||
| test-solution-redux-hooks | ||
| test-typescript | ||
| types | ||
| .eslintrc.js | ||
| .gitignore | ||
| babel.config.js | ||
| index.html | ||
| jest.config.js | ||
| jest.setup.ts | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.test.json | ||
| webpack.config.js | ||
| webpack.prod.config.js | ||
| WICHTIG | ||
RRTSCode
Code for a React-Redux training in TypeScript.
Prerequisites
To successfully use this codebase, please install:
- Node.js version 22 or greater
- It is recommended to use a node version manager if you plan to use node.js/npm more often:
- For MacOS, Linux, Unix and Windows with WSL https://github.com/nvm-sh/nvm
- For Windows without WSL: https://github.com/coreybutler/nvm-windows (not tested by us)
- Install the LTS Node.js version using
nvm installandnvm use(check nvm documentation) - (Sidenote: you can create a .nvmrc to define separate versions for each project)
- A suitable editor or IDE, e.g.
- Webstorm -- there is a 30-day test version
- Visual Studio Code -- it is free
- Chrome or Firefox
First Steps
- Check out this repository from GitHub
- cd into that directory
- Install required modules:
npm install(in case of errors please usenpm install --legacy-peer-deps) - Launch the development server:
npm start- Open http://localhost:3000 in the browser. You should see "Please replace this!".
- Run the tests:
npm test(either in the console or from your IDE)- There should be 1 passing test.
Trying out the solutions
Webpack accesses the files in the folder src by default. This way, you can implement and experiment with your own solutions step by step during the training.
To use the included examples, open the file webpack.config.js and change the path in the block entry such that it points to one of the other index.js files. Example:
entry: [
"./src-solution-redux-3/index"
],
The examples are fully functional and build on each other (in alphabetical order, except for "async" and "forms"). Please be aware that the final example requires a server to handle the emitted AJAX requests. A basic server is provided in the directory backend.