React with CRA (create-react-app)

2019/10/26 (內容調整)
2020/10/15 (增加連結)

簡介

Create React App

• First React Program with CRA (吳濟聰老師的教材與範例)

• React 2020 — P1: Intro and Installation

• Absolute imports with Create React App (CRA 3.0)

• Development tips: create-react-app

  • Use yarn

  • Directory Structure

  • State Management: Redux

    • Redux isn’t really necessary for very small applications, but for medium to large codebases, it’s suddenly a part of React.

  • Material-UI: Make your app like it’s from Google

  • Firebase by Google

  • Figma: Design Tool

  • Among the coolest tips: Use Netlify

• Create React App is Way Too Bloated

• No more React boilerplates! Long live to React App Blueprint

  • Setup Node environment

  • React App in one single line

  • Install custom CSS styles libraries

  • Reset and Normalize CSS

  • What About Global Styles?

  • Setup React Routes

  • Wire Redux state up

  • House is ready for the Home inspector

  • Consistency is excellent, but what about seeming… pretty

  • No more relative path mess!

• 10 Fun Facts About Create React App

  • Fact #1: You Can Create a Fully-Fledged Project With a Single Command

  • Fact #2: React Projects Can be Started With a Specific Template

  • Fact #3: One Dependency Is the First Philosophy of Create React App, and This Build Dependency Is Not in the devDependencies Section

  • Fact #4: No Configuration Required Is the Second Philosophy of Create React App — But It’s Not Zero Configuration

  • Fact #5: No Lock-In Is the Third Philosophy of Create React App — And You Don’t Have to Eject a Project to Customize a Setup

  • Fact #6: “React-App-Rewired” Adds More Power by Configuring “Config-overrides.js”

  • Fact #7: Jest can use absolute paths.

  • Fact #8: Create React App Can Handle CORS (Cross Origin Resource Sharing) Errors

  • Fact #9: Create React App Can Configure Which Browsers to Support

  • Fact #10: Generated Bundles Can be Analyzed.

• Why I Migrated From Next.js to Create React App

• New Features in Create React App 3.3

  • Custom Templates

  • Optional Chaining and Nullish Coalescing Operators (ES2020)

  • Numeric Separators (ES2020)

  • No-unexpected-multiline

  • Upgrading to 3.3

• What’s New In Create React App 4

Customize

• Adding decorator support to Create React App projects using react-app-rewired

• Customizing create-react-app: How to Make Your Own Template

• Customizing Create React App — Done Right

• Customize Create React App without Ejecting

From scratch

• Setting up a React project from scratch

• React: Bake from Scratch or Box

  • React: Bake from Scratch or Box (JavaScript Version): Part 1

    • from scratch vs. create-react-app (CRA)

  • React: Bake from Scratch or Box (JavaScript Version): Part 2

    • with Polyfills

  • React: Bake from Scratch or Box (JavaScript Version): Part 3

    • Linting

  • React: Bake from Scratch or Box (JavaScript Version): Part 4

    • Languages features & Media

  • React: Bake from Scratch or Box (JavaScript Version): Part 5

    • Styling

  • React: Bake from Scratch or Box (JavaScript Version): Part 6

    • Optimization

  • React: Bake from Scratch or Box (JavaScript Version): Part 7

    • Code splitting

  • React: Bake from Scratch or Box (JavaScript Version): Smackdown

• Hello Create React App (CRA) - TypeScript (CRA 2.1.0)

  • Polyfills added

  • Media

  • Styling

參考資料

• Everything You Wanted To Know About package-lock.json But Were Too Afraid To Ask

• npm vs npx

• My React Dev Environment Setup

  • Visual Studio Code (VS Code)

  • Git Bash

  • Node.js

  • npm