super-awesome-chat-app-react

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

Last synced: 5 days 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).
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.
Developing Components in Isolation
- Getting Started with Storybook
  - GitHub Repo
- Getting Started with Styleguidist
  - GitHub Repo
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
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
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/)
  - `NODE_PATH` in Node.js
Sending Feedback
- your feedback
Updating to New Releases
- changelog

Programming Languages

JavaScript 13 HTML 6 TypeScript 2 Shell 1

Categories

Deployment 31 Supported Language Features and Polyfills 12 Troubleshooting 9 Running Tests 6 Adding Flow 4 Proxying API Requests in Development 4 Integrating with an API Backend 4 Formatting Code Automatically 3 Debugging in the Editor 3 Fetching Data with AJAX Requests 3 Developing Components in Isolation 2 Debugging Tests 2 Making a Progressive Web App 2 Using the `public` Folder 2 Adding Custom Environment Variables 2 Pre-Rendering into Static HTML Files 2 Adding a Router 2 Advanced Configuration 1 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 Can I Use Decorators? 1 Adding a CSS Preprocessor (Sass, Less etc.) 1 Post-Processing CSS 1 Adding Bootstrap 1 Code Splitting 1

Sub Categories

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