Category: React

To declare global variables in React, we can use the React context API.

For instance, we write

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee",
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222",
  },
};
const ThemeContext = React.createContext(themes.light);

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

to call React.createContext to create the ThemeContext.

Then we wrap ThemeContext.Provider to let the Toolbar component access the context values.

Then we use the useContext hook to access the theme.light value by writing

function Toolbar() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}```

We call `useContext` with `ThemeContext` to get the value of `ThemeContext` as the value of `theme`.

To render array elements in reverse order efficiently with React, we use the JavaScript array reverse method to reverse our array.

For instance, we write

[...this.props.myList].reverse().map(createListItem);

to call reverse on myList after making a copy of it with the spread operator.

Then we call map with the createListItem function which renders the item we want.

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?$/