react-starter | ARCHIVED : Please use | Frontend Framework library

I tried using relay with the Typescript react starter, and am running into multiple issues.

Seems like babel-plugin-relay is not able to sense the graphql statements extracted by the relay-compiler. Here is my compiler script

I am following a TypeScript-React-Starter tutorial, and creating a store in src/index.tsx. From the tutorial,

I am running a react app that renders on a nodejs server. I saw after a few days that the memory of the nodeJs process increased depending on the number of visitors. Everytime I reloaded the page, the memory usage increased a bit. At the beginning the process takes about ~60MB memory. After a few days it increased to ~450MB. For now I am restarting the node-process to solve this problem.

I think it is a problem with my React setup. Even if I only render a very small App I get the leak. Example:

Development and build version not working in IE 11 and Edge. Here are my webpack config and package json file.

I have used below repo. https://github.com/kriasoft/react-starter-kit

I have been trying to fix this issue using various babel packages and webpack configurations.

Arrow function seems not to be working.

Here's the error.

webpack.config.js

I am building a very basic React app by including the React library script tags in my html page, and loading my components in script tags. I am not using modules or create-react-app. My components looks like this:

TIPS.JS

I'm using antd for building a react application. I'm using antd's Layout to design the layout. Also, I'm using react-router for routing and redux for state management.

In antd's Menu I've set the defaultSelectedKeys to a blank array so that when page loads I don't want to show the active menu item. Instead, When the user accesses a certain page{Component) using application URL in the browser, then that page's menu item should be active.

For example, by default defaultSelectedKeys array will be blank. So no menu item will be active initially. When the application loads and react-router routes to the home component then the home menu item should be active.

For this, I'm using useEffect hook to dispatch an action with the menu key when a particular component is mounted.

Example Home Component:

I inherited a project in React (with Redux and Antd), ASP.NET, and C# and I am getting literally hundreds of errors of the following kind:

TS2605 (TS) JSX element type 'xxx' is not a constructor function for JSX elements.

The programmers who gave me the code claim that they do not "have" these errors (so they might be just ignoring them since the code compiles anyhow). I figured that it might have to do with my React version (I have the newest). Downgrading was suggested by different resources (see below) as work-around, but this is not an option for me.

I tested different ways of importing React, but that did not reduce the number of errors. Here one example where I see red underlined code in my Visual Studio (Professional 2017):

Trying to set default field value to antd Datepicker using getFieldDecorator two-way binding.

form.getFieldValue('joiningDate') is a timestamp value

1st try

When making a conditional rendering, the most common ways are using ternary operator or logical && operator while exploiting its short circuit evaluation.

My question is about performance (I'm not asking about the fall-outs which may occur due to && operator), which one is preferred?