Is there a tool or a feature built into a common code editor/IDE that makes it easy to reorganize React components? I want change my folder structure and have all import statements automatically update. Thanks.
There are more most used ides for JavaScript/React
https://www.jetbrains.com/webstorm/
https://code.visualstudio.com/
https://atom.io
I personally used WebStorm which offers nice feature called refactor/move https://www.jetbrains.com/help/idea/move-refactorings.html when you move any file/folder it can automatically find all references and replace the imports automatically according to your new file structure. I think it is the exactly for what you are searching for.
Related
Almost all the references online mention the use of MDX with React.js. Even though other frameworks or libraries support MDX (with help of components), I haven't specifically seen the use of ".mdx" file formats outside of React.
The support of ".mdx" files in Gatsby and Next.js allows us to create a separate folder for the blog posts and have them stored anywhere (CMS, Github etc...) which helps in organizing. And the file extension of ".mdx" itself is pretty straight-forward and self-explanatory even for a beginner to grasp the concept.
So I was just wondering - If I would like to use mdx files, am I limited to React.js? Is it possible to use Svelte, Vue, Angular as well?
Yes you can use mdx outside of React but not everywhere, Check out this guides I hope they help!
mdx for Vue.js: https://mdxjs.com/guides/vue/
mdx for Svelte(MDsveX): https://madewithsvelte.com/mdsvex
MDX as such is specifically for React because it uses JSX to define it's component.
I am sure there are alternatives for other frameworks, as a Svelte user myself I know that at least Svelte has MDSVEX which is basically the same.
I was writing an application with MaterialUI components and have a lot of things so far. Then I found this great landing page/welcome page Landy that uses Antd, still, it would be the easiest for me to just use it.
Is there any problem with using two different design tools in one project? Does it make the website heavy? Can I optimize it somehow or should I migrate slowly to one of them?
don't worry about that, likely you have webpack , rollup, or any other tool that will execute a tree shaking for you so it will only import the used part and not the whole lib
Yeah it is ok to use as many libraries you want, but using too many libraries will make your code heavier, so it is recommended to use only 1 UI library
Yes, It is ok to use multiple frameworks in a single app. You can use antd or material-ui components with their import statement. Nothing to conflict each others.
I have to maintain an old project, and when I look into the code, it shocks me.
(function($, React, ReactDOM){
...............
ReactDOM.render(<App/>, $("#root")[0]);
})(
jQuery, React, ReactDOM)
The backend language is C#. I didn't know backend so it's hard for me to figure out how this project works.
it put all components in one file(one file one page), the code is really long.
It didn't use any import and export syntax.
Now I need to add new page, I want to use many files and use import to put it together. Is this possible?
I didn't find where it import react, maybe the cshtml file in the Views folder I guess. I want to use a new version of React with my new page, is this possible?
The question is pretty vague as it stands, but I don't see how it could be improved in its current state.
Depending on the lifetime, future ownership, and current use of the project you're maintaining, it may make sense to refactor it as you describe in [1] and update to the React version you want to use. Yes, it is of course possible, but it is work.
As for [2], I don't know either way if it is possible to use different versions of React to render different parts of the project. That would certainly be interesting to see. I would recommend trying to stick to one version across the application -- otherwise the next poor soul who needs to update this project will have the same reaction you've had.
Given there is a React project that uses plain javascript, is there a way to use typescript partially only to define models?
So, lets say there are a few models that map to server responses, can only those be defined in typescript while the rest of the project remains in javascript.
If its possible, how to do it?
Typescript can definitely be implemented gradually into an existing JS project, and I know a few people who have gone through the process on some monoliths, it can be a really boring process but usually low risk.
I'll link you straight away to this:
https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
The key is to understand what your goal is, and how to set everything up properly to accommodate for it, as you go it's as simple as toggling a few settings to unblock/check work as you go.
As for your question about some files being JS and some being TS, typescript handles pure JS perfectly fine, so you can switch every file to TS and even if it's pure js there won't be an issue :)
Have a read and if you need any more help on some specifics feel free to comment
I want to use ReactJS for the front end of our new system.
The back end system (in C#) has different modules which can be toggled on/off. Each module has its own set of DLLs, meaning the product can be "shipped" without unnecessary module DLLs. "You need chat functionality? Here's the DLL, drop it in your bin folder, good to go!"
Each DLL is pretty much standalone with no dependency on an other, apart from it's main parent abstraction.
I would like to know, is it possible to create something similar in a React front end? I don't want to have hundreds of react components listed with a bunch of 'if' statements to show/hide them.
I would like each module to be responsible for its own rendering & actions. Adding a brand new feature would be as easy as 'building the extra module' (not updating the 'core' system files to tell it about the extra module).
Gah, I hope that makes sense! Could anyone point me in the right direction? Is this a fools errand? Is it achievable?
Thank you in advance.
This is more question of how to split your frontend code than react specific question. Good news is, it's certainly possible. Take a look at webapack - bundling tool often use with react. I am not sure how exactly modules and DLLs work in C#, but I imagine you have some way how to include different js bundles into them. If so, webpack will help you create these bundles.