reactjs / mn.reactjs.org
File Size

The distribution of size of files (measured in lines of code).

Intro
  • File size measurements show the distribution of size of files.
  • Files are classified in four categories based on their size (lines of code): 1-100 (very small files), 101-200 (small files), 201-500 (medium size files), 501-1000 (long files), 1001+(very long files).
  • It is a good practice to keep files small. Long files may become "bloaters", code that have increased to such gargantuan proportions that they are hard to work with.
Learn more...
File Size Overall
  • There are 103 files with 6,746 lines of code.
    • 1 very long files (1,130 lines of code)
    • 0 long files (0 lines of code)
    • 4 medium size files (1,243 lines of codeclsfd_ftr_w_mp_ins)
    • 15 small files (2,050 lines of code)
    • 83 very small files (2,323 lines of code)
16% | 0% | 18% | 30% | 34%
Legend:
1001+
501-1000
201-500
101-200
1-100


explore: zoomable circles | sunburst | 3D view
File Size per Extension
1001+
501-1000
201-500
101-200
1-100
yml66% | 0% | 0% | 24% | 9%
js0% | 0% | 25% | 33% | 41%
yaml0% | 0% | 0% | 0% | 100%
css0% | 0% | 0% | 0% | 100%
html0% | 0% | 0% | 0% | 100%
File Size per Logical Decomposition
primary
1001+
501-1000
201-500
101-200
1-100
content72% | 0% | 0% | 19% | 7%
src/components0% | 0% | 25% | 33% | 40%
src0% | 0% | 56% | 38% | 4%
src/pages0% | 0% | 52% | 18% | 29%
src/templates0% | 0% | 0% | 33% | 66%
ROOT0% | 0% | 0% | 63% | 36%
gatsby0% | 0% | 0% | 59% | 40%
src/utils0% | 0% | 0% | 48% | 51%
content/tutorial0% | 0% | 0% | 100% | 0%
plugins/gatsby-remark-header-custom-ids0% | 0% | 0% | 0% | 100%
plugins/gatsby-transformer-versions-yaml0% | 0% | 0% | 0% | 100%
scripts0% | 0% | 0% | 0% | 100%
content/community0% | 0% | 0% | 0% | 100%
src/css0% | 0% | 0% | 0% | 100%
plugins/gatsby-transformer-home-example-code0% | 0% | 0% | 0% | 100%
plugins/gatsby-source-react-error-codes0% | 0% | 0% | 0% | 100%
plugins/gatsby-transformer-authors-yaml0% | 0% | 0% | 0% | 100%
static/js0% | 0% | 0% | 0% | 100%
static/html0% | 0% | 0% | 0% | 100%
plugins/gatsby-remark-use-jsx0% | 0% | 0% | 0% | 100%
Longest Files (Top 50)
File# lines# units
1130 -
theme.js
in src
 391 7
index.js
in src/pages
 375 3
Header.js
in src/components/LayoutHeader
 251 -
CodeEditor.js
in src/components/CodeEditor
 226 5
languages.yml
in content
 192 -
StickyResponsiveSidebar.js
in src/components/StickyResponsiveSidebar
 178 2
Banner.js
in src/components/Banner
 172 -
171 1
MarkdownPage.js
in src/components/MarkdownPage
 141 -
139 -
languages.js
in src/pages
 134 -
Footer.js
in src/components/LayoutFooter
 132 -
html.js
in src
 126 5
121 1
createLink.js
in src/utils
 113 -
nav.yml
in content/tutorial
 111 -
authors.yml
in content
 111 -
Section.js
in src/templates/components/Sidebar
 106 1
NavigationFooter.js
in src/templates/components/NavigationFooter
 103 -
all.html.js
in src/pages/blog
 93 -
85 -
DocSearch.js
in src/components/LayoutHeader
 85 2
ErrorDecoder.js
in src/components/ErrorDecoder
 82 5
blog.js
in src/templates
 74 2
gatsby-ssr.js
in plugins/gatsby-remark-header-custom-ids
 70 1
CodeExample.js
in src/components/CodeExample
 67 1
ButtonLink.js
in src/components/ButtonLink
 65 -
versions.yml
in content
 64 -
HeaderLink.js
in src/components/LayoutHeader
 63 -
TitleAndMetaTags.js
in src/components/TitleAndMetaTags
 62 -
61 4
versions.js
in src/pages
 61 -
Sidebar.js
in src/templates/components/Sidebar
 59 3
58 1
codepen-example.js
in src/templates
 55 1
Layout.js
in src/components/Layout
 53 1
ScrollSyncSection.js
in src/templates/components/Sidebar
 52 7
index.js
in plugins/gatsby-remark-header-custom-ids
 51 1
create-redirects.js
in plugins/gatsby-transformer-versions-yaml
 48 -
nav.yml
in content/community
 44 -
Flex.js
in src/components/Flex
 41 -
footerNav.yml
in content
 40 -
docs.js
in src/templates
 38 2
tutorial.js
in src/templates
 37 2
reset.css
in src/css
 36 -
community.js
in src/templates
 34 2
33 3
ExternalFooterLink.js
in src/components/LayoutFooter
 33 -
FooterNav.js
in src/components/LayoutFooter
 31 -
Files With Most Units (Top 28)
File# lines# units
theme.js
in src
 391 7
ScrollSyncSection.js
in src/templates/components/Sidebar
 52 7
html.js
in src
 126 5
CodeEditor.js
in src/components/CodeEditor
 226 5
ErrorDecoder.js
in src/components/ErrorDecoder
 82 5
61 4
33 3
Sidebar.js
in src/templates/components/Sidebar
 59 3
index.js
in src/pages
 375 3
DocSearch.js
in src/components/LayoutHeader
 85 2
StickyResponsiveSidebar.js
in src/components/StickyResponsiveSidebar
 178 2
docs.js
in src/templates
 38 2
tutorial.js
in src/templates
 37 2
blog.js
in src/templates
 74 2
community.js
in src/templates
 34 2
gatsby-ssr.js
in plugins/gatsby-remark-header-custom-ids
 70 1
index.js
in plugins/gatsby-remark-header-custom-ids
 51 1
gatsby-node.js
in plugins/gatsby-transformer-versions-yaml
 25 1
121 1
58 1
171 1
10 1
10 1
slugify.js
in src/utils
 5 1
Layout.js
in src/components/Layout
 53 1
CodeExample.js
in src/components/CodeExample
 67 1
codepen-example.js
in src/templates
 55 1
Section.js
in src/templates/components/Sidebar
 106 1
Files With Long Lines (Top 3)

There are 3 files with lines longer than 120 characters. In total, there are 9 long lines.

File# lines# units# long lines
Banner.js
in src/components/Banner
 172 - 6
html.js
in src
 126 5 2
index.js
in plugins/gatsby-remark-header-custom-ids
 51 1 1
Correlations

File Size vs. Commits (all time): 103 points

src/components/Banner/Banner.js x: 7 commits (all time) y: 172 lines of code src/html.js x: 57 commits (all time) y: 126 lines of code content/versions.yml x: 68 commits (all time) y: 64 lines of code plugins/gatsby-source-react-error-codes/gatsby-node.js x: 34 commits (all time) y: 23 lines of code src/components/LayoutFooter/Footer.js x: 73 commits (all time) y: 132 lines of code src/components/MarkdownPage/MarkdownPage.js x: 80 commits (all time) y: 141 lines of code plugins/gatsby-transformer-versions-yaml/create-redirects.js x: 18 commits (all time) y: 48 lines of code content/authors.yml x: 47 commits (all time) y: 111 lines of code src/site-constants.js x: 111 commits (all time) y: 4 lines of code content/community/nav.yml x: 26 commits (all time) y: 44 lines of code content/headerNav.yml x: 15 commits (all time) y: 13 lines of code plugins/gatsby-transformer-versions-yaml/gatsby-node.js x: 33 commits (all time) y: 25 lines of code static/html/single-file-example.html x: 14 commits (all time) y: 19 lines of code gatsby-browser.js x: 20 commits (all time) y: 10 lines of code src/components/Banner/index.js x: 5 commits (all time) y: 2 lines of code src/components/LayoutHeader/Header.js x: 69 commits (all time) y: 251 lines of code src/components/MarkdownHeader/MarkdownHeader.js x: 40 commits (all time) y: 28 lines of code src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js x: 46 commits (all time) y: 178 lines of code src/pages/index.js x: 66 commits (all time) y: 375 lines of code src/theme.js x: 67 commits (all time) y: 391 lines of code gatsby-config.js x: 66 commits (all time) y: 171 lines of code plugins/gatsby-transformer-home-example-code/gatsby-node.js x: 29 commits (all time) y: 29 lines of code src/components/FeedbackForm/index.js x: 13 commits (all time) y: 2 lines of code src/components/TitleAndMetaTags/TitleAndMetaTags.js x: 43 commits (all time) y: 62 lines of code src/components/LayoutHeader/DocSearch.js x: 28 commits (all time) y: 85 lines of code src/pages/acknowledgements.html.js x: 40 commits (all time) y: 16 lines of code gatsby-node.js x: 53 commits (all time) y: 5 lines of code gatsby/createPages.js x: 18 commits (all time) y: 121 lines of code gatsby/onCreateNode.js x: 22 commits (all time) y: 58 lines of code gatsby/onCreatePage.js x: 17 commits (all time) y: 11 lines of code gatsby/onCreateWebpackConfig.js x: 14 commits (all time) y: 14 lines of code plugins/gatsby-remark-header-custom-ids/gatsby-client.js x: 15 commits (all time) y: 26 lines of code plugins/gatsby-remark-header-custom-ids/gatsby-ssr.js x: 16 commits (all time) y: 70 lines of code plugins/gatsby-remark-header-custom-ids/index.js x: 16 commits (all time) y: 51 lines of code plugins/gatsby-transformer-authors-yaml/gatsby-node.js x: 15 commits (all time) y: 22 lines of code src/components/ButtonLink/ButtonLink.js x: 22 commits (all time) y: 65 lines of code src/components/ButtonLink/index.js x: 21 commits (all time) y: 2 lines of code src/components/CodeEditor/CodeEditor.js x: 73 commits (all time) y: 226 lines of code src/components/CodeEditor/index.js x: 26 commits (all time) y: 2 lines of code src/components/CodeExample/CodeExample.js x: 21 commits (all time) y: 67 lines of code src/components/CodeExample/index.js x: 15 commits (all time) y: 2 lines of code src/components/Container/Container.js x: 31 commits (all time) y: 19 lines of code src/components/ErrorDecoder/ErrorDecoder.js x: 34 commits (all time) y: 82 lines of code src/components/Flex/Flex.js x: 28 commits (all time) y: 41 lines of code src/components/Header/Header.js x: 29 commits (all time) y: 12 lines of code src/components/Layout/Layout.js x: 14 commits (all time) y: 53 lines of code src/components/Layout/index.js x: 14 commits (all time) y: 2 lines of code src/components/LayoutFooter/ExternalFooterLink.js x: 28 commits (all time) y: 33 lines of code src/components/LayoutFooter/FooterLink.js x: 29 commits (all time) y: 21 lines of code src/components/LayoutFooter/FooterNav.js x: 30 commits (all time) y: 31 lines of code src/components/LayoutFooter/SectionLinks.js x: 17 commits (all time) y: 30 lines of code src/components/LayoutHeader/HeaderLink.js x: 32 commits (all time) y: 63 lines of code src/components/LayoutHeader/SearchSvg.js x: 26 commits (all time) y: 18 lines of code src/css/reset.css x: 21 commits (all time) y: 36 lines of code src/pages/404.js x: 27 commits (all time) y: 18 lines of code src/pages/blog/all.html.js x: 34 commits (all time) y: 93 lines of code src/pages/jsx-compiler.html.js x: 30 commits (all time) y: 24 lines of code src/pages/languages.js x: 20 commits (all time) y: 134 lines of code src/pages/versions.js x: 25 commits (all time) y: 61 lines of code src/prism-styles.js x: 30 commits (all time) y: 139 lines of code src/templates/blog.js x: 31 commits (all time) y: 74 lines of code src/templates/codepen-example.js x: 29 commits (all time) y: 55 lines of code src/templates/community.js x: 31 commits (all time) y: 34 lines of code src/templates/components/ExternalLinkSvg/index.js x: 29 commits (all time) y: 24 lines of code src/templates/components/MetaTitle/index.js x: 33 commits (all time) y: 16 lines of code src/templates/components/NavigationFooter/NavigationFooter.js x: 33 commits (all time) y: 103 lines of code src/templates/components/Sidebar/ScrollSyncSection.js x: 21 commits (all time) y: 52 lines of code src/templates/components/Sidebar/Section.js x: 43 commits (all time) y: 106 lines of code src/templates/components/Sidebar/Sidebar.js x: 30 commits (all time) y: 59 lines of code src/templates/docs.js x: 31 commits (all time) y: 38 lines of code src/templates/tutorial.js x: 34 commits (all time) y: 37 lines of code src/types.js x: 22 commits (all time) y: 30 lines of code src/utils/createCanonicalUrl.js x: 16 commits (all time) y: 3 lines of code src/utils/createLink.js x: 34 commits (all time) y: 113 lines of code src/utils/findSectionForPath.js x: 28 commits (all time) y: 28 lines of code src/utils/isItemActive.js x: 33 commits (all time) y: 21 lines of code src/utils/patchDOMForGoogleTranslate.js x: 16 commits (all time) y: 33 lines of code src/utils/sectionList.js x: 34 commits (all time) y: 16 lines of code src/utils/slugify.js x: 28 commits (all time) y: 5 lines of code src/utils/toCommaSeparatedList.js x: 28 commits (all time) y: 4 lines of code static/js/jsfiddle-integration-babel.js x: 14 commits (all time) y: 10 lines of code content/languages.yml x: 56 commits (all time) y: 192 lines of code content/footerNav.yml x: 15 commits (all time) y: 40 lines of code content/tutorial/nav.yml x: 9 commits (all time) y: 111 lines of code crowdin.yaml x: 4 commits (all time) y: 85 lines of code content/acknowledgements.yml x: 1 commits (all time) y: 1130 lines of code
1130.0
lines of code
  min: 2.0
  average: 65.5
  25th percentile: 10.0
  median: 30.0
  75th percentile: 70.0
  max: 1130.0
0 111.0
commits (all time)
min: 1.0 | average: 29.83 | 25th percentile: 18.0 | median: 26.0 | 75th percentile: 33.0 | max: 111.0

File Size vs. Contributors (all time): 103 points

src/components/Banner/Banner.js x: 5 contributors (all time) y: 172 lines of code src/html.js x: 19 contributors (all time) y: 126 lines of code content/versions.yml x: 16 contributors (all time) y: 64 lines of code plugins/gatsby-source-react-error-codes/gatsby-node.js x: 11 contributors (all time) y: 23 lines of code src/components/LayoutFooter/Footer.js x: 33 contributors (all time) y: 132 lines of code src/components/MarkdownPage/MarkdownPage.js x: 27 contributors (all time) y: 141 lines of code plugins/gatsby-transformer-versions-yaml/create-redirects.js x: 4 contributors (all time) y: 48 lines of code content/authors.yml x: 17 contributors (all time) y: 111 lines of code src/site-constants.js x: 25 contributors (all time) y: 4 lines of code content/community/nav.yml x: 11 contributors (all time) y: 44 lines of code content/headerNav.yml x: 6 contributors (all time) y: 13 lines of code plugins/gatsby-transformer-versions-yaml/gatsby-node.js x: 7 contributors (all time) y: 25 lines of code static/html/single-file-example.html x: 9 contributors (all time) y: 19 lines of code gatsby-browser.js x: 7 contributors (all time) y: 10 lines of code src/components/Banner/index.js x: 4 contributors (all time) y: 2 lines of code src/components/LayoutHeader/Header.js x: 22 contributors (all time) y: 251 lines of code src/components/MarkdownHeader/MarkdownHeader.js x: 14 contributors (all time) y: 28 lines of code src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js x: 17 contributors (all time) y: 178 lines of code src/pages/index.js x: 26 contributors (all time) y: 375 lines of code src/theme.js x: 24 contributors (all time) y: 391 lines of code gatsby-config.js x: 20 contributors (all time) y: 171 lines of code plugins/gatsby-transformer-home-example-code/gatsby-node.js x: 9 contributors (all time) y: 29 lines of code src/components/FeedbackForm/index.js x: 3 contributors (all time) y: 2 lines of code src/components/TitleAndMetaTags/TitleAndMetaTags.js x: 16 contributors (all time) y: 62 lines of code src/components/LayoutHeader/DocSearch.js x: 12 contributors (all time) y: 85 lines of code src/pages/acknowledgements.html.js x: 17 contributors (all time) y: 16 lines of code gatsby-node.js x: 11 contributors (all time) y: 5 lines of code gatsby/createPages.js x: 7 contributors (all time) y: 121 lines of code gatsby/onCreateNode.js x: 10 contributors (all time) y: 58 lines of code gatsby/onCreateWebpackConfig.js x: 4 contributors (all time) y: 14 lines of code plugins/gatsby-remark-header-custom-ids/gatsby-client.js x: 5 contributors (all time) y: 26 lines of code plugins/gatsby-remark-header-custom-ids/gatsby-ssr.js x: 5 contributors (all time) y: 70 lines of code plugins/gatsby-remark-header-custom-ids/index.js x: 5 contributors (all time) y: 51 lines of code plugins/gatsby-transformer-authors-yaml/gatsby-node.js x: 5 contributors (all time) y: 22 lines of code scripts/generateHeadingIDs.js x: 5 contributors (all time) y: 61 lines of code src/components/ButtonLink/ButtonLink.js x: 10 contributors (all time) y: 65 lines of code src/components/ButtonLink/index.js x: 9 contributors (all time) y: 2 lines of code src/components/CodeEditor/CodeEditor.js x: 25 contributors (all time) y: 226 lines of code src/components/CodeEditor/index.js x: 10 contributors (all time) y: 2 lines of code src/components/CodeExample/CodeExample.js x: 6 contributors (all time) y: 67 lines of code src/components/CodeExample/index.js x: 5 contributors (all time) y: 2 lines of code src/components/Container/Container.js x: 11 contributors (all time) y: 19 lines of code src/components/ErrorDecoder/ErrorDecoder.js x: 14 contributors (all time) y: 82 lines of code src/components/Header/Header.js x: 11 contributors (all time) y: 12 lines of code src/components/Layout/Layout.js x: 4 contributors (all time) y: 53 lines of code src/components/LayoutFooter/ExternalFooterLink.js x: 11 contributors (all time) y: 33 lines of code src/components/LayoutFooter/FooterLink.js x: 12 contributors (all time) y: 21 lines of code src/components/LayoutFooter/FooterNav.js x: 13 contributors (all time) y: 31 lines of code src/components/LayoutFooter/SectionLinks.js x: 4 contributors (all time) y: 30 lines of code src/components/LayoutHeader/HeaderLink.js x: 12 contributors (all time) y: 63 lines of code src/components/LayoutHeader/SearchSvg.js x: 10 contributors (all time) y: 18 lines of code src/css/reset.css x: 6 contributors (all time) y: 36 lines of code src/pages/blog/all.html.js x: 13 contributors (all time) y: 93 lines of code src/pages/languages.js x: 8 contributors (all time) y: 134 lines of code src/prism-styles.js x: 11 contributors (all time) y: 139 lines of code src/templates/blog.js x: 15 contributors (all time) y: 74 lines of code src/templates/codepen-example.js x: 10 contributors (all time) y: 55 lines of code src/templates/community.js x: 15 contributors (all time) y: 34 lines of code src/templates/components/ChevronSvg/index.js x: 11 contributors (all time) y: 30 lines of code src/templates/components/MetaTitle/index.js x: 13 contributors (all time) y: 16 lines of code src/templates/components/NavigationFooter/NavigationFooter.js x: 15 contributors (all time) y: 103 lines of code src/templates/components/Sidebar/ScrollSyncSection.js x: 9 contributors (all time) y: 52 lines of code src/templates/components/Sidebar/Section.js x: 17 contributors (all time) y: 106 lines of code src/templates/components/Sidebar/Sidebar.js x: 12 contributors (all time) y: 59 lines of code src/templates/docs.js x: 15 contributors (all time) y: 38 lines of code src/templates/tutorial.js x: 16 contributors (all time) y: 37 lines of code src/types.js x: 7 contributors (all time) y: 30 lines of code src/utils/createLink.js x: 13 contributors (all time) y: 113 lines of code src/utils/isItemActive.js x: 13 contributors (all time) y: 21 lines of code src/utils/loadScript.js x: 8 contributors (all time) y: 11 lines of code src/utils/patchDOMForGoogleTranslate.js x: 4 contributors (all time) y: 33 lines of code src/utils/sectionList.js x: 14 contributors (all time) y: 16 lines of code src/utils/toCommaSeparatedList.js x: 11 contributors (all time) y: 4 lines of code static/js/jsfiddle-integration-babel.js x: 4 contributors (all time) y: 10 lines of code content/languages.yml x: 10 contributors (all time) y: 192 lines of code content/tutorial/nav.yml x: 8 contributors (all time) y: 111 lines of code crowdin.yaml x: 4 contributors (all time) y: 85 lines of code content/acknowledgements.yml x: 1 contributors (all time) y: 1130 lines of code
1130.0
lines of code
  min: 2.0
  average: 65.5
  25th percentile: 10.0
  median: 30.0
  75th percentile: 70.0
  max: 1130.0
0 33.0
contributors (all time)
min: 1.0 | average: 10.8 | 25th percentile: 6.0 | median: 10.0 | 75th percentile: 13.0 | max: 33.0

File Size vs. Commits (30 days): 0 points

No data for "commits (30d)" vs. "lines of code".

File Size vs. Contributors (30 days): 0 points

No data for "contributors (30d)" vs. "lines of code".

File Size vs. Commits (90 days): 2 points

src/components/Banner/Banner.js x: 1 commits (90d) y: 172 lines of code src/html.js x: 1 commits (90d) y: 126 lines of code
172.0
lines of code
  min: 126.0
  average: 149.0
  25th percentile: 126.0
  median: 149.0
  75th percentile: 172.0
  max: 172.0
0 1.0
commits (90d)
min: 1.0 | average: 1.0 | 25th percentile: 1.0 | median: 1.0 | 75th percentile: 1.0 | max: 1.0

File Size vs. Contributors (90 days): 2 points

src/components/Banner/Banner.js x: 1 contributors (90d) y: 172 lines of code src/html.js x: 1 contributors (90d) y: 126 lines of code
172.0
lines of code
  min: 126.0
  average: 149.0
  25th percentile: 126.0
  median: 149.0
  75th percentile: 172.0
  max: 172.0
0 1.0
contributors (90d)
min: 1.0 | average: 1.0 | 25th percentile: 1.0 | median: 1.0 | 75th percentile: 1.0 | max: 1.0