React for Designers
React is the most popular javascript framework. It’s component-based, similar to how you use Components in Figma in order to reuse the elements in powerful ways. This in turn allows for better collaboration between teammates. With this course, you'll learn how to build and animate your site from scratch. Create highly customizable components for your design system. Full video tutorials:
https://designcode.io/react
Course Downloads
- Intro to React
- Basic Styling in CSS
- Adaptive Layouts with CSS Grid
- Interactions and Animations
- SVG Animation
- Components and Props
- States and Events
- Styled Components
- Static Data with JSON
- GraphQL with Contentful
- Publish to Netlify
- Payments with Stripe
Install Gatsby and Node
Make sure that you have the Gatsby installed and Node:
npm install --global gatsby-cli
Install Libraries
npm install
Known Issues
Permission Issue Installing Gatsby
If you have issues installing Gatsby, please use sudo in front.
sudo npm install --global gatsby-cli
Image issue in In Basic Styling in CSS
You may get an error when you call the local image. The easiest solution is to put the image online using CloudApp.
background: url('https://cl.ly/3k1F152x261C/download/wallpaper3.jpg');
Or, you can try installing this library.
npm install --save url-loader
Or, you can also put the images inside /static/images or /public/images instead of /src/images. Link the images like this:
background: url('../../static/images/wallpaper3.jpg');
GraphQL giving an error
Make sure to restart your local environment by doing Control + C in the Terminal, and then gatsby develop.