I just started working on a react project which has a relatively larger code base. How can I find all references of a class or a function among whole project. I'm using vscode which I found that I can only find reference within the same file.
Related
I'm new to react development. I'm currently using Typescript for react with webpack and npm.
i'm working on a large scale project where components are complex. As of now they are kept in certain hierachy in project folder.
i recently learn about making components library. I'm thinking of taking complex components out of project and put them in a separate component library. However, other team members say it would cauae headache to maintain library separately. since there is less to no chance of using this in any other project (thats the current situation) they should not take the components out and maintain separately.
i want to know if that is the only reason the react developers create component and creating component to test it better and simplifing thw project complexity are not the valid reasons?
I've recently started working on a new project at work which has been utilizing React and JavaScript.
As someone who mainly used TypeScript in previous projects I've been struggling a bit with how loose everything is.
If I were able to, I would just convert the whole project to TypeScript however some of my coworkers aren't familiar with it.
My question is, lets say for example, I needed to add a new component somewhere on the page, would it work if I added TypeScript to the project with npm and had only one file as .tsx? Of course when building the project for production I would run TSC to compile it back into vanilla JS.
Also thought I should just point out I’m not looking to convert the whole project to TypeScript, just a few here and there.
Thanks!
Set up your project as if you were going to convert everything to typescript, make sure you have allowJs and checkJs set to true in your tsconfig file, make sure all variations of TS strict mode are off, then convert as many or as few (or even none) js files to ts.
First of all, thank you for reading and trying to understand this question.
In my team we have built a library for common Components with React for about 2+ years. This library is built with Babel creating two different transpilations. One in CommonJS for our Test Runner to run tests (because Jest cannot use ESM) and another one in ESM for Create React App (Webpack inside) to make Tree Shaking possible. We use Create React App to build and develop our Apps.
This is working for us perfectly. But we have encounter a problem when managing Final Form Peer Dependencies (or any other library). This is our scenario:
Common Components Library
PeerDependencies
Final Form
DevDependencies
Final Form
App1
Dependencies
Common Components Library
Final Form
App2
Dependencies
Common Components Library
Final Form
App3 (It dont use FinalForm but it uses other Common Components)
Dependencies
Common Components Library
I'll explain this:
In our Common Components Library, which I spoke earlier, we have React Components that works with Final Form, like for example a Vitaminated Autocomplete Text Input Component that we share among many Apps. This Apps also use Final Form to create Components that implement forms locally for that App.
So App1 is right. Everything works fine. But for one thing, now if we want to upgrade Final Form version for this App because, lets say, we need a bug fix of Final Form. We are been forced to upgrade also our Common Components Library and the other App's Final Form version. We need to do this if we want to avoid execution errors within the Final Form React Context. If you are familiar with Final Form or React Context in general you probably have encountered this problem. You can't use different versions of a library that uses React Context. i.e: if we have final-form#1.2.3 in our Common Components Library and final-form#1.2.4 in our App1 it would genereate an execution error. So as I said, we are forced to upgrade not only on App1 and Common Component Library also on the other Apps that uses a Common Component on the Library that uses Final Form. The statement would be: 'Now, if we upgrade somewhere we have to upgrade everywhere'. And we don't want to do that. Probably we aren't handleling dependencies correctly.
So this drove us to move Final Form dependencies (we also use react-final-form, final-form-arrays, etc...) to PeerDependencies. Our problem was solved. But now, another one appeared when we saw that in Apps like App3 we were having an error when we build our App3 with Create React App. This is our output when using npm run build:
module not found `react-final-form' in file 'node_modules/CommonComponentsLibrary/VitaminatedAutoCompleteTextInput.js'
This means that, even with our App not using this VitaminatedAutoCompleteTextInput when we build its checking for every import in the node_modules so this is making us unable to build our App3. When we add the 'missing' depednencies to our App this builds with no problem and then when analyzing our bundle with source-map-explorer we see that final form depdenencies are not included in the bundle.
Is this necessary? I felt like we are missing something here. One solution for us has been including final form depdnencies on the Common Components Library as 'normal' dependencies but we were still having the first problem I mentioned before.
Maybe this problem is not only related with Create React App or Final Form. This is probably a more global isse within ESModules Libraries with Npm dependencies. Probably you will need me to enchance the explanation or have questions. I'll be glad to improve this question where needed. I have also searched on Google and here to find a similar question but I only found this. I dont know exactlcy if it's the same question but It have no answer yet.
Many thanks for trying to help or understand this issue,
Im working on a proyect and i´ve come across some issue I´ve never had before.
I need to integrate to React a Unity program thats already finished and I find this misleading.
Target editor is my component and inside it I copied the /unity/ folder that has the program.
How can I do this?
Thank you for your time!
I have seen other IDEs that can watch your project structure, and if you move a file from one folder to another, all references or imports to that file will be auto adjusted in all files that reference that file.
I can't seem to find information anywhere so far for how to implement this feature or if there's a package out there that handles this.
I would appreciate any suggestions from anyone that has got it to work. My project is in React, so basically it's to update all the component imports
I developed a new plugin called JavaScript Enhancements, that you can find on Package Control. It uses Flow (javascript static type checker from Facebook) under the hood.
It offers smart javascript autocomplete, real-time errors, code refactoring and also a lot of features about creating, developing and managing javascript projects.
In your case you could use https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki/Code-Refactoring#safe-move
An introduction to this plugin could be found in this css-tricks.com article: Turn Sublime Text 3 into a JavaScript IDE