React for Designers

Learn how to build a modern site using React and the most efficient libraries to get your site/product online. Get familiar with Grid CSS, animations, interactions, dynamic data with Contentful and deploying your site with Netlify.

Learn to design and code a Website using React

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.


Downloads

To follow this course, you can download the source file, which will help you compare your progress.

Project

Feel free to use your own designs and apply your own styling. You can also use my Figma design if you wish to follow exactly what I have. You can access all the React files.

About this Course

In this course, you’ll learn React as a designer, starting with styling your layout using CSS Grid, animating your user interface and creating a full-blown React site that can be deployed on Netlify in seconds. You’ll also work with dynamic data and charge customers with Stripe. The techniques taught here can help you build a beautiful page selling your product, or create a personal portfolio with a dynamic blog. Most importantly, you’ll gain valuable insights into how developers work, and how you can build too, making your job even more essential to your team.
This is a course for visual learners. It focuses on learning by building a real product, which is my personal approach to learning new things quickly and efficiently. I highly recommend applying your own logos, images, colors and content to make your site completely unique. At any time during your progress, I suggest clicking on the resources provided to learn more in-depth about the frameworks that we use.
react-product-hunt-3

Why designers should learn React

Using React components is a perfect way to translate your Libraries of UI elements to code and affect change in the final product. For example, instead of creating a button that exists in a single place, and that needs to be re-built in code by another person, you create a React component that is perfectly consistent with your Sketch Symbol or Figma Component, and that your developer can use without needing to do the visual implementation.
This can extend to Headers, Footers, Modals, Cells, etc. All of these elements can be referenced in an organic, code-connected style guide that everyone can contribute to. This system is commonly known as a Design System. It’s essentially a style guide on steroids.
Learning React allows you not only to collaborate better with your co-workers, but also build your own site in a way that is powerful, maintainable and flexible. You’ll never get stuck again by the limitations of your design tool. Instead, you’ll invent new ways that a product can be designed.
11.01.01_React_for_Designers-React

The Workflow

We’ll pick the latest and greatest tools to create the site. We’ll use Gatsby as a starting template for React, which allows us to have a number of features at our fingertips, like Router for multiple pages, GraphQL for database, Helmet for SEO. Then, we’ll work with CSS Grid, the most flexible way to implement your layout. We’ll learn to create fully customizable React components for buttons, the header, footer, navigation bar and more. Finally, we’ll put all of our content in a content management system (CMS) called Contentful, create a payment system using Stripe Checkout and deploy to Netlify by just dragging and dropping our site folder.
workflow

Terminal

To install pretty much any library or system such as Git or React, you’ll need to use the Terminal. It’s essentially a place you can write commands to run programs for you, such as installing new frameworks or updating your libraries. To open the Terminal, run Spotlight (Command + Space) and type Terminal.
Terminal

Installing Node

Before installing React, you’ll need Homebrew, which makes it easy to install libraries for your Mac. Please note that this installation process requires a Mac. If you’re on a PC, you’ll just need to install Node another way.


To install Homebrew, go to brew.sh and copy and paste this command from their site in Terminal.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Installing Node.
brew install node

homebrew

Installing Gatsby

We’re going to use Gatsby for this course. It comes with a fantastic template that has essential features such as multiple pages, database, caching and SEO from the start.

https://www.gatsbyjs.org/docs/
npm install --global gatsby-cli
If you experience a permission error while installing gatsby, run
sudo npm install --global gatsby-cli
This should fix it.


Create your first React App using Gatsby


Create your new site in your Documents folder.
cd Documents
gatsby new my-app https://github.com/mengto/gatsby-starter-default/
Screen_20Shot_202018-07-15_20at_203.58.19_20PM

Your app folder


cd my-app
gatsby develop


Previewing your app


Wait a few seconds for your development environment to run. Open your main browser and type this in your address bar.
http://localhost:8000
Voila! This is your site and it’s fully functional. Now, let’s start editing your code.
Screen_20Shot_202018-07-15_20at_203.57.02_20PM

Installing Visual Studio Code

You’ll need a code editor to start working on the site. Go to https://code.visualstudio.com
11.01.04_React_for_Designers-VS_Code

Open Project

After you install and open VSCode, press Command + O to open your app project. Go to your Documents folder and select my-app. Click Open.
11.01.03_React_for_Designers-Open_Project

Gatsby Template

Your files in VSCode will look like this. Next to it is your site, started with a default template provided by Gatsby. Gatsby also provides dozens of other templates, such as Blog or the community-provided Material or Bootstrap. But for simplicity’s sake, we’ll stick to default, since templates tend to be more complex and may require knowledge of their respective platform.
Screen_20Shot_202018-07-15_20at_203.56.16_20PM

Site Folder

At the beginning of this course, you won’t touch anything else than what’s in the src folder. If you open it, you’ll find 3 folders.

  • components: this is where we’ll create those re-usable elements such as buttons, the header and footer.

  • layouts: this is mainly for global styles and scripts.

  • pages: when the content is vastly different, you’ll want to create a new page. For example, you’ll need a page for index (home), about, contact.
Screen_20Shot_202018-07-15_20at_204.20.24_20PM

Multiple Pages

Gatsby comes with a router that automatically maps URLs to pages with the same name. For example, clicking on Go to page 2 goes to the URL /page-2, which automatically loads page-2.js. This auto-routing technique drastically simplifies the process of creating new pages and making sure that they’re perfectly linked using beautiful URLs.
11.01.05_React_for_Designers-Multiple_Pages

Site Title

You can change the site title by going to gatsby-config.js file and edit the title property.

// gatsby-config.js module.exports = {
siteMetadata: {
title: 'Design+Code 3',

},

plugins: ['gatsby-plugin-react-helmet'],
}


VSCode theme

If you’d like to change your theme, click on Extensions tab and type Material. Look for Material Theme and click Install, wait a sec and then, click on Reload. Do Command + Shift + P and type theme and select Preferences: Color Theme. Finally, select Material Theme Palenight.
Screen_20Shot_202018-07-15_20at_204.22.42_20PM

Integrated Terminal (optional)

This allows you to do your commands without having to leave VSCode. To enable the Integrated Terminal, press Control + backslash. This step is optional because it's a convenience rather than a requirement. Terminal works perfectly fine and it is already running your brand new site, so let's leave it alone.
11.01.02_React_for_Designers-Integrated_Terminal

VSCode Shortcuts

  • Command + O: open a project.
  • Command + B: toggle the side navigator. Good when you lack real estate.
  • Command + Shift + P: quick open and command. It’s like Runner for Sketch. Extremely useful.
  • Option + Z: toggle word wrap. Also good when you have limited space and the code lines are too long to be visible.
  • Control + backslash: toggle the integrated terminal. Note that you have multiple terminals at once. Typically, you'll have one running the environment, and another for commands, such as installing new libraries.
  • Command + Click: goes to component or definition.
  • Option click: edit multiple places.
  • Command + D: edit multiple selected text.

Editing the Code

Let’s start editing the code and give this new thing a test run. Open pages/index.js. Change the h1 and p content to the following.


<h1>Learn to <br />design and code React apps</h1>
<p>Complete courses about the best tools and design systems. Prototype and build apps with React and Swift.</p>


As soon as you press Command + S, it’ll save your file and it’ll automatically update your site! Nifty, right?
Of course, feel free to put your own site content. I highly encourage trying to implement your own design and share it on Twitter by tagging @MengTo! I love retweeting beautiful projects made from the techniques taught in my courses!


Real-time Errors

One of the important things to learn in programming is to debug. Let’s delete the following line

<p>Now go build something great.</p>
<p> // gives an error because the tag isn't closed.
Screen_20Shot_202018-07-16_20at_2011.33.00_20AM
When you code in React and make errors, it’ll give you the errors in your browser. A common error that a lot of designers make is that they forget to close their tags. For example, if you open a bracket, always make sure to close it later. Same for HTML tags. Errors can happen during this course, so make sure to read the line number carefully. Google if you can’t figure it out, or send us a ticket.


Fix the error by deleting the remaining p tag.


Committing to Git (optional)

It’s good practice to commit your files to Git, so that you have version control of every change that you make. If you’re not familiar with Git, I suggest skipping this step for now as it won’t really affect your project.
Create a new Repository on GitHub and paste these commands in the integrated terminal (Control + backslash). These commands are provided to you by GitHub. Replace YOURGITADRESS with your own.

git init
git add README.md
git commit -m "first commit"
git remote add origin YOURGITADRESS
git push -u origin master


Then, do Command + Shift + P, type commit all and press enter. Finally, type the text for your first commit, such as initial commit.
Do Command + Shift + P again and type git push, then enter. At this point, this version of your site will exist on Github and you may return to it any time in the future.
Screen_20Shot_202018-07-16_20at_2011.43.23_20AM

Common HTML Tags

These are the most common tags you’ll use for setting up the skeleton for your site. Think of them as layers in Sketch or Figma.

  • img for images
  • h1h2h3 for titles
  • p for paragraph
  • a for links
  • button
  • div for everything else.

Conclusion

Up until now, we’ve managed to get our development environment ready and functional. We can start designing our layout and slowly learn React to build a full-fledged site.