My React App screenshot

My React App

Author Avatar Theme by Mengto
Updated: 21 Aug 2018
175 Stars

Template for the React for Designers course

Categories

Overview:

React for Designers is a popular JavaScript framework that is component-based, allowing for better collaboration and reuse of elements. This course teaches you how to build and animate websites from scratch, create customizable components, and use React with other technologies like CSS, SVG animation, and GraphQL.

Features:

  • Component-based framework for building websites
  • Full video tutorials covering various topics
  • Learn how to create reusable components for design systems
  • Explore styling options with CSS and CSS Grid
  • Add interactions and animations to your site with SVG animation
  • Manage states and events with React components
  • Use styled components for easy styling
  • Integrate static data with JSON and GraphQL
  • Publish your site to Netlify and accept payments with Stripe

Installation:

To install React for Designers, follow these steps:

  1. Ensure that Gatsby and Node.js are installed on your machine:
npm install -g gatsby-cli
  1. Install the necessary libraries for the course:
npm install
  1. Resolve any known issues during installation:
  • Permission Issue Installing Gatsby: If you encounter issues installing Gatsby, use the following command with sudo:
sudo npm install -g gatsby-cli
  • Image issue in Basic Styling in CSS: If you face an error with local images, consider putting the images online using CloudApp or installing the necessary library. Alternatively, you can place the images inside the /static/images or /public/images directories instead of /src/images and link them accordingly.
  • GraphQL giving an error: Restart your local environment by pressing Control + C in the Terminal, and then run gatsby develop again.

Summary:

React for Designers is a comprehensive course that teaches you how to effectively use React, the popular JavaScript framework, for designing and building websites. By learning the key features and following the installation guide, you can enhance your design workflow, create reusable components, and add animations and interactions to your sites.