Category: JavaScript

To develop locally using a domain name instead of ‘localhost:3000’ in the URL with create-react-app, we can edit the hosts file to map localhost to a URL.

For instance, in /etc/hosts, we add

127.0.0.1   somedomain.com

to map the localhost 127.0.0.1 IP address to somedomain.com.

Then we can open our app in the browser with somedomain.com:3000.

To use onClick event on Link with React, we replace the Link with a regular element.

For instance, we write

selectName = (name) => {
  this.setState({ selectedName: name }, () => {
    this.props.history.push("about");
  });
};

//...

<li key={i} onClick={() => selectName(name)}>
  {name}
</li>

to create the selectName method that calls this.props.history.push to navigate to the 'about' URL.

And we set the onClick prop of the li to a function that calls selectName with name to call it when we click on the li.

To fix React, Babel, and Webpack not parsing JSX code, we add make a few webpack config changes.

For instance, in webpack.config.js, we write

module.exports = {
  test: /\.jsx?$/,
  exclude: /node_modules/,
  loader: "babel-loader",
  presets: ["es2015", "react"],
};

to add the 'react' preset so that Webpack will parse the JSX code in .jsx files.

We specify the preset is to be used with any files that has .jsx as the extension by setting test to /.jsx?$/

To instantly update state when any changes into the localStorage in React, we listen to the storage event.

For instance, in our component, we write

React.useEffect(() => {
  window.addEventListener("storage", () => {
    setCart(JSON.parse(localStorage.getItem("myCart")) || []);
  });
}, []);

to add the storage event listener with window.addEventListener in the useEffect callback.

Then we call setCart when local storage changes.

To embed YouTube autoplay video on mobile with JavaScript, we use the YT.Player constructor.

For instance, we write

const createYoutubePlayer = () => {
  const youtubePlayer = new YT.Player("youtubePlayer", {
    videoId: "YOURID",
    width: 277,
    height: 600,
    playerVars: {
      autoplay: 1,
      controls: 0,
      showinfo: 1,
      modestbranding: 1,
      loop: 1,
      fs: 0,
      cc_load_policy: 0,
      iv_load_policy: 3,
      autohide: 1,
      playsinline: 1,
    },
    events: {
      onReady: (e) => {
        e.target.mute();
      },
      onStateChange: (e) => {
        this.onPlayerStateChange(e);
      },
    },
  });
};

to create a new YT.Player instance. with the ID of the video container element.

And then we set some options.

We add autoplay on load with

autoplay: 1

We hide the controls with controls: 0.

We hide the video title with showinfo: 1.

modestbranding: 1 hides the YouTube branding.

loop: 1 makes the video loop.