Skip to content
A storybook of React examples
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.eslintplugin test custom lint rule Sep 5, 2019
.storybook split sourceCodePanel Sep 5, 2019
runLocally index files Sep 4, 2019
src memory components Sep 14, 2019
.babelrc.js
.eslintignore
.eslintrc
.gitignore index files Sep 4, 2019
.postcssrc css modules support Jun 13, 2019
README.md instruction tweak Jun 12, 2019
jest.setup.js configure enzyme adapter just once Jun 12, 2019
package-lock.json dom manipulation examples Sep 5, 2019
package.json dom manipulation examples Sep 5, 2019
prettier.config.js add title page story Aug 10, 2019

README.md

Welcome

...to (some of) the training material for Edument's React courses;

This repo contains a bunch of example code, sorted in...

  • ./src/apps for "bigger" apps
  • ./src/examples for "smaller" single-component examples

Many examples come in different versions (hooks vs class, etc).

Installation

Simply run npm install to download all the dependencies!

Storybook

The easiest way to see the examples in action is to start the storybook (https://storybook.js.org/) by...

  • executing npm run storybook in 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 ./src.

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.js to render the component you want to play with
  • Execute npm run start in 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 ./src/myCode
  • 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.jsx and 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>
You can’t perform that action at this time.