{"id":26780772,"url":"https://github.com/dhruvparmar2310/reactjs","last_synced_at":"2026-05-06T19:32:34.703Z","repository":{"id":65523954,"uuid":"582565658","full_name":"dhruvparmar2310/ReactJS","owner":"dhruvparmar2310","description":"It will cover all you need to know in ReactJS.","archived":false,"fork":false,"pushed_at":"2023-02-03T04:39:11.000Z","size":621,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-07T09:23:55.719Z","etag":null,"topics":["javascript","react","reactjs","webpack"],"latest_commit_sha":null,"homepage":"https://dhruvparmar2310.github.io/ReactJS/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dhruvparmar2310.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-27T08:18:39.000Z","updated_at":"2023-01-30T10:00:39.000Z","dependencies_parsed_at":"2023-02-16T18:32:02.491Z","dependency_job_id":null,"html_url":"https://github.com/dhruvparmar2310/ReactJS","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhruvparmar2310%2FReactJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhruvparmar2310%2FReactJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhruvparmar2310%2FReactJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhruvparmar2310%2FReactJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dhruvparmar2310","download_url":"https://codeload.github.com/dhruvparmar2310/ReactJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246150443,"owners_count":20731419,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","reactjs","webpack"],"created_at":"2025-03-29T07:17:48.517Z","updated_at":"2026-05-06T19:32:29.682Z","avatar_url":"https://github.com/dhruvparmar2310.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"theme=cayman\n# ReactJS with Dhruv Parmar\nIt will cover all you need to know in ReactJS.\n\n## What is CRA in React JS ?\n\nCRA stands for Create-react-app through npm or npx. Create-react-app is an official way to create react single page application. [`npx`](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) means Node Package eXecute. And it also provides to build `create-react-app`, in the `npm` versions which are higher than `5.2.+`. \n\nBy creating react app through `npx create-react-app`, there is no need to create config file of [`webpack`](https://webpack.js.org/concepts/#entry) and [`Babel`](https://babeljs.io/docs/en/). It provides the hidden feature of `webpack` and `Babel`, which is installed by `npx` when you run `npx create-react-app my-app` command. `npx` will install all the latest versions of package.\n\n\u003e *I prefer to read the official documentation of [Create-react-app](https://create-react-app.dev/docs/getting-started/).*\n\n\n### To create your first react app with `npx` :\n```javascript\nnpx create-react-app my-first-app\ncd my-first-app\nnpm start\n```\n\nAfter running the above commands, you will have some files and directory created automatically by it. It will create `node_modules` directory, in which you will find all the packages installed and what's ever that packages will have `dependencies` will be all installed with it. Other files and directories are `src`, [`package.json`](https://docs.npmjs.com/cli/v9/configuring-npm/package-json), `.gitignore`, `public`, and `README.md` file.\n\n\n## Folder Structure :\nAfter running `npx create-react-app my-first-app`, your folder structure should looks something like this:\n\n```\nmy-app/\n  README.md\n  node_modules/\n  package.json\n  public/\n    index.html\n    favicon.ico\n  src/\n    App.css\n    App.js\n    App.test.js\n    index.css\n    index.js\n    logo.svg\n```\n\nHere `public/index.html` is your default page template. If you wanna create your own templates you can [visit here](https://create-react-app.dev/docs/custom-templates) for more info. You will also find `src/index.js` which is your entry point of the app. Only files inside `src` are processed by the webpack. So, we also creates `assets` folder inside it.\n\n## Available Scripts :\nAfter running `npx create-react-app my-first-app` command, you will have few scripts with you to perform it:\n1. start\n2. test\n3. build\n4. eject\n\n### 1.  `npm start` :\nIt is used to run your app in development mode or you can say, it is used to start your packages. If the `scripts` object inside `package.json` doesn't defines a `start` property, npm will run `node server.js` by default.\n\n\u003e *By default it runs on `3000` port of localhost.*\n\n\n### Whats the difference between `npm run start` and `npm start` ?\n---\n`npm start` is the short form for `npm run start`.\n\n\n### 2.  `npm test` :\nLaunches the test runner in the interactive watch mode.\n\n\n### 3. `npm run build` :\n`npm run build` creates a `build` directory with a production build of your app. It does the same tasks which `npm start` does. Instead of checking for available ports and running a development server, the script will execute `build` function which is available in '**react-srcipts/script/build.js**' which will bundle all your seperate files into one **bundle.js** file. It will ensure, wheather your code is optimized and minified to make better performance.\n\n### 4. `npm run eject` :\n\n\u003e *Note: This is one way operation. If you run `npm run eject` once time, you cannot go back.*\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project (react-scripts).\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc.) into your project as dependencies in `package.json`. All the configuration files from `react-scripts` will be copied into your project roots **react-scripts/config/** folder. And then, the **scritps** to run the build will be copied into the **scripts/** folder.\n\nThe dependency will also be moved into your root's `package.json` file. Once you have `ejected` from CRA, you can't undo it. It is mostly used to make your own configuration work on your project.\n\n![Screen shot-1](SS-1.png)\n![Screen shot-2](SS-2.png)\n\n## Development\n\n### Analyzing Bundle Size\n\nSource map explorer analyzes JavaScript bundles using the source maps. This helps you understand where code bloat is coming from. Analyze and debug JavaScript (or Sass or LESS) code bloat through source maps.\n\nThe source map explorer determines which file each byte in your minified code came from. It shows you a treemap visualization to help you debug where all the code is coming from. `.js.map` file is that which is used to debug, and it is present after the build is created '**build/static/js/.js.map**' files.\n\nWhat's ever the error comes, sometimes we can't get from were it is coming, so here the source map comes in picture. We can get that error through source map files.\n\n\n\u003e *[Read this blog to understand it in a better way.](https://www.bugsnag.com/blog/source-maps)*\n\n\nTo add `Source map explorer` to your CRA project, run this :\n```\nnpm i --save-dev source-map-explorer\n```\nThen add `analyze` in `scripts` inside `package.json`:\n```javascript\n\"analyze\": \"source-map-explorer 'build/static/js/*.js'\",\n```\nThen to analyze the bundle run the below commands:\n```\nnpm run build\nnpm run analyze\n```\n\n\n## Using HTTPS in Development\nBy default your app will work on **http://localhost:3000/**, but if you wanna work on **HTTPS**, then follow the steps :\n\n### For Windows : \nAdd this to `start` scripts\n```javascript\nset HTTPS=true\u0026\u0026npm start\n```\n\n### For Linux/MacOS :\nAdd this to `start` scripts\n```javascripts\nHTTPS=true npm start\n```\n\n\u003e *Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.*\n\n![Screen shot-3](SS-3.png)\n\n### To generate SSL Certificate :\n\u003e *[Read this Blog](https://medium.com/swlh/how-to-make-react-js-use-https-in-development-4ead560eff10)*\n\n### So for Custom SSL Certificate\nAdd this to `start` scripts\n\n```javascript\nHTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start\n```\n\n## Adding a Stylesheet\n- [Official Documentation](https://create-react-app.dev/docs/adding-a-stylesheet)\n- [Blog of BEM](https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b)\n- [Explore What is BEM Methodology by its Official Site](https://en.bem.info/methodology/)\n\n## Adding a CSS Module :\nCSS Module is a **CSS file** in which all classNames and animation names are scoped locally by default. CSS Modules are convienient for components that are placed in seperate files. The CSS inside a module is available only for the components that imported it. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format `[filename]\\_[classname]\\_\\_[hash]`. It will not **clashes** if other components with simple `.css` files have same `className`.\n\n### How to create CSS Module file :\nCreate CSS Module with `.module.css` extension.\n\nFor example : create the CSS module file named as `card.module.css`\n```javascript\n.card {\n  width: 300px;\n  color: #f3f3f3;\n  background-color: #2596be;\n  padding: 30px;\n  border-radius: 5px;\n}\n\n.card-img {\n  object-fit: cover;\n  width: 300px;\n  height: 300px;\n}\n\n.card-content {\n  background: #f3f3f3;\n  color: #666;\n  object-fit: cover;\n}\n```\n\nNow `import` the style module in your component, say for example, I have shopping cart website, now I need this style in my `card` component:\n\n\u003e *Card.js*\n\n```javascript\nimport styles from './card.module.css'\n\nconst Card = () =\u003e {\n  return \u003cdiv className={styles.card}\u003e\n            \u003cimg src={} alt={} className={styles.card-img} /\u003e\n            \u003cdiv className={styles.card-content}\u003e\n              \u003ch1\u003eTitle\u003c/h1\u003e\n            \u003c/div\u003e\n         \u003c/div\u003e\n}\n\nexport default Card;\n```\n\n### What is Styled Components :\nThe name itself says, there will be an styled component which can be used like React Components. Styled Component is an library and its unpacked size is **3.17 MB** and there are total **325** files. It also have theme concept, by wrapping your code under `\u003cThemeProvider\u003e`...`\u003c/ThemeProvider\u003e`. With the help of this provider, you can also create a dark mode themes.\n\nFor example: I have an styled component of Title\n\n\u003e *title.css*\n\n```javascript\nconst Title = styled.h1`\n  font-size: 1.5em;\n  color: red;\n`;\n```\n\n\u003e *Home.js*\n\n```javascript\nimport Title from './style/Title/title.css'\n\nconst Home = () =\u003e {\n  return (\n    \u003cTitle\u003eA styled component\u003c/Title\u003e\n  )\n}\n```\n\n## Adding a Sass Stylesheet :\n\u003e *[Official Sass Documentation](https://sass-lang.com/documentation/syntax)*\n\nSass stands for **Syntactically Awesome Style-Sheet**. It is an extension of CSS. It reduce the repetition of CSS code. It was designed by Hampton Catlin. Sass lets you to use features that don't exist in CSS, like `variables`, `nested rules`, `mixin`, `@use`, `@include`, etc. The file extension can be `.scss` or `.sass`.\n\nTo use Sass, you need to install sass:\n```\nnpm install sass\n```\n\nfor example: my website runs on 3 colors than I can create variables in `_variables.scss` files and use it.\n\u003e *_variables.scss*\n\n```javascript\n$primary: #a2b9bc;\n$secondary: #b2ad7f;\n$main: #fff;\n```\n\n### How does Sass Works ?\nA browser does not understand a Sass Code. Therefore, you will need a Sass pre-processor to convert Sass code into css. This process is known as **Transpiling**. \n\nTranspiling translate the sass code automatically at the time of `build`.\n\n### What is Sass Variable ?\nWith Sass, you can store information in variables like `string`, `number`, `colors`, `booleans`, `list`, `nulls`, etc.\n\nsyntax:\n```\n$[variableName]: value;\n```\n\n## Adding a CSS Reset :\nThere is an option in css which is built-in feature: (*not for CSS reset, but this developer's should know.*)\n```javascript\n.home{\n  background: red;\n  margin: 30px auto;\n  padding: 30px;\n  all: unset; /* it will not apply the style even you have given your styles to home */\n}\n```\n\nThere are many ways to Reset CSS, One of the best option I found is [`normalize.css`](https://necolas.github.io/normalize.css/). All the thing you need to do is :\n```\nnpm i normalize.css\n```\n It will install normalize.css file in your project, or you can create `normalize.css` file in the root folder, and paste the content [this](https://necolas.github.io/normalize.css/8.0.1/normalize.css). The main concept of it is, it will remove duplication, reset the style to default.\n \n To use css reset, `@import` it on the `style.css` at the top:\n ```\n @import-normalize /* it will bring to normalize.css file. */\n ```\n\n## What is the use of Public Folder ?\nGenerally, creating the app by `npx create-react-app`, you will be able to see something like `%PUBLIC_URL%` under the link tags in `public/` folder. \n\nFor this you need to know few thnigs:\n- `webpack` will only pre-process the `src` folder, but not the `public` folder.\n- The `webpack` will only minifies the `src` folder, rather than `public`.\n- To use `public` folder, we need to specifiy `%  PUBLIC_URL%` to the link tags\n\nfor example: before the `npm run build`\n```javascript\n\u003clink rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\" /\u003e\n```\n\nafter running `npm run build`\n```javascript\n\u003clink rel=\"manifest\" href=\"/manifest.json\" /\u003e \n```\n\nIt means, if we don't specify `%PUBLIC_URL%` than it will not use that file during `build` process.\n\n## What is Code Splitting ?\nInstead of downloading the entire app before users can use it, code splitting allows you to split your code into small `chunks` which you can then load on demand.\n\nCode-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app. While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load.\n\n### import()\nimport() is the concept of code-splitting, we can use it dynamically.\n\n\u003e *Before:*\n\n```javascript\nimport { add } from './math'\n\nconsole.log(add(10, 20))\n```\n\n\u003e *After:*\n\n```javascript\nimport('./math').then(math =\u003e {\n  console.log(math.add(10, 20))\n})\n```\n\n### What is React.lazy() ?\nlazy() is the concept of code splitting, and this function will render the dynamic `import` as a regular component.\n\n\u003e *Before:*\n\n```javascript\nimport Card from './card'\n```\n\n\u003e *After:*\n\n```javascript\nconst Card = React.lazy(() =\u003e import('./card'));\n```\n\n`React.lazy()` takes a function which must call a dynamic `import()`. This must return a Promise which resolves to a module with a default export containing a React component.\n\nThe lazy component should then be rendered inside a `Suspense` component, which allows us to show some **fallback** content (such as a *loading indicator*) while we’re waiting for the lazy component to load.\n\n### Few things to know about Suspense Component :\n- `\u003cSuspense\u003e` is a first-party React component which is used to wrap other components that might make asynchronous requests. Any time a child component performs some action resulting in a loading state, such as a network request, a wrapping \u003cSuspense\u003e component can toggle its rendering to show a loading UI, like a `\u003cSpinner /\u003e`.\n\n```javascript\n  \u003cSuspense fallback={\u003cLoading /\u003e}\u003e\n    \u003cFetchApi /\u003e\n  \u003c/Suspense\u003e\n```\n\n### What is Error Boundary Component ?\nError Boundary component is the concept of catching the error just like an `try()` and `catch()` method. But it can't catch the error's like *event handler*, *async code*, *server side rendering*. Error Boundary component is used only during development and it should be disabled during production. With the help of it, we can trace the perfect error in console by the perfect path, line number, etc. \n\nIt is default when we are working with `create-react-app`. If you are not using `create-react-app`, you need to specify the plugin in your `Bebal` configuration file. \n\nThey are components used to wrap other components which may throw errors.\n```javascript\n\u003cErrorBoundary fallback={\u003cErrorMessage /\u003e}\u003e\n  \u003cApp /\u003e\n\u003c/ErrorBoundary\u003e\n```\n\nSuspense and ErrorBoundary component will work together. Your Suspense component is wrapped by ErrorBoundary component.\n\nWhen working with Routers, you may write the suspense component as example given below :\n```javascript\nimport React, { Suspense, lazy } from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\n\nconst Home = lazy(() =\u003e import('./routes/Home'));\nconst About = lazy(() =\u003e import('./routes/About'));\n\nconst App = () =\u003e (\n  \u003cRouter\u003e\n    \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n      \u003cRoutes\u003e\n        \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n        \u003cRoute path=\"/about\" element={\u003cAbout /\u003e} /\u003e\n      \u003c/Routes\u003e\n    \u003c/Suspense\u003e\n  \u003c/Router\u003e\n);\n```\n\nAlso cover other blog of [Webpack](/WebPack/README.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhruvparmar2310%2Freactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhruvparmar2310%2Freactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhruvparmar2310%2Freactjs/lists"}