Notes

• css provided (global styles, styled components)
• folders/files already setup
• all imports included (warnings)
• index.js for easier imports

Styled Components

Styled-Components - Main Docs

import styled from "styled-components";

const ReactComponent = () => {
 // logic here
 return <Wrapper>
 {some content}
 </Wrapper>
}


const Wrapper = styled.htmlElement`
write your styles here
`
export default ReactComponent

React Icons

React Icons - Main Docs

import { FiUsers, FiUserPlus } from 'react-icons/fi';
<FiUsers className='nameOfTheClass'> </FiUsers>;

React Router Dom

version used - "react-router-dom": "^5.2.0",

• react-router-dom - Main Docs

• renders the first child that matches

• A always matches

product API

• products_url = https://course-api.com/react-store-products
• single_product_url = https://course-api.com/react-store-single-product?id=

Auth0

• Auth0 - Main Docs

• Create Application

• Choose : Single Page Web Applications

• Choose : React

• Go to Settings Tab

• Copy/Paste Domain, ClientID - can be public (or use .env)

• Add Domain - for now http://localhost:3000 (DON'T COPY PASTE FROM URL BAR)

  • Allowed Callback URLs
  • Allowed Logout URLs
  • Allowed Web Origins
  • SAVE CHANGES!!!!!!!!!!!!!!!

• Connections email,social

• React SDK Docs

• REACT SDK API Docs

Payment section

• use stripe checkout
• [stripe docs] (https://stripe.com/docs/payments/checkout)

Email section

• use formspree for receiving email.
• [formspree docs] (https://formspree.io/formbutton/docs)

Deployment

Netlify

Additional Info

Redirects with react-router-dom

In order for routing to work on netlify, redirects was added to the public folder

• _redirects file in public

/*    /index.html   200

Redirects Blog Post

Warnings and create-react-app

package.json

"build": "CI= react-scripts build",

create-react-app Warning Fix Blog Post

.env vars

• REACT_APP_AUTH_DOMAIN=
• REACT_APP_CLIENT_ID=
• REACT_APP_STRIPE_PUBLIC_KEY=
• REACT_APP_STRIPE_SECRET_KEY=

Extra Setup

npm install [email protected] [email protected] @stripe/[email protected] @stripe/[email protected] [email protected]

npm install netlify-cli -D