React - Build your React App fast using React Design System

Name: React - Build your React App fast using React Design System
Rating: 4.3 (167 reviews)

Create a beautiful React website fast as never before using Creative Tim Argon Design System for react completely FREE

Created byIcaro Lavrador

Last updated 2/2021

English

English [Auto],

What you'll learn

How to create a portfolio page in React
How to use Creative Tim Design System for React
How to break down a website into distinct components
What is and how to use a Design System

Course content

8 sections • 23 lectures • 1h 51m total length

Win 1 in 10 Argon Design Systems PRO from Creative-Tim0:20
Win 1 of 10 Creative Tim Argon Design Systems values at $109
Creating a Creative Tim Account and downloading our Design System2:37
Create a Creative Tim account and download the argon design system for React to start building your portfolio, then explore the dashboard and available React templates.
Starting Creative Tim sample site3:19
Launch the Creative Tim sample site in a React design system, update react-scripts, and run the local server to preview landing, profile, login, and register pages.

Creating our Portfolio based on Creative Tim Design System5:46
Set up a portfolio using the Creative Tim design system in a React app, organizing project folders, copying templates, editing the index file, and preparing npm install for development.
Using the Creative Tim Demo NavBar3:14
Explore integrating a free demo navigation bar from Creative Tim, import the nav bar into your React app, and set up a hero component for the next class.
Add a Hero Banner on our portfolio3:17
Copy the hero component from the Aragón design system into a hero folder, import it in the views index, and render it to add a hero banner for the portfolio.
Adding a simple footer2:12
discover how to add a simple footer in a React app using the design system, compare simple and cards footers, and adapt footers to different screen sizes.

Creating our own components based on Creative Tim Design Systems11:27
Cleaning up the NavBar1:42
Refactoring our social media icons with tool tip into components10:29
Refactor social media icons into a reusable item with tooltip component, passing link, icon, title, and description for a concise nav bar using the React design system.
Changing the Hero component6:32
Modify the hero component by replacing the icon with a name header, adjust typography for seo, and update colors and links; create a reusable polygon component in components.
Changing the Footer10:49
Refactor the footer into reusable social media button components, creating a dedicated social media button file, passing color, description, and link props, and organizing with a components folder for reuse.
Finish the Footer with our copyright1:50
Adding more content to our page5:04
Utilize the design system to add three cards under the hero on the landing page, creating a new functional component and integrating a button while adjusting margins.
Creating our cards using Creative Tim Design System and examples10:36
Fixing all the cards4:34
Learn to pick and copy icons from a free library, apply them to React cards, fix duplicate code, and finalize the card layout for a design system demo.

Add a link to the profile page2:02
Add a profile page link to the navbar by creating a new item with path /profile and label profile; save to view the update.
A quick look into what Argon Design System PRO has to offer5:10
Explore Argon Design System Pro for React, focusing on exclusive components such as testimonials, navigation bars, and hero pages, and learn to quickly set up and customize a testimonials section.
Creating 3 new sections in our page including a PRO section6:34
Create three new sections in the page using React components for pictures, customers, and a pro component, and link the front end, back end, and design.

Requirements

Basic knowledge about React
Basic knowledge about HTML
Basic knowledge about CSS

Description

Have you ever try to create a website from scratch, just to, in the end, find out that many inconsistencies in your design? Like 3 or 4 different OK buttons on your app, different shades of color in another, and the list goes on.

If you like me, you won't even notice until someone calls out your attention, and you will keep asking yourself, "How did I miss that?". And I can tell you why because you didn't use a Design System (or at least not the right one).

Design Systems can make your site look consistent and a lot more professional and faster to code.

Imagine having some of the best designers in the world to create your components for you, and have them choose the best colors to use and why not some incredible fonts and icons. Well... imagine no more.

Creative Tim offers all that and more. Using Creative Tim, UI Kit, and Themes, is like having access to the best designs on the cheap, actually sometimes, like on this course completely FREE!

Now we will learn to take full advantage of the Argon Design System, not only to create BEAUTIFUL sites but also to do it FAST.

Come with me on this amazing adventure to create a fully functional Portfolio page that will impress you in just a few hours.

For a limited time, not only you can get this course FREE but also get FREE access to the Argon Design Systems from Creative Tim

So don't wait to ENROLL NOW.

Who this course is for:

People that want to make development faster and easier
People that like to build beautiful websites

React - Build your React App fast using React Design System

What you'll learn

Explore related topics

Course content

Creative Tim3 lectures • 6min

Creating out Portfolio using Argon Design System from Creative Tim4 lectures • 14min

Creating our components based on the Argon Design System from Creative Tim9 lectures • 1hr 3min

Creating new Views using Creative Tim Argon Design System1 lecture • 3min

Adding links between the views3 lectures • 14min

Using react Hook useRef to scroll the link to a element on the page1 lecture • 9min

Production deployment to GitHub and Heroku1 lecture • 1min

Bonus Section - Including Amazing Deals1 lecture • 1min

Requirements

Description

Who this course is for: