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.