https://github.com/fredsiika/fredsiika.github.io
React for Non-Coders: Learn to design and code a React App
https://github.com/fredsiika/fredsiika.github.io
gatsby javascript nodejs react reactjs
Last synced: 7 months ago
JSON representation
React for Non-Coders: Learn to design and code a React App
- Host: GitHub
- URL: https://github.com/fredsiika/fredsiika.github.io
- Owner: fredsiika
- Created: 2017-11-21T16:17:03.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-30T18:29:23.000Z (almost 7 years ago)
- Last Synced: 2025-01-26T19:43:18.149Z (9 months ago)
- Topics: gatsby, javascript, nodejs, react, reactjs
- Homepage: https://fredsiika.github.io/
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fredsiika.github.io
Learn to design and code a Website using React with this sample portfolio page.
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.
Build and animate your site from scratch. Create highly customizable components for your design system.
## About This Site
This is my implementation of building a React app, starting with styling my layout using [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/), animating the user interface (UI) which will be deployed on [Netlify](https://www.netlify.com).
This site will also work with dynamic data and utilize [Stripe](https://stripe.com) to charge customers.
**Goal:**
This project is a work in progress and far from perfect. Hopefully techniques I used here can help improve your JavaScript programs, build beautiful portfolios and pages for you clients.
## My Development Stack
We’ll pick the latest and greatest tools to create the site. We’ll use [Gatsby](https://www.gatsbyjs.org/) to scaffold our React project.
This 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**, a flexible way to implement your layout. The aim is to create fully customizable React components for buttons, the header, footer, nav-bar and more.
Finally, we’ll put all of our content in a content management system (CMS) called [Contentful](https://www.contentful.com/), create a payment system using [Stripe Checkout](https://stripe.com/checkout) and deploy to [Netlify](https://www.netlify.com/) by just dragging and dropping our site folder.
## 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**.
