This workshop was created to integrate the program of the SINFO conference (2021 edition).
- UI Design - Open Figma to view the design specs
- Github Repo - Open Github
- Codesandbox - Open CodeSandbox
You should be able to go through the workshop in the browser, which requires no setup. Go to this CodeSandbox project and click Fork (in the top right corner).
If you'd prefer to work through the workshop on your computer, follow the instructions in this section. Please keep in mind the workshop time is very limited and it's not possible to dedicate time to debugging setup issues, which is why we recommend using Codesandbox.
To verify if these are properly set up, run the following commands:
git --version
node --version
npm --version
If all the above requirements are met, run the following commands to clone and start the project:
git clone https://github.com/memsql/sinfo-workshop.git
cd sinfo-workshop
npm start
Note: If you want to commit and push your work as you go, fork first and then clone your fork instead of cloning this repo directly.
These are the files where you have things to complete in each phase of the workshop.
| Part | Start | End |
|---|---|---|
| 1 - Component | Button.js | Button.js |
| 2 - Styling | Button.js Button.css |
Button.js Button.css |
| 3 - Storybook | Button.story.js | Button.story.js |
| 4 - Tests | Button.test.js Input.test.js |
Button.test.js Input.test.js |
| 5 - State | Button.js | Button.js |
In each part, relevant files will have comments to guide you through the exercise.
- 🚩 A good place to start the exercise.
- 🎯 There is work to be done on this section.
- 💡 A syntax or naming hint to point you in the right direction.
- 📙 Link to documentation that might be helpful to this exercise.
In the project directory, you can run the commands below. On Codesandbox, use the yarn versions.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Starts the Storybook.
Open http://localhost:6006 to view it in the browser.
Launches the test runner and saves the results into the file .jest-test-results.json, to be displayed on Storybook.
Launches the test runner and re-runs it when changes are made. Results are saved into .jest-test-results.json as well.
A list of the helpful links left through the repo.