Tag: react

Categories
Cocoapods

Install CocoaPod Version

art sign abstract letter
Photo by Ann H on Pexels.com

Recently, I’ve created react native app with this command:

npx react-native init myapp

and I got these error: “Installing required CocoaPods dependencies”

info Installing required CocoaPods dependencies
(node:8874) UnhandledPromiseRejectionWarning: Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./myapp/ios && pod install".

and “React requires CocoaPods version >= 1.10.1”

`React` requires CocoaPods version `>= 1.10.1`, which is not satisfied by your current version, `1.10.0`

Here is my solution:

  1. Check cocoapods version
pod --version
1.10.0

2. Cocoapods gem list

gem list cocoapods
*** LOCAL GEMS ***

cocoapods (1.10.0)
cocoapods-core (1.10.0)
cocoapods-deintegrate (1.0.4)
cocoapods-downloader (1.4.0)
cocoapods-plugins (1.0.0)
cocoapods-search (1.0.0)
cocoapods-trunk (1.5.0)
cocoapods-try (1.2.0)

3. Install cocoapods version

gem install cocoapods -v 1.10.1
Fetching cocoapods-1.10.1.gem
Fetching cocoapods-core-1.10.1.gem
Successfully installed cocoapods-core-1.10.1
Successfully installed cocoapods-1.10.1
Parsing documentation for cocoapods-core-1.10.1
Installing ri documentation for cocoapods-core-1.10.1
Parsing documentation for cocoapods-1.10.1
Installing ri documentation for cocoapods-1.10.1
Done installing documentation for cocoapods-core, cocoapods after 3 seconds
2 gems installed

4. Cocoapods install specific version in your project.

pod _1.10.1_ install
// pod _{version}_ install

** Don’t forget to put underscore before and after version number

This does not change the default CocoaPods version used when running pod install

I hope this help.

Ref: https://blog.echobind.com/managing-cocoapods-versions-across-projects-93cb2222f906

Categories
Uncategorized

WordPress React Gutenberg

How this code will be looked when i call wp.element?

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

wp.element is basically a React wrapper. Your code can look like this if you use wp.element

const { Component, render } = wp.element;

class Clock extends Component {
...rest of the code
}

render(
  <Clock />,
  document.getElementById('root')
);

Or you can keep using React too as it already ships with WordPress, in which case set it as an external in webpack so it isn’t bundled with your build and instead takes it from the WP Core.

Hope this helps!

Ref: https://wordpress.org/support/topic/reactjs-in-wpwp-elemet/