...to (some of) the training material for Edument's React courses;
This repo contains a bunch of example code, sorted in...
./src/appsfor "bigger" apps
./src/examplesfor "smaller" single-component examples
Many examples come in different versions (hooks vs class, etc).
npm install to download all the dependencies!
The easiest way to see the examples in action is to start the storybook (https://storybook.js.org/) by...
npm run storybookin the terminal
- switching to the automatically opened browser window
There you can navigate between the different examples using the story overview to the left. The structure there roughly corresponds to the file locations within
For many of the components you can...
- tweak the input props in the bottom Knobs tab
- see further information in the Notes tab
Storybook has built-in live reload, so if you tweak the source code for a component you will immediately see the changes in the browser.
Don't be afraid to experiment - you can simply
git checkout . to restore the code to the original state!
Running apps in isolation
Sometimes you might want to run an example in isolation instead of through the Storybook (maybe to inspect it using the React Dev Tools). For this we have a simple local setup using ParcelJS:
- Tweak the code in
./runLocally/index.jsto render the component you want to play with
npm run startin the terminal
- Go to http://localhost:1234 in the browser (will open automatically)
Parcel also sets up live reloading, so tweaking the code will immediately update the browser.
Creating experiments of your own
While toying with the prebaked examples can be useful, eventually you will want to write code of your own. We suggest that you...
- create a folder
- create a subfolder there for each separate experiment
After you have created a component you can either
- create a file where the name ends with
.stories.jsxand add a story (see the story files for the existing examples) to have it turn up in the Storybook
- run it by itself using the ParcelJS setup described earlier
Running the test suite
Almost all of the examples - both components and pure logic functions - have corresponding unit tests using Jest. To run the tests, simply execute
npm run test in the terminal.
If you want to execute the tests from a single file (perhaps you are using TDD when writing your own component!), one way is to...
- right-click on the test file in the Visual Studio Code file overview and choose
Copy relative path
- go to the terminal and write
npx jest <pasted path here>