PhpStorm auto-import is not working for NextJS - reactjs

I'm learning NextJS, and using PhpStorm for development. I never had problem with React auto-import since now. But my IDE doesn't seem to detect NextJS for auto-import components and classes.
I created my project using yarn create next-app and created a new really basic page with <h1>Hello World</h1> and wanted to add a <Link> and <Image> but both are not suggested in auto-import.
It seem nothing like that, but I really need this for creating a whole project. So wanted to know if you have any suggestion to fix that issue?

Related

React app my components are not popping up as a jsx

screenshot
When I create a React app, before my components used to turn like a turquoise green. Now it doesnt also im seeing so many red as well as errors. Im following a React portfolio tutorial step by step, but not sure if my app is working properly. Maybe I need to fix it with an npm package?
Try to install react-router-dom
And restart your vscode
Then Run your app again, the Router tags should be Green the same like components

NextJS & Vercel: Website not rendering/using CSS & ReactJS

Our business is currently exploring Vercel to deploy our new landing pages written in React & NextJS. When running them locally (yarn dev) everything works correctly (both css imports and React hooks). When deployed on Vercel, both CSS & React are not working.
Project is organized as follows (conceptually):
./src/pages/_app.tsx: Imports css (uses tailwind as well) and wraps app into IconContext.Provider (for icons)
./src/pages/index.tsx: Exports (default) component, which uses inside react components to render / hooks to handle logic
We've spent the last few hours debugging this issue, but still no clue on where's the error (since we can perfectly launch them locally).
You can have a look at the website here: https://fudeo-flutter-advanced-git-master.aleamakers.vercel.app/
Can you understand where's the error? Thanks
Resolved and found the "error": I'm a complete idiot and React was working in reality. I though the opposite because of the missing css, which made everything messy.
The error I had was in purgecss: It had incorrect rules for purging css, and It was eliminating, at build time, all the custom css.
Thanks #Ramakay for your help. Actually using yarn build && yarn start made everything simpler to replicate locally (didn't notice them in the package.json).

Some styled-components styles missing after create-react-app build

I have this big problem with my create-react-app. I am using styled-components and everything works whene developing but after I build it, some of the styled are missing and the app looks really broken.
It does not happen with the same component everytime. I tried it a month later when my app progressed a lot hoping the problem would solve itself, but it is still happening, just somewhere else.
I noticed that some styles are missing in head of the HTML - first style tag.
I don't know what to do with it, I haven't found anyone with similar problem.
So I finally solved the problem!
With npm list styled-components I found out that package grid-styled is using a different version of styled-components than my project. I synced the version and the styles started to behave correctly even in production build.

How to run react js code on eclipse?

I'm not getting how to run reactjs code on eclipse.I have created dynamic web page folder,I tried to run react code but i'm not.I have added react-1.4.jar file to that folder also, but I don't know whether it is correct or not.
Please any one can help me about setup to run react code on eclipse.
I've been using CodeMix to work on Node.js Typescript project with an Angular web application all of these under Eclipse, although, it is not React, it also have support for React projects!!! I would recommend to give it a try, I've already tried to create a CodeMix React Project and it provides a nice example on how to write ReactJS under Eclipse. Hopefully this will get you on the right direction.
You can generate bundle.js using web pack that can be placed in
eclipse web content folder.
Don't forget to place HTML, CSS, images and other script files.
You can't run the JSX files using eclipse.
you can't run react (JSX) codes without babel, webpack. whatever IDE your working with, write a JSX code and compile it by using babel.
There is actually a plugin to support JSX and typescript in Eclipse. It's called "TypeScript". TypeScript
follow - official react js documentation React
If you still stuck, try to start react app by using other IDE's like Visual Studio Code, Sublime, Atom.
For Online VS Code IDE react use this : stackblitz
Hope this helps

Getting started with React in WebStorm

I am very new to React and IDEs for frontend development.
I am trying to use React in WebStorm. I made a new project with "React starter kit" in WebStorm. Now a whole bunch of packages got created under my project. Where should I start writing my react code?
Also I have read that I need to add library "node.js v1.8.1 core modules" and "Node.js Globals" but I'm not able to find them. I am attaching snippets for better understanding.
If you are starting with react-native you better not start with a "starter-kit".
I recommend you start form the very beginning, with the simple tutorial in the react-native docs:
https://facebook.github.io/react-native/docs/getting-started.html#content
After you get some familiarity with it, you will be able to use a stater-kit more properly.
As for the project in your WebStorm, you need to look for the files under the src directory to edit the react code.
Good luck

Resources