PD Workshops

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start
npm test
npm run build
npm run eject

Useful links

Before you start with React

• JavaScript to know for React
• What's new JavaScript (ES2020)
• NPX
• Create React App

Chrome extensions

• JSON View Chrome Extension
• React Developer Tools

Documentation

• Fetch API
• JSX
• Rendering elements
• Components and props
• State and lifecycle
  • Lifecycle diagram
  • Component lifecycle method's
• Handling events
  • SyntheticEvent
• Conditional rendering
• List and keys
• Forms
• Composition vs inheritance
• Context
• Error Boundaries
• Forwarding refs
• Fragments
• Higher order Components
• Profiler
• Strict Mode
• Uncontrolled Components

Free APIs and tools

• Random User API
• RequestBin.com

Recommended services

• Firebase
• Contentful

Recommended libraries

• date-fns
• React Router
• History
• Firebase JS SDK
• Firebase JS SDK for realtime database
• Axios
• React Hook Form
  • Form builder
• Material UI

Styling

• BEM
• className
• inline styling
• JSS
  • react-jss
  • Adapters:
    • Styled-JSS - styled-components like API
    • Glamor-JSS - glamor flavored CSS with JSS under the hood
    • Aphrodite-JSS - aphrodite like API
• styled-components

Testing

• Jest
• jsdom
• Testing library
  • queries
  • Testing playground
  • Testing playground Chrome Extension
• React testing library
• @testing-library/jest-dom jest-dom provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read, and to maintain.
• @testing-library/user-event user-event tries to simulate the real events that would happen in the browser as the user interacts with it. For example, userEvent.click(checkbox) would change the state of the checkbox.
• React Hooks testing library
• Enzyme
• Mock Service Worker
• Cypress

Create React App configuration

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify