These resources are designed to teach D3 users how to scaffold their projects using React. To see the hosted versions of these demos/exercises, visit this page. Demos are completed demonstrations of certain techniques, while exercises contain instructions for building a particular page (a *_solution.js file is also included). See accompanying slides here.
These resources were developed for a workshop at OpenvisConf 2018. Built by Michael Freeman.
This workshop assumes that you are comfortable building visualizations with D3 and using underlying programming languages (HTML, CSS, and JavaScript). No prior React knowledge is assumed or needed. The only technology you will need on your machine is the ability to run a local server. Any local server is fine, but in case you don't have one installed, here are a few suggestions:
- Use Python's
SimpleHTTPServer(for Python 2) orhttp.server(for Python 3) - The
npmpackagelive-server - Download a local server program such as MAMP (Mac) or [WAMP])( (Windows))
Additionally, you may find it helpful to install the React Developer Tools Chrome Extension for debugging React.
To use these materials, you should fork and clone this repository to your machine (if you don't have a GitHub account, you can simply download them to your machine).
Then, I suggest you start running a local server in the root of the repository to view the set of available exercises and their descriptions ( you can see them online here). Then, you can explore the code for any given repository *-demo, or work through the instructions in any exercise (repos with the suffix -exercise).
If you like these resources, share them far and wide (credit to @mf_viz is appreciated)! Feel free to submit a pull request for any errors, or create an issue for something you believe is incorrect.
For additional resources, see this online course book I co-authored on Client Side Web Development.