I am working in a monorepo which has been in development for a few years. The codebase is big and it is very hard to find components which are no longer in use. I did analyze the codebase with webpack bundle analyzer, but the report is not that helpful. We are trying to move them in a folder called deprecated. We tried to move unused react components manually, as much as possible but the process is very time consuming and fragile.
I am wondering is there any other tool or techniques that make finding these unused react components easy.
Any suggestions are appreciated.
there is a npm package called "react-unused-components" it can help
link : https://www.npmjs.com/package/react-unused-components
or you can take look into following repo
git : https://github.com/CVarisco/delete-react-zombies
reddit link : https://www.reddit.com/r/reactjs/comments/7z6bo0/cli_to_search_and_delete_unused_components_in/
Related
I'm confused why all the React tutorials I'm using to learn React have me installing libraries through npm rather than importing through CDN's (React, Redux, Material UI, firebase, etc). I thought CDN's were more efficient.
Any guidance on this would be helpful (this is my first time using VS code and installing packages like this, the only other website I've programmed I just imported bootstrap and jquery through CDN and coded in notepad++ :/)
While you can of course use a CDN to import scripts into your application (with, for example a <script> tag) npm is useful in the fact that when you build your React app it will bundle all the required modules together.
This can be advantageous in the fact that your users don't have to download any scripts when your application loads (which can take some users with slower connections a long time) since everything is bundled within your React app. Some applications depend on a lot of dependencies, and forcing every new user to download each script individually can cause speed issues.
At the end of the day, I don't think there is a right or wrong answer as to whether you should use a CDN or NPM, just understand that when you use NPM it bundles the required scripts into your app when you run npm run build instead of the user having to download them when they visit your site.
CDN's will only get you so far. In the industry you're going to be expected to have some experience with npm/yarn. If you keeping going down the frontend rabbit hole, you'll eventually run into things like Webpack and Babble which will help make your Javascript a lot more efficient and backwards compatible. Installing things through npm/yarn will also often offer a lot in terms of providing you with a better development environment (things like react-scripts, eslint, prettier, etc).
So similar questions have been asked, but I have additional questions that I'm needing answered. It's also quite possible I'm overthinking all of this.
To create a react project offline, I should be able to get the minified react library from a CDN. But without internet access, I need to save out that javascript to a different file, right? Then I can transfer that to my offline machine.
From there, how does running the project work? Can I use command line tools for react? Do I lose the react debugging capabilities? Or am I just writing React code and then loading the index.html into the browser?
How does node_modules work? I know the amount of modules react installs when using create-react-app is a lot. Is all of that self-contained in the CDN?
Do I need to get Babel for transpiling? or is that also included in the CDN?
Thanks in advance.
EDIT:
It seems that using node_modules is going to be out of the question for my use case. So I'll need to use the CDN scripts. What do I lose when using React this way? I'm assuming I can't run from the command-line, so I'm only able to load the index.html into the browser. Same question as before though, do I need Babel for transpiling? What other capabilities that I'm used to having with React to I lose when only using the CDN script?
First please bear with me. I do not think that this question is appropriate for Stack Overflow. I first tried to ask this question in the official GitHub repository of this project, but they strongly suggest to ask question in Stack Overflow with corresponding tags, so here I am...
The point is that is strange for me that I can not find official documentation and examples of Fluent UI React Charting components in the official website of Fluent UI React, even though the official NPM package is public and is being constantly updated.
To be fair, I found this website but It looks outdated. Any help will be much appreciated.
Potentially this can help you.
clone the repo
git clone git#github.com:microsoft/fluentui.git
then navigate to the charting folder, and install the deps (they use yarn by the looks of things)
yarn install
then start storybook
yarn start
You'll see this.
Storybook will cover the components inside the lib from what I can see, in terms of what they have on offer. That being said they still don't document the props & how to configure the components... but you should be able to sift through the storybook code to see how they got the charts to render inside storybook at least.
Not the best documented library ever... but perhaps that can get you going :)
I do have some components I use across my projects so I thought it was a good idea to build my own React UI lib, but how?
Do I create a SPA using CRA and start coding and listing the components on it?
Yep, it’s one way to start.
But if you want to publish it or organize it to have a better use of it, I suggest you use Storybook as your dev environment and Jest + ESlint.
There’s some boilerplates like React AZap to help you with that.
I built React AZap to be an easy to use React UI lib boilerplate.
It uses Storybook and stories to organize your components, it has a component generator using Plop, tests with Jest+Enzime and styles with styled-components.
Try it out, it can save you time to start your lib ;)
Using CRA won't help you, as you won't be running this project.
Creating a library of components is the same as creating any other npm package, the only difference is that it should export components instead of normal functions/objects.
There are plenty of guides online that you can consult if you want more in-depth explanation.
I'd recommend giving this guide a read, which goes into the details for how to structure a multi-package UI component library. The code is included as well, so you should be able to clone to repository and get started.
Hope that helps!
I'm building my first semi-major MERN app with Redux, without a tutorial. It's really challenging, but a ton of fun.
The project I am building is, essentially, a simple re-engineering of Zillow's API (they have a few, I'm after the more basic of the property search results).
I am using the zillow npm module and want to add what appears to be a pretty popular autocomplete Search plug-in.
My big challenge this week has been diving into the build tools. I read thru the webpack docs over the last couple days, then felt solid enough to try building out my Search functionality, which will return results and a map eventually.
It should be noted, I'm using a scaffolding tool developed by a guy who publishes a lot of good React tutorials (from which I basically learned ReactJS -- it's called turbo360). Right now, I am using webpack 4. I just did a fresh git commit: https://github.com/ScorpIan555/real-estate-app/blob/master/webpack.config.js
I have, so far, read a bit of the Babel docs. I piped in .js extentions to the .jsx test for the babel-loader, thinking perhaps that would get it?
What I'm a bit confused by is that it seems to be tripping over a file written in ES5 (from the geocoder npm module I am trying to use). So, I'm wondering if I should be configuring my babel-loader to not try to transpile ES5 modules or what.
This is the module I am trying to utilize, it looks fairly popular and has a recent commit. I also looked at its webpack.config.js file and tried to apply that to mine...
https://github.com/abec/react-autosuggest-geocoder/blob/master/webpack.config.js
I am closing this as I received assistance on a Slack channel. This plugin uses experimental code which I do not wish to use on my app. I will use another plug-in. I was looking for help with my webpack.config and am reliably told it is fine. Thanks to all who viewed this question!