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
- 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
Make sure that you have the Gatsby installed and Node:
npm install --global gatsby-cli
npm install
If you have issues installing Gatsby, please use sudo in front.
sudo npm install --global gatsby-cli
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');
Make sure to restart your local environment by doing Control + C in the Terminal, and then gatsby develop
.