How do I get smart suggestions for React in VS Code? - reactjs

It worked well a few days ago and suddenly stopped showing suggestions. Do I have to install any plugins?

Maybe you can install this extensions for your vscode just copy this code with press ctrl+p react native tools
ext install vscode-react-native
or you can try to search from extension page on vscode with React Native Tools as a keyword

I disabled Sublime Babel plugin (ext install sublime-babel-vscode) and VS Code started to show me suggestions again... I think there seems to be a conflict between the editor and the plugin.

Related

Issue installing react-reveal

I am new to react and I am even newer to typescript. I am working on this project right now and I need to use this specific git repository which is a typescript project. I want to add react-reveal so I can have some cool animations on my website but I get this error message.
I am not sure why this specific library is not working because I have installed other librarys like reactstrap. If anyone could give me any information on how to get this to work or why this isn't working it would be much appreciated!
React-reveal doesn't seem to be actively maintained as it was last updated on August 2018.
Based on the error you received it looks that there is a library that is explicitly configured to only work with React v15 or v16. You could use a slightly older version of React that works with react-reveal. You're using React 17.0.2. You could try using React v16.14.0.
You could also follow the instructions in the error message - using the force option. Here is a link(npm: When to use `--force` and `--legacy-peer-deps`) that describes how that works.
A better way to go is search for a more popular actively maintained alternative like react-spring(https://react-spring.io/) or react-awesome-reveal(https://www.npmjs.com/package/react-awesome-reveal).
I found the problem, you must put this command in the terminal => npm config set legacy-peer-deps true

React-Devtools discontinued or just moved? (React Native debugging)

I started with React Native today and I downloaded react-devtools from npm repo to debug Components hiearchy of React Native Expo app. It works fine, but it crashing sometimes.
Thats why I tried to search for some new version or something and I found, that GitHub repo of this project no longer exists (https://github.com/facebook/react-devtools) and was moved to (https://github.com/facebook/react). I dont understand where I can now found this tool in main React repo? Or project is discontinued? Are there some equivalents? Am I using some Legacy version?
Even debugged in browser (http://localhost:19001/debugger-ui/) telling me to download this app from non-existing repo.
Are there some equivalents?
I have been using reactotron for the need of devtools. This tool has way more options than devtools and the guide to install can be found here
https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md

WebStorm auto completion does not work for React js

I've created a project using create-react-app. I have switched my JavaScript language version to React JSX in Preferences | Languages & Frameworks | JavaScript.
But I still have unresolved variable warning and unresolved function warning.
The simplest way to achieve correct code completion while developing any (not only react) app is to add support for required type scrip libraries via IDE itself. Assuming you using JetBrains IDE for web dev (may be not WebStorm but IntelliJ IDEA):
go to Settings (Ctrl + Alt + S) -> Languages & Frameworks
expand JavaScript
pick Libraries, you'll see something like this
click Download...
search for any libraries you need (you can just start typing lib name in libs list), then click Download and Install
when using react, I suggest to add: react; react-dom; react-native (if you interested in mobile dev)
click Apply when you done
commonly you don't need to restart IDE, changes will apply immediately.
Happy coding!
To enhance code completion we recommend that you add a TypeScript
definition file for React with npm install --save #types/react
ref: blog.jetbrains
On WebStorm, open Preferences, Expand the Languages & Frameworks, then expand JavaScript, click on Libraries. Click the Add button and add react to list of libraries.
Restart WebStorm.
Or
You do this:
You can add a TypeScript definition for React with npm install --save #types/react
Also, for reference, according to https://youtrack.jetbrains.com/issue/WEB-24780#comment=27-2681125 it is possible to solve it entirely within IntelliJ instead of running the npm command manually.
You can search for all the packages you need for the autocompletion.

Is there a way to get Atom to autocomplete 'html' tags when building React Apps?

I'm just starting to learn React and am enjoying using it. However, it is very frustrating to me that Atom doesn't autocomplete html tags in .js files. Is there a way to fix this?
Yes, install this plugin on your atom https://orktes.github.io/atom-react/#automatic-closing-tag
Yes, I installed a community package "html-shortcuts-react", which I found quite helpful. You could go to Packages -> Settings View -> Install Packages and search for that package.

AngularJS plugin for Webstorm not sticking

I have installed WebStorm 7 for Windows successfully, and have been playing with Angularjs projects. I wanted to install the AngularJS plugin. I opened File/Settings/Plugins, and the AngularJS plugin was not listed, so I pressed Browse Repositories, found it, and installed it. It then showed up in my list, highlighted in green. When I hit OK WebStorm asks if I want to restart to integrate the plugin, and I do. But when I open WebStorm again, the plugin is no longer listed. I tried once more, same result. Any idea what incantation I need to do? ;)
Thanks
Please refer to the installing plugins document.
There could be some issue with installing the plugin, check idea.log for possible errors.
As a workaround you can download plugin zip manually and unpack it into the plugins directory.
I've verified that on my system this plugin appears in the list of installed plugins after IDE restart.

Resources