super-awesome-chat-app-react

A learning exercise in react
https://github.com/decoder318/super-awesome-chat-app-react

Last synced: about 14 hours ago
JSON representation

Code Splitting
- With React Router
  - Code Splitting
Post-Processing CSS
- `Button.js`
  - Autoprefixer
Adding a Router
- Using a Custom Theme
  - React Router
  - Basic Example
Adding Custom Environment Variables
- Adding Development Environment Variables In `.env`
  - dotenv documentation
  - dotenv-expand
Fetching Data with AJAX Requests
- Adding Development Environment Variables In `.env`
  - axios - US/docs/Web/API/Fetch_API) provided by the browser. Conveniently, Create React App includes a polyfill for `fetch()` so you can use it without worrying about the browser support.
  - Promise polyfill - 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.
  - here
Integrating with an API Backend
- Node
  - this tutorial
  - here
- Ruby on Rails
  - this tutorial
  - here
Proxying API Requests in Development
- Configuring the Proxy Manually
  - `http-proxy-middleware` - proxy`](https://github.com/nodejitsu/node-http-proxy#options) supports.
- Configuring a WebSocket Proxy
  - ws - US/docs/Web/API/WebSocket).
  - Socket.io
- "Invalid Host Header" Errors After Configuring Proxy
  - this article - dev-server/issues/887).
  - described here
- Ruby on Rails
  - here’s how to do it for Express
Running Tests
- Configuring a WebSocket Proxy
  - jsdom
- Command Line Interface
  - Jest watch mode
- On CI servers
  - this article
- Disabling jsdom
  - `ReactDOM.render()`
- Editor Integration
  - VS Code Jest Preview
- Snapshot Testing
  - Read more about snapshot testing.
- Using Third Party Assertion Libraries
  - file those against Jest - printing React elements as JSX](https://github.com/facebook/jest/pull/1566).
- On your own environment
  - file an issue
Developing Components in Isolation
- Getting Started with Storybook
  - GitHub Repo
  - Snapshot Testing UI
- Getting Started with Styleguidist
  - GitHub Repo
  - Documentation
Publishing Components to npm
- Getting Started with Styleguidist
  - nwb
Making a Progressive Web App
- Getting Started with Styleguidist
  - `sw-precache-webpack-plugin`
- Offline-First Considerations
  - not currently supported
Deployment
- Static Server
  - serve - p` or `--port` flags.
- [Firebase](https://firebase.google.com/)
- [GitHub Pages](https://pages.github.com/)
- [Heroku](https://www.heroku.com/)
  - Heroku Buildpack for Create React App
  - Deploying React with Zero Configuration
- 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
- Building for Relative Paths
  - here
- [Azure](https://azure.microsoft.com/)
  - this
  - this - appservice-static) repo for a way to use automatic deployment to Azure App Service.
- [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
Troubleshooting
- `npm test` hangs on macOS Sierra
  - Watchman - react-app#713](https://github.com/facebookincubator/create-react-app/issues/713).
  - facebook/watchman#358
  - ember-cli/ember-cli#6259
  - other installation methods
- `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
Supported Language Features and Polyfills
- `npm run eject`
  - Exponentiation Operator
  - Async/await
  - Object Rest/Spread Properties
  - ES6
  - Dynamic import()
  - Class Fields and Static Properties
  - codemods
  - polyfills
  - `Promise`
  - different proposal stages
  - ...nonArrayValue
  - `Object.assign()` - assign`](https://github.com/sindresorhus/object-assign).
Displaying Lint Output in the Editor
- `npm run eject`
  - Prettier
Formatting Code Automatically
- WebStorm
Available Scripts
- `npm start`
  - http://localhost:3000
Syntax Highlighting in the Editor
- `npm run eject`
  - 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.
Changing the Page `<title>`
- WebStorm
  - `document.title` - helmet), a third party library.
Importing a Component
- `DangerButton.js`
  - Understanding ES6: Modules
Adding a Stylesheet
- With React Router
  - Webpack
Adding a CSS Preprocessor (Sass, Less etc.)
- `Button.js`
  - #1891
  - #1939
Using the `public` Folder
- When to Use the `public` Folder
  - `manifest.webmanifest`
  - `pace.js`
Adding Bootstrap
- When to Use the `public` Folder
  - `App.js`
Adding Flow
- Using a Custom Theme
Can I Use Decorators?
- Adding Development Environment Variables In `.env`
  - decorators
  - #411
Pre-Rendering into Static HTML Files
- Configuring a WebSocket Proxy
  - 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 a WebSocket Proxy
  - sanitize the JSON before sending it to the client
Debugging Tests
- Editor Integration
  - Visual Studio Code
- Debugging Tests in Visual Studio Code
  - `launch.json`
Analyzing the Bundle Size
- Progressive Web App Metadata
  - Source map explorer
Advanced Configuration
- [Surge](https://surge.sh/)
Sending Feedback
- your feedback
Updating to New Releases
- changelog

Programming Languages

JavaScript 13 HTML 6 TypeScript 2 Shell 1

Categories

Deployment 33 Supported Language Features and Polyfills 12 Troubleshooting 9 Running Tests 8 Proxying API Requests in Development 6 Adding Flow 4 Integrating with an API Backend 4 Developing Components in Isolation 4 Advanced Configuration 3 Fetching Data with AJAX Requests 3 Debugging in the Editor 3 Formatting Code Automatically 3 Adding a CSS Preprocessor (Sass, Less etc.) 2 Can I Use Decorators? 2 Making a Progressive Web App 2 Debugging Tests 2 Adding Custom Environment Variables 2 Using the `public` Folder 2 Adding a Router 2 Pre-Rendering into Static HTML Files 2 Syntax Highlighting in the Editor 1 Injecting Data from the Server into the Page 1 Adding a Stylesheet 1 Changing the Page `<title>` 1 Importing a Component 1 Analyzing the Bundle Size 1 Updating to New Releases 1 Publishing Components to npm 1 Sending Feedback 1 Displaying Lint Output in the Editor 1 Available Scripts 1 Post-Processing CSS 1 Adding Bootstrap 1 Code Splitting 1

Sub Categories

[Firebase](https://firebase.google.com/) 18 `npm run eject` 14 Adding Development Environment Variables In `.env` 7 Configuring a WebSocket Proxy 6 Using a Custom Theme 6 WebStorm 5 Getting Started with Styleguidist 4 [GitHub Pages](https://pages.github.com/) 4 `npm test` hangs on macOS Sierra 4 [Surge](https://surge.sh/) 4 Ruby on Rails 3 When to Use the `public` Folder 3 `npm start` doesn’t detect changes 3 `Button.js` 3 Visual Studio Code 2 With React Router 2 Getting Started with Storybook 2 [Heroku](https://www.heroku.com/) 2 Node 2 "Invalid Host Header" Errors After Configuring Proxy 2 Serving Apps with Client-Side Routing 2 [Azure](https://azure.microsoft.com/) 2 Editor Integration 2 Offline-First Considerations 1 Debugging Tests in Visual Studio Code 1 Building for Relative Paths 1 Moment.js locales are missing 1 Using Third Party Assertion Libraries 1 Command Line Interface 1 On your own environment 1 Static Server 1 `DangerButton.js` 1 Progressive Web App Metadata 1 Snapshot Testing 1 `npm start` 1 `npm run build` exits too early 1 [Netlify](https://www.netlify.com/) 1 [Now](https://zeit.co/now) 1 On CI servers 1 Configuring the Proxy Manually 1 Disabling jsdom 1

Keywords

javascript 8 nodejs 5 node 3 css 3 react 3 html 3 websocket 2 dotenv 2 yaml 2 vue 2 typescript 2 scss 2 printer 2 prettier 2 markdown 2 less 2 jsx 2 angular 2 json 2 graphql 2 formatter 2 flow 2 ast 2 websocket-compression 1 websocket-server 1 documentation 1 styleguide 1 buildpack 1 create-react-app 1 websocket-client 1 rfc-6455 1 real-time 1 promise 1 http-client 1 prefixer 1 postcss-plugins 1 browser-sync 1 connect 1 express 1 fastify 1 http-proxy 1 middleware 1 nextjs 1 polka 1 proxy 1 proxy-middleware 1 offline 1 progressive-web-app 1 service-workers 1 sw-guide 1