awesome-cra-v2

My playground on create-react-app v2 with Netlify
https://github.com/willnguyen1312/awesome-cra-v2

Last synced: 6 days ago
JSON representation

Supported Browsers
- Supported Language Features
Available Scripts
- `npm start`
  - http://localhost:3000
Adding a Stylesheet
- With React Router
  - Webpack
- `Button.js`
  - here
Syntax Highlighting in the Editor
- Supported Language Features
  - relevant Babel documentation page
Debugging in the Editor
- Visual Studio Code
  - troubleshooting guide
  - VS Code - for-chrome) installed.
- WebStorm
  - WebStorm - ide-support/hmhgeddbohgjknpmjagkdomcpobmllji) Chrome extension installed.
Formatting Code Automatically
- WebStorm
Changing the Page `<title>`
- WebStorm
  - `document.title` - helmet), a third party library.
Importing a Component
- `DangerButton.js`
  - Understanding ES6: Modules
Adding a CSS Modules Stylesheet
- `Button.js`
  - here
Post-Processing CSS
- Result
  - `all` property - break-3/#breaking-controls), [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), and [media query ranges](https://www.w3.org/TR/mediaqueries-4/#range-context) are automatically polyfilled to add support for older browsers.
  - CSS Grid Layout
Adding Bootstrap
- When to Use the `public` Folder
  - reactstrap
  - `App.js`
- Using a Custom Theme
  - Bootstrap's documentation
Using the `public` Folder
- When to Use the `public` Folder
  - `manifest.webmanifest`
  - `pace.js`
Adding Flow
- Using a Custom Theme
Adding a Router
- Using a Custom Theme
  - React Router
  - Basic Example
Can I Use Decorators?
- Adding Development Environment Variables In `.env`
  - decorators
  - #214
  - #411
Fetching Data with AJAX Requests
- Adding Development Environment Variables In `.env`
  - here
  - here - US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Both axios and `fetch()` use Promises under the hood. You can also use the [`async / await`](https://davidwalsh.name/async-await) syntax to reduce the callback nesting.
  - `fetch()` API - US/docs/Web/JavaScript/Reference/Global_Objects/Promise) are available in your target audience's browsers.
  - the FAQ entry on the React website
  - polyfill
Integrating with an API Backend
- API Platform (PHP and Symfony)
  - this tutorial
Proxying API Requests in Development
- "Invalid Host Header" Errors After Configuring Proxy
  - this article - dev-server/issues/887).
  - described here
Pre-Rendering into Static HTML Files
- Configuring the Proxy Manually
  - zero-configuration pre-rendering (also called snapshotting) here
  - react-snapshot - snap](https://github.com/stereobooster/react-snap) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded.
Injecting Data from the Server into the Page
- Configuring the Proxy Manually
  - sanitize the JSON before sending it to the client
Running Tests
- Command Line Interface
  - Jest watch mode
- Testing Components
  - extensively documented here
- On CI servers
  - this article
  - Customize your Travis CI Build
- Disabling jsdom
  - `ReactDOM.render()`
  - `TestUtils.createRenderer()`
- Editor Integration
  - VS Code Jest Preview
- Configuring the Proxy Manually
  - Jest - 15.html) of Jest so if you heard bad things about it years ago, give it another try.
- Writing Tests
  - `jest.fn()` and `expect(fn).toBeCalled()`
- Coverage Reporting
  - `snapshotSerializers`
- Snapshot Testing
  - Read more about snapshot testing.
Debugging Tests
- Editor Integration
  - Visual Studio Code
- Debugging Tests in Visual Studio Code
  - `launch.json`
Making a Progressive Web App
- Why Opt-in?
  - can make debugging deployments more challenging - in.
  - navigation requests
- Offline-First Considerations
  - let the user know
Analyzing the Bundle Size
- Progressive Web App Metadata
  - Source map explorer
Deployment
- Serving Apps with Client-Side Routing
  - `pushState` history API - router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not.
  - Apache HTTP Server
- [GitHub Pages](https://pages.github.com/)
  - Read more
  - https://myusername.github.io/my-app
- Building for Relative Paths
  - here
- Customizing Environment Variables for Arbitrary Build Environments
  - env-cmd
- [Azure](https://azure.microsoft.com/)
  - this
  - this - appservice-static) repo for a way to use automatic deployment to Azure App Service.
- [Firebase](https://firebase.google.com/)
- [Heroku](https://www.heroku.com/)
  - Deploying React with Zero Configuration
- [Netlify](https://www.netlify.com/)
  - Start a new netlify project
- [Now](https://zeit.co/now)
  - this article.
- [Surge](https://surge.sh/)
  - ensures that every URL falls back to that file
Advanced Configuration
- [Surge](https://surge.sh/)
  - send a pull request to detect your editor of choice
  - `NODE_PATH` in Node.js
Troubleshooting
- `npm test` hangs or crashes on macOS Sierra
- `npm run build` exits too early
  - adding some swap space
- Moment.js locales are missing
  - Moment.js - locale-support).
- `npm start` doesn’t detect changes
Displaying Lint Output in the Editor
- Supported Language Features
  - Prettier
Adding a Sass Stylesheet
- Result
  - not inherit
Sending Feedback
- your feedback
Adding Custom Environment Variables
- Adding Development Environment Variables In `.env`
  - accidentally exposing a private key on the machine that could have the same name

Programming Languages

Categories

Deployment 30 Running Tests 11 Troubleshooting 10 Supported Browsers 9 Fetching Data with AJAX Requests 5 Adding Flow 3 Formatting Code Automatically 3 Can I Use Decorators? 3 Making a Progressive Web App 3 Debugging in the Editor 3 Adding Bootstrap 3 Debugging Tests 2 Adding a Stylesheet 2 Proxying API Requests in Development 2 Adding a Router 2 Advanced Configuration 2 Using the `public` Folder 2 Pre-Rendering into Static HTML Files 2 Post-Processing CSS 2 Importing a Component 1 Adding Custom Environment Variables 1 Changing the Page `<title>` 1 Injecting Data from the Server into the Page 1 Adding a CSS Modules Stylesheet 1 Syntax Highlighting in the Editor 1 Analyzing the Bundle Size 1 Sending Feedback 1 Integrating with an API Backend 1 Displaying Lint Output in the Editor 1 Adding a Sass Stylesheet 1 Available Scripts 1

Sub Categories

[Firebase](https://firebase.google.com/) 18 Supported Language Features 11 Adding Development Environment Variables In `.env` 9 Using a Custom Theme 6 `npm start` doesn’t detect changes 5 WebStorm 5 Configuring the Proxy Manually 4 When to Use the `public` Folder 4 [Surge](https://surge.sh/) 3 `npm test` hangs or crashes on macOS Sierra 3 Result 3 On CI servers 2 Why Opt-in? 2 Disabling jsdom 2 Visual Studio Code 2 [GitHub Pages](https://pages.github.com/) 2 "Invalid Host Header" Errors After Configuring Proxy 2 Editor Integration 2 `Button.js` 2 [Azure](https://azure.microsoft.com/) 2 Serving Apps with Client-Side Routing 2 API Platform (PHP and Symfony) 1 Moment.js locales are missing 1 Debugging Tests in Visual Studio Code 1 With React Router 1 Offline-First Considerations 1 Snapshot Testing 1 `npm run build` exits too early 1 [Netlify](https://www.netlify.com/) 1 [Now](https://zeit.co/now) 1 Customizing Environment Variables for Arbitrary Build Environments 1 `npm start` 1 Progressive Web App Metadata 1 `DangerButton.js` 1 Command Line Interface 1 Testing Components 1 Building for Relative Paths 1 Writing Tests 1 Coverage Reporting 1 [Heroku](https://www.heroku.com/) 1

Keywords

yaml 2 vue 2 typescript 2 scss 2 printer 2 prettier 2 markdown 2 less 2 jsx 2 json 2 javascript 2 html 2 graphql 2 formatter 2 flow 2 css 2 ast 2 angular 2