{"id":23065796,"url":"https://github.com/ullaskunder3/react","last_synced_at":"2025-04-03T08:49:03.916Z","repository":{"id":153853012,"uuid":"402553118","full_name":"ullaskunder3/react","owner":"ullaskunder3","description":null,"archived":false,"fork":false,"pushed_at":"2021-09-24T19:41:40.000Z","size":1643,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T22:25:30.316Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ullaskunder3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-02T20:23:08.000Z","updated_at":"2022-01-29T07:00:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"5c17b94f-16f6-42b9-9c86-f6761b671a23","html_url":"https://github.com/ullaskunder3/react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2Freact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2Freact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2Freact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ullaskunder3%2Freact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ullaskunder3","download_url":"https://codeload.github.com/ullaskunder3/react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246970337,"owners_count":20862508,"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":[],"created_at":"2024-12-16T05:10:08.186Z","updated_at":"2025-04-03T08:49:03.907Z","avatar_url":"https://github.com/ullaskunder3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React\n\nLets learn building large react app by building smaller react components and then composing them together\n\nReact uses JavaScript Object to buid UI interface\n\n- Using **create-react-app** command\n- create-react-app quickly setup projects without configuring, so you do not have to setup your project by yourself.\n  - Using npm or npx: `npx create-react-app project-name`\n  - This will install mainly `react`, `react-dom` and `react-script`\n    - `react-script` setup **babel** (for js syntax), **webpack**, **dev-server** (auto reload functionality)\n\nOR\n\n- Creating react app from scratch\n\n## Complete react from scratch\n\n- Create folder structure\n\n```cmd\nreact-proj\n|\n├───public\n│   |└───script\n|   |    └─── app.js\n|   └─── index.html\n|\n└───src\n    └─── index.js\n\n```\n\nWe will need `live-server`\n\nThis is a little development server with live reload capability\nYou should probably install this globally by using `-g` flag.\n\n```bash\nnpm install -g live-server\n```\n\n- Create `index.js` in `src` folder where we write all the react code\n\n- Create `index.html` \u0026 `script` folder inside public folder, Add app.js in script folder\n\n- Last do =\u003e `npm install` with package.json it will install all the required dependencies\n\n- In the `src` /index.js add this basic code\n\n```jsx\nconst template = \u003ch1\u003eHeading\u003c/h1\u003e;\n\nReactDOM.render(template, document.getElementById(\"app\"));\n```\n\n## Compiling the file\n\n- We are telling babel that we have written react code in src\\index.js and out file to public\\srcipt\\app.js\n\n- We will use presets env, react :\n  Babel preset-env is a preset that compiles down to a minimum of ES5 ( preset-es2015 )\n\n- To compile a file every time that you change it, use the `--watch` or `-w`\n\n  - In the `ps OR cmd` start `babel` by\n\n    ```ps\n    ❯ babel .\\src\\index.js --out-file=public\\script\\app.js --presets=env,react --watch\n    ```\n\n  - In the `bash` start `babel` by\n\n    ```bash\n    babel src/index.js --out-file=public/script/app.js --presets=env,react --watch\n    ```\n\n## Live server\n\nopen another terminal `execute the command to to run the file`\n\n```bash\nlive-server public/\n```\n\n## Component\n\n- Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.\n\n- Conceptually, components are like JavaScript functions.\n\nES6 class to define a component:\n\n```jsx\nclass Welcome extends React.Component {\n  render() {\n    return \u003ch1\u003eHello\u003c/h1\u003e;\n  }\n}\n```\n\nExample. 1\n\n```jsx\nclass NameList extends React.Component {\n  render() {\n    const people = [{ name: \"ullas\" }, { name: \"kunder\" }, { name: \"Villas\" }];\n    return (\n      \u003cul\u003e\n        {people.map((person) =\u003e (\n          \u003cli key={person.name}\u003e{person.name}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cNameList /\u003e, document.getElementById(\"app\"));\n```\n\nExample. 1.1\n\n```jsx\nclass Header extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eHeader Component\u003c/h1\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nclass NameList extends React.Component {\n  render() {\n    const people = [\n      { name: \"Ullas\" },\n      { name: \"Captain\" },\n      { name: \"America\" },\n    ];\n    return (\n      \u003cul\u003e\n        \u003cp\u003eList Component\u003c/p\u003e\n\n        {people.map((person) =\u003e (\n          \u003cli key={person.name}\u003e{person.name.toUpperCase()}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    );\n  }\n}\n// creating button component\nclass Button extends React.Component {\n  render() {\n    return \u003cbutton\u003eAdd\u003c/button\u003e;\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"app\"));\n```\n\n## Nesting Components\n\nExample. 2\n\n```js\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cHeader /\u003e\n\n        \u003cNameList /\u003e\n        {/* react components are reusabe */}\n        \u003cNameList /\u003e\n\n        \u003cButton /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nclass Header extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eHeader Component\u003c/h1\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nclass NameList extends React.Component {\n  render() {\n    const people = [\n      { name: \"Ullas\" },\n      { name: \"Captain\" },\n      { name: \"America\" },\n    ];\n    return (\n      \u003cul\u003e\n        \u003cp\u003eList Component\u003c/p\u003e\n\n        {people.map((person) =\u003e (\n          \u003cli key={person.name}\u003e{person.name.toUpperCase()}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    );\n  }\n}\n// creating button component\nclass Button extends React.Component {\n  render() {\n    return \u003cbutton\u003eAdd\u003c/button\u003e;\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"app\"));\n```\n\n## Component Props\n\n`Props` is a special keyword in React, which is used for passing data from one component to another.\n\n- props represent \"read-only\" data that are immutable.\n\nExample. 3\n\n```jsx\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cHeader title=\"Header Title\" /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nclass Header extends React.Component {\n  render() {\n    // this is a reference to the current instance of this component\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003e{this.props.title}\u003c/h1\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nImportant part here is the data with props are being passed in a `uni-directional flow` down the stream. (one way from parent to child)\n\nExample. 3.1\n\n```jsx\nclass App extends React.Component {\n  render() {\n    // Lets use reference\n    const title = \"Header Title\";\n    const subTitle = \"Sub Title\";\n    const people = [\n      { name: \"Ullas\" },\n      { name: \"Captain\" },\n      { name: \"America\" },\n    ];\n    return (\n      \u003cdiv\u003e\n        \u003cHeader title={title} subTitle={subTitle} /\u003e\n        \u003cNameList nameList={people} /\u003e\n        \u003cButton /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nPassing data to Child component using this.props.nameOFTheKey\n\n- When creating a list in the UI from an array with JSX, you should add a key prop to each child and to any of its’ children.\n\n- Ex: `\u003cli key=\"uniqueId1\" \u003eItem1\u003c/li\u003e`\n\n- React uses the key prop create a relationship between the component and the DOM element. The library uses this relationship to determine whether or not the component should be re-rendered.\n\n```jsx\nclass Header extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003e{this.props.title.toUpperCase()}\u003c/h1\u003e\n        \u003ch3\u003e{this.props.subTitle}\u003c/h3\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n// Name list component\nclass NameList extends React.Component {\n  render() {\n    console.log(this.props.nameList);\n    return (\n      \u003cul\u003e\n        \u003cp\u003eList Component\u003c/p\u003e\n\n        {/**\n         * Warning: Each child in a list should have a unique \"key\" prop.\n         */}\n\n        {this.props.nameList.map((person) =\u003e (\n          \u003cli key={person.name}\u003e{person.name}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    );\n  }\n}\n```\n\nIn short, a key should be:\n\n- `Unique` - A key cannot be identical to that of a sibling component.\n- `Static` - A key should not ever change between renders.\n\n## Lets Clean the index.js and lets create soemthing usefull\n\n!Important concepts\n\n- Props: Which allow passing data into the components\n\n- Functional Components: An Alternative way to create components\n\n- Controlled components: Allow use to hook up the forms in your application to the component state\n\n## Task 1\n\n![component Project](project/task1.png)\n\n- [ ] Creating App component inside index.js\n\n- [ ] Create render() method\n\n- [ ] Inside render() Creat array of object with object Properties\n\n```js\n id: \"userID\",\n name: \"User Name\",\n email: \"useremailid@gmail.com\",\n```\n\n```jsx\nclass App extends React.Component {\n  render() {\n    const developerlist = [\n      {\n        id: \"DevJr1\",\n        name: \"Ullas Kunder\",\n        email: \"ullaskunder3@gmail.com\",\n        avatarUrl: \"https://randomuser.me/api/portraits/med/men/1.jpg\",\n      },\n    ];\n    return (\n      \u003cdiv\u003e\n        \u003cDeveloperList developerlist={developerlist} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n- [ ] Create Class DeveloperList\n\n- [ ] Creating Props are arguments passed into React components\n\n```jsx\nclass DeveloperList extends React.Component {\n  render() {\n    return (\n      \u003col className=\"developer-list\"\u003e\n        {this.props.developerlist.map((developer) =\u003e (\n          \u003cli key={developer.id} className=\"developer-item\"\u003e\n            \u003cdiv\n              className=\"developer-avatar\"\n              style={{ backgroundImage: `url(${developer.avatarUrl})` }}\n            /\u003e\n\n            \u003cdiv className=\"developer-details\"\u003e\n              \u003cp\u003e {developer.name} \u003c/p\u003e\n              \u003cp\u003e {developer.email} \u003c/p\u003e\n            \u003c/div\u003e\n\n            \u003cbutton className=\"contact-remove\"\u003e\u003c/button\u003e\n          \u003c/li\u003e\n        ))}\n      \u003c/ol\u003e\n    );\n  }\n}\n```\n\n- [ ] ReactDOM.render() currently returns a reference to the root\n\n```jsx\n//reference root is =\u003e 'app' in my case\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"app\"));\n```\n\n- [ ] Compiling the file using `babel` and livereload using `live-server`\n  - Using babel [👆 To the Top](#compiling-the-file)\n  - Using live-server [👆 To the Top](#live-server)\n\n## Lets Recreate the developer list\n\n## One React Component per File\n\nConvention of one React component file, and the component should always be the default export.\n\n- [ ] Next we will install dev dependencies and loaders\n\n```bash\nnpm install react react-dom\n```\n\nThe `-D` flag is the shortcut for: `--save-dev`\n\n```bash\nnpm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli\n```\n\n- `@babel /core`: Babel functionality of converting ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments resides at @babel/core\n\n- `@babel /preset-env`: A smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).\n\n- `@babel /preset-react`: The unique selling point with babel-preset-env is that you can define what browsers you support\n  By default, babel-preset-env just installs all ES6 plugin you’ll need. But this can bloat up your bundle.\n\n- `babel-loader`: Babel loader is used to convert code written in modern flavors and supersets of JavaScript into plain old JavaScript code supported by older browsers. Thanks to Babel loader we can enjoy new JavaScript syntax and write our code using EcmaScript 2015 and even JSX (React).\n\n## Webpack\n\n- Webpack\n\n  Every file used in our project is a Module\n\n  `./App.js`\n\n  ```js\n  export default App;\n  ```\n\n  `./index.js`\n\n  ```js\n  import App from \"./App\";\n  ```\n\n  Its simply bundle up your multiple file and create a sigle file\n\n- **Webpack Main Concepts**\n\n  - `Entry`: The entry point where its determines which other modules and libraries that entry point depends on (directly and indirectly) and includes them in the graph until no dependency is left. By default, the entry property is set to `./src/index.js`\n\n  - `Output`: The output property instructs webpack where to put the bundle(s) and what name to use for the file(s). The default value for this property is `./dist/main.js`\n\n  - `Loaders`: by default, webpack only understands JavaScript and JSON files. To process other types of files and convert them into valid modules, `webpack uses loaders`. Loaders transform the source code of non-JavaScript modules\n\n  - `Mode`: Deuring the development of application we work with two types of source code — one for the `development build` and one for the `production build`. Webpack allows us to set which one we want to be produced by changing the mode parameter to development, production or none.\n\n  - `Exclude`: which defines the files that shouldn’t be processed from the loader(s), if we have such.\n\n  - `Test`: which describes what kind of files should be transformed. with regular expression\n\n  - `use`: Which tells which loader(s) should be used against the matched modules. Here, we can also set the loader options, as we’ve just done with the presets option.\n\n- .babelrc is optional we can add the required presets in the `use.options`\n\n- We need **\"path\"** module\n  The path module provides utilities for working with file and directory paths. It can be accessed using:\n\n`./webpack.config.js`\n\n```js\n// 1.Enter point of application\n// 2.Where to put the output file\n\nconst path = require(\"path\");\n\nmodule.exports = {\n  entry: \"./src/index.js\",\n  mode: \"development\",\n  output: {\n    path: path.join(__dirname, \"public/script\"),\n    filename: \"bundle.js\",\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: {\n          loader: \"babel-loader\",\n\n          options: {\n            presets: [\"@babel/react\", \"@babel/env\"],\n          },\n          // ---comment: for options we can create seperate .babelrc ---\n        },\n      },\n    ],\n  },\n};\n```\n\n```cmd\n├───project\n│       task1.png\n│\n├───public\n│   │   index.html\n│   │   style.css\n│   │\n│   └───script\n│           app.js\n│           bundle.js\n│\n├───src\n|     App.js\n|     DeveloperList.js\n|     index.js\n|\n├───package.json\n├───webpack.config.js\n└───.babelrc (optional)\n\n```\n\n`App.js`\n\n```js\nimport React from \"react\";\n\nimport DeveloperList from \"./DeveloperList.js\";\n\nconst developerlist = [\n  {\n    id: \"DevJr1\",\n    name: \"Ullas Kunder\",\n    email: \"ullaskunder3@gmail.com\",\n    avatarUrl: \"https://randomuser.me/api/portraits/med/men/1.jpg\",\n  },\n];\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cDeveloperList developerlist={developerlist} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\nexport default App;\n```\n\n`DeveloperList.js`\n\n```js\nimport React from \"react\";\n\nclass DeveloperList extends React.Component {\n  render() {\n    console.log(this.props);\n    return (\n      \u003col className=\"developer-list\"\u003e\n        {this.props.developerlist.map((developer) =\u003e (\n          \u003cli key={developer.id} className=\"developer-item\"\u003e\n            \u003cdiv\n              className=\"developer-avatar\"\n              style={{\n                backgroundImage: `url(${developer.avatarUrl})`,\n              }}\n            /\u003e\n            \u003cdiv className=\"developer-details\"\u003e\n              \u003cspan\u003e{developer.id}\u003c/span\u003e\n              \u003cp\u003e{developer.name}\u003c/p\u003e\n              \u003cp\u003e{developer.email}\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cbutton className=\"contact-remove\"\u003e\u003c/button\u003e\n          \u003c/li\u003e\n        ))}\n      \u003c/ol\u003e\n    );\n  }\n}\n//exporting Component\nexport default DeveloperList;\n```\n\n`index.js`\n\n```js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"app\"));\n```\n\n## Run the build\n\n```bash\nnpm run build\n```\n\nStart server to serve application files\n\n```bash\nnpm run serve\n```\n\n## Stateless Functional Component\n\n`functional components` transpile down to less code than class components, which means functional components = smaller bundles:\n\n- It accepts properties (props) in a function and returns HTML (JSX).\n\n- No class keyword\n\n- No this Keyword\n\n- NO render() method\n\nexample:\n\n```js\nfunction Example(props) {\n  return \u003cp\u003eHello there, {props.name}\u003c/p\u003e;\n}\n// This is the same example but as an arrow function.\nconst Example = (props) =\u003e {\n  return \u003cp\u003eHello there, {props.name}\u003c/p\u003e;\n};\n```\n\n- Lets Convert the DeveloperList Class component to functional component\n\n```js\nfunction DeveloperList(props) {\n  return (\n    \u003col className=\"developer-list\"\u003e\n      {props.developerlist.map((developer) =\u003e (\n        \u003cli key={developer.id} className=\"developer-item\"\u003e\n          \u003cdiv\n            className=\"developer-avatar\"\n            style={{ backgroundImage: `url(${developer.avatarUrl})` }}\n          /\u003e\n\n          \u003cdiv className=\"developer-details\"\u003e\n            \u003cspan\u003e{developer.id}\u003c/span\u003e\n            \u003cp\u003e{developer.name}\u003c/p\u003e\n            \u003cp\u003e{developer.email}\u003c/p\u003e\n          \u003c/div\u003e\n\n          \u003cbutton className=\"contact-remove\"\u003e\u003c/button\u003e\n        \u003c/li\u003e\n      ))}\n    \u003c/ol\u003e\n  );\n}\n```\n\n### Run The Build again [🚀To the Top](#run-the-build)\n\n## Lets see how to add state to a components\n\n- `props` \u0026 `state` are both plain JavaScript objects.\n\n- `props` get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).\n\n- A component's state represents `mutable data`. When state changes, the component responds by re-rendering. State is managed internally by the component itself and is meant to change over time.\n\nexample:\n\n```js\nclass HeaderComp extends React.Component {\n  state = {\n    username: \"ullas\",\n  };\n  render() {\n    return \u003cp\u003eUserName: {this.state.username}\u003c/p\u003e;\n  }\n}\n```\n\nlets change:\n\n```js\nclass App extends React.Component {\n  state = {\n    developerlist: [\n      {\n        id: \"DevJr1\",\n        name: \"Ullas Kunder\",\n        email: \"ullaskunder3@gmail.com\",\n        avatarUrl: \"https://randomuser.me/api/portraits/med/men/1.jpg\",\n      },\n    ],\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        {/* passing state */}\n        \u003cDeveloperList developerlist={this.state.developerlist} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Updating state\n\nUsing Helper method setState(), setState is `asynchronous`\n\n- `setState()` schedules an update to a component’s state object. When state changes, the component responds by re-rendering.\n- `setState()` enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state.\n\n- The fact that setState causes reconciliation(the process of re-rendering the components tree) is base of the next property — setState is asynchronous. This allows us to have multiple calls to setState in a single scope and not trigger not needed re-renders of the whole tree.\n\n### setState passing function as its parameter\n\n```js\nthis.setState((prevState) =\u003e {\n  counter: prevState.value + 1;\n});\n```\n\n- The object returned from this function will be merged with current state to form the new state of component\n\n### setState passing object as its parameter\n\n```js\nthis.setState({\n  userName: \"ullas\",\n});\n```\n\n- The object returned from this function will be merged with current state to form the new state of component\n\nWhen to use `this.setState(()=\u003e{})` vs `this.setState({})`\n\nIf we are updating the new state based on the current state then use function\n\n```js\nthis.setState(() =\u003e {});\n```\n\nif not then pass object as it parameter\n\n```js\nthis.setState({\n  userName: \"ullas\",\n});\n```\n\n---\n\nFor updating the developer list\n\n- [ ] creating function in App component where the state is.\n\n  - function will responsible for updating the state\n\n- [ ] Then pass the function to DeveloperList component as a prop\n\n- [ ] Then inside the Developer hook up with button onclick\n\n`App.js`\n\n```js\nremoveDev = (dev)=\u003e{\n        this.setState((prevState)=\u003e({\n            developerlist: prevState.developerlist.filter((user)=\u003e user.id !== dev.id )\n        }))\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                {/* passing state */}\n                \u003cDeveloperList\n                onDeleteDev = {this.removeDev}\n                developerlist={ this.state.developerlist }\n                /\u003e\n            \u003c/div\u003e\n        )\n    }\n```\n\n`DeveloperList.js`\n\n```js\n\u003cbutton\n  onClick={() =\u003e props.onDeleteDev(developer)}\n  className=\"contact-remove\"\n\u003e\u003c/button\u003e\n```\n\n## webpack sourcemap\n\nChoose a style of source mapping to enhance the debugging process. These values can affect build and rebuild speed dramatically.\n\n`webpack.config.js`\n\n```js\ndevtool: 'eval-source-map'\n```\n\n## webpack serve\n\n`webpack-dev-server` (which is used to serve the public directory and reload the changes in the browser when we make any change in the code).\n\nLets just make little bit changes in the code\n\n1. Lets build the __bundle.js__ directely in `public` folder not in script folder\n  \n    So in 🦉 `webpack.config.js`\n\n    change the path from `path.join(__dirname, 'public/script')` to `path.join(__dirname, 'public')`\n\n    ```webpack.config.js\n        output: {\n          path: path.join(__dirname, 'public'),\n          filename: 'bundle.js',\n        },\n    ```\n\n2. Lets add new script in `package.json`\n\n    ```package.json\n        \"scripts\": {\n          \"start\": \"webpack serve\",\n          \"build\": \"webpack\"\n        },\n    ```\n\n3. Lets add `bundle.js` in `index.html`\n\n    ```index.html\n      \u003cscript src=\"bundle.js\"\u003e\u003c/script\u003e\n    ```\n\n🐱‍👤=\u003e Check by running the command\n\n- Build the bundle.js from the workspace terminal\n\n  ```npm\n    npm run build\n  ```\n  \n- 🤩...last\n\n  ```npm\n    npm start\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fullaskunder3%2Freact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fullaskunder3%2Freact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fullaskunder3%2Freact/lists"}