How to use https instead of http in create-react-app?

You just need to use HTTPS=true configuration. You can edit your package.json scripts section:

"scripts": {
  "start": "set HTTPS=true && react-scripts start"
}

or just run set HTTPS=true && npm start

How to avoid using relative path imports in create-react-app?

Create a file called .env in the project root and write the import path:

NODE_PATH=src/app

After that restart the development server. Now you should be able to import anything inside src/app without relative paths.

How to add Google Analytics for React Router?

Add a listener on the history object to record each page view:

history.listen(function (location) {
  window.ga('set', 'page', location.pathname + location.search)
  window.ga('send', 'pageview', location.pathname + location.search)
})

How to update a component every second?

You need to use setInterval() to trigger the change, but you also need to clear the timer when the component unmounts to prevent errors and memory leaks.

componentDidMount() {
  this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000)
}

componentWillUnmount() {
  clearInterval(this.interval)
}

How do you apply vendor prefixes to inline styles in React?

React does not apply vendor prefixes automatically. You need to add vendor prefixes manually.

<div style={{
  transform: 'rotate(90deg)',
  WebkitTransform: 'rotate(90deg)', // note the capital 'W' here
  msTransform: 'rotate(90deg)' // 'ms' is the only lowercase vendor prefix
}} />

How to import and export components using React and ES6?

You should use default for exporting the components

import React from 'react'
import User from 'user'

export default class MyProfile extends React.Component {
  render(){
    return (
      <User type="customer">
        //...
      </User>
    )
  }
}

With the export specifier, the MyProfile is going to be the member and exported to this module and the same can be imported without mentioning the name in other components.

Why is a component constructor called only once?

React's reconciliation algorithm assumes that without any information to the contrary, if a custom component appears in the same place on subsequent renders, it's the same component as before, so reuses the previous instance rather than creating a new one.

How to define constants in React?

You can use ES7 static field to define constant.

class MyComponent extends React.Component {
  static DEFAULT_PAGINATION = 10
}

Static fields are part of the Class Fields stage 3 proposal.

How to programmatically trigger click event in React?

You could use the ref prop to acquire a reference to the underlying HTMLInputElement object through a callback, store the reference as a class property, then use that reference to later trigger a click from your event handlers using the HTMLElement.click method.

This can be done in two steps:

1. Create ref in render method:

   <input ref={input => this.inputElement = input} />
   

2. Apply click event in your event handler:

   this.inputElement.click()
   

Is it possible to use async/await in plain React?

If you want to use async/await in React, you will need Babel and transform-async-to-generator plugin. React Native ships with Babel and a set of transforms.