About bind, you can use arrow functions in your components:

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      counter: {
        state: 0
      }
    };
  }

  increment = () => {
    this.setState({
      ...this.state,
      counter: {
        ...this.state.counter,
        state: this.state.counter.state + 1
      }
    });
  };

  render() {
    return (
      <div>
        State:{" "}
        {this.state.counter.state === 0
          ? "nothing here"
          : this.state.counter.state}
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

See it here: codesandbox.io/s/friendly-wood-fgwew

About the nesting states, while it's possible (like I've shown), it's better to use useReducer hook for such constructs.

Conditionals in JSX are good in my opinion, and most of the time are solved by a oneliner. If you don't want to use them explicitly, you can always move the part responsible for rendering this somewhere else, into a method or a separate component.

React is great for doing large things. Paired with TypeScript and Redux, you can build a huge application with relative ease. But for smaller things – it's overblown.

You can try to move to functional components instead. You will not get rid of JSX but it will certainly resolve some issues that you listed:

this

Will not be a problem anymore

Nested states

I had another problem here. Not as the fact that it doesn't work, you can have nested states as you specified. The problem wast that render was not triggered on the nested changes... the component does not render again due to the fact that it checks only the first level of the state object, it's not a deep comparison.

With hooks you can split the nested object to multiple objects and have only one level.

const [myInfo, setMyInfo] = useState({ 
    firstName: 'Adnan',
    lastName: 'Babakan'
});

const [otherStateObj, setOtherStateObj] = useState({});

JSX

Conditional rendering... you can have conditional rendering in multiple ways done, it's just a matter of choice

either just put the conditional in the render function

return(
    loggedIn ? <Home/> : <Auth/>
)

either create a separate conditional and use it in the render

const content = {
   true: <Home/>,
   false: <Auth/>
}[loggedIn]

return content;
//or
return (
   <OtherComponent>
        {content}
   </OtherComponent>
)

You can also go further and wrap the content in a useMemo hook to not create it every time but only if isLogged has changed...

There a lot of ways of going on with this... I think that going to functional with hooks solves some issues, of course everybody have their own opinion, this is just mine on this case.

Everyone's free to stick with whatever solves the problem and feels natural.

You can get around with this with Function Components (FC) w/ hooks. For nested states, I agree with you it's annoying (but there is a workaround with immerjs. Yes, another library...)

Another hindrance for JSX is having to use className instead of class btw.

const myInfo = {...this.state.myInfo};
myInfo.firstName = "Sana";
this.setState({myInfo});

You are absolutely right. I always feel inconvenient about these three problems.
But did you get rid of React? Seriously?

I started with Vue and learned some React later. I came to the same conclusions. I really don't understand why it has such a cult following. I can see some of its merits, but in general think it's overrated and "messy" as you mentioned in the article.

I totally agree on the last point. I always feel messy each time I have to update nested state objects.

On your second point, you can avoid binding by making the handler a class field - using arrow function.

My main pain point with react is contexts and nesting hell.

Every time I need to make state globally available, creating contexts is painful. Reasoning about efficient contexts (not rerendering everything) is even more painful, which ends up requiring 3rd party state management libs.

Meanwhile, attaching scoped state in Angular is absolutely easy with viewProviders

I whish this article was written one year ago: except for the conditional rendering (that remains the same as you wrote, still more powerful than you say), all the problems you pointed are not a problem anymore with the introduction of hooks and deprecation of class components: for the state "problem" you can use useState hook (hooks should be them selfs a valid reason to NOT let react go) and by using arrow functions you avoid all "this" related problems

You sure don't dive into React more advance concepts.
Even though most of what you said is true, there's still so much more of React than "just this"

According to your reasons, you will be happy with Angular!