super-awesome-chat-app-react

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

Last synced: about 4 hours ago
JSON representation

Code Splitting
- With React Router
  - Code Splitting
  - this tutorial - stack-demo-client/tree/code-splitting-in-create-react-app).
- `DangerButton.js`
  - dynamic `import()` - dynamic-import) is in stage 3. The `import()` function-like form takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module.
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
  - Travis CI - vars).
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
  - the FAQ entry on the React website
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
  - setting up a Socket.io server
- "Invalid Host Header" Errors After Configuring Proxy
  - this article - dev-server/issues/887).
  - described here
- Ruby on Rails
  - CORS issues
  - 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
  - Travis Getting started - ci.org/profile) page.
  - Customize your Travis CI Build
- Disabling jsdom
  - `ReactDOM.render()`
  - `TestUtils.renderIntoDocument()` - L91) for the above)
- Editor Integration
  - VS Code Jest Preview
- Snapshot Testing
  - Read more about snapshot testing.
- Writing Tests
  - extensively documented here
- Testing Components
  - `shallow()` rendering API
  - full rendering with `mount()`
  - Enzyme documentation - in `expect()` and `jest.fn()` for spies.
  - extensively documented here
  - Chai
- Using Third Party Assertion Libraries
  - file those against Jest - printing React elements as JSX](https://github.com/facebook/jest/pull/1566).
- Coverage Reporting
  - coverage report
  - `collectCoverageFrom`
- On your own environment
  - file an issue
Developing Components in Isolation
- Getting Started with Storybook
- 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`
  - Progressive Web App
- Offline-First Considerations
- Progressive Web App Metadata
  - The Web App Manifest guide
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
  - Apache Tomcat
- 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
Supported Browsers
- `npm run eject`
  - to the React documentation
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
  - difference between default and named exports
- WebStorm
  - `import` and `export`
Adding a Stylesheet
- With React Router
  - Webpack
- `Button.js`
  - here
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`
  - React Bootstrap
- Using a Custom Theme
  - customized Bootstrap
Adding Flow
- Using a Custom Theme
Can I Use Decorators?
- Adding Development Environment Variables In `.env`
  - decorators
  - #214
  - #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`
  - `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
Adding Images, Fonts, and Files
- `Button.js`
  - data URI - react-app/issues/1153).

Programming Languages

JavaScript 13 HTML 6 TypeScript 2 Shell 1

Categories

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

Sub Categories

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