How can I import this? about jsx-control-statements

[texttechne]

You don't import it, because it's a babel plugin. Just install it and reference the plugin in your babel configuration (See https://github.com/AlexGilleran/jsx-control-statements#installation). Then you're all set up and you can use it within your JSX.

[DmitrijOkeanij]

I use:

"babel": {
    "plugins": [
      "jsx-control-statements"
    ]
  }

in package.json
And after "npm run start" it show
"'If' is not defined react/jsx-no-undef"
Also tried name: "babel-plugin-jsx-control-statements"

[texttechne]

You cannot configure babel via package.json. Typically you do the configuration in an own file called .babelrc; of course, there are also different options to configure babel...

Furthermore, if you want to use linting, please read this section: https://github.com/AlexGilleran/jsx-control-statements#linting

[DmitrijOkeanij]

Also tried to make .babelrc file in the root folder of the project, and the same result.

{
    "plugins": ["jsx-control-statements"]
}

or

{
    "plugins": ["babel-plugin-jsx-control-statements"]
}

Read here - http://babeljs.io/docs/usage/babelrc about package.json

Working on Windows on VisualStudio Code with default react template.

[texttechne]

Ah ok, didn't knew about this package.json option. Thanks.

Anyways, the error is produced by your linter. The concrete rule is: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md

It means that <If> is not defined in your file. And this is of course true, since there is no component with the name If. Jsx-control-statements only transforms component-like structures before react renders them. So to fix this linting issue you need to install an additional plugin: https://github.com/vkbansal/eslint-plugin-jsx-control-statements

Have you configured the jsx-

[DmitrijOkeanij]

I have this code in project.json

"babel": {
   "plugins": [
     "jsx-control-statements"
   ]
 },
 "eslintConfig": {
   "plugins": [
     "jsx-control-statements"
   ],
   "parserOptions": {
     "ecmaFeatures": {
         "jsx": true
     }
   },
   "extends": ["plugin:jsx-control-statements/recommended"],
   "rules": {
     "react/jsx-no-undef": [2, { "allowGlobals": true }]
   }
 }

And both modules babel-plugin-jsx-control-statements and eslint-plugin-jsx-control-statements installed. And it shows the same error and result.
Have no idea what i am doing wrong...

[AlexGilleran]

default react template.

Do you mean you're using Create React App? Unfortunately this doesn't let you override eslint properly so it doesn't work with JSX Control Statements :(

[DmitrijOkeanij]

Thank you.
Strange, i don't understand. I thought that this template is like just a directory with subdirectories and files, and if i want I can modify anything in it... I thought that there is an ability to change anything in project and it`s configuration. Maybe something is hardcoded (somewhere) in this template so I can not modify it to make it work?

[DmitrijOkeanij]

Oh. Now i understand Create React Template has config files in modules, so if i tried to edit them i broke updating (eject).