{"id":17043518,"url":"https://github.com/duhaime/react-boilerplate","last_synced_at":"2026-04-16T07:35:47.429Z","repository":{"id":9431230,"uuid":"61380097","full_name":"duhaime/react-boilerplate","owner":"duhaime","description":"Boilerplate template for React.js apps","archived":false,"fork":false,"pushed_at":"2023-03-04T04:01:14.000Z","size":891,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-28T05:27:25.535Z","etag":null,"topics":["boilerplate","react","webpack"],"latest_commit_sha":null,"homepage":"","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/duhaime.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":"2016-06-17T14:34:52.000Z","updated_at":"2021-08-04T23:27:15.000Z","dependencies_parsed_at":"2024-11-29T18:38:20.154Z","dependency_job_id":null,"html_url":"https://github.com/duhaime/react-boilerplate","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/duhaime%2Freact-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duhaime%2Freact-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duhaime%2Freact-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duhaime%2Freact-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/duhaime","download_url":"https://codeload.github.com/duhaime/react-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245045688,"owners_count":20552078,"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":["boilerplate","react","webpack"],"created_at":"2024-10-14T09:29:45.997Z","updated_at":"2026-04-16T07:35:42.408Z","avatar_url":"https://github.com/duhaime.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Boilerplate\n\nThis repository aims to provide a quick way to start React.js applications. To get started, you'll need Node.js installed on your machine.\n\n## Quickstart\n\nTo start a new React.js app, one can run the following commands:\n\n```\n# download the code from this repository\ngit clone https://github.com/duhaime/react-boilerplate\n\n# use the Node package manager (npm) to install the dependencies\nnpm install\n\n# start the webpack development server\nnpm start\n```\n\nIf you run these commands then navigate to `localhost:8081` in a browser, you should see the simple boilerplate within this application.\n\n## Styles\n\nTo gain some intuition about the way React.js apps are organized, open the `/app` directory. There you'll see a file named `main.css` that you can use to set the styles for the application. If you have the webpack dev server running, open `main.css` in a text editor and write:\n\n```\nbody {\n  background: cornsilk;\n}\n```\n\nIf you save the file and return to `localhost:8081` in a browser, you should see the background color of the webpage update. Other CSS rules you write in `main.css` will update the application in a similar way.\n\n## Interactivity\n\nReact.js is meant for building highly interactive applications. To get a taste of how interaction works in React, let's create a button in `/app/main.css`:\n\n```\n.button {\n  padding: 15px;\n  text-align: center;\n  min-width: 100px;\n  background-color: lightsteelblue;\n  display: inline-block;\n  border-radius: 5px;\n  cursor: pointer;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n```\n\nOnce that's done, replace the content of `app/components/Home.jsx` with the following:\n\n```\nvar React = require('react')\n\nvar Home = React.createClass({\n\n  getInitialState() {\n    return {\n      totalCount: 0\n    }\n  },\n\n  incrementCount() {\n    var count = this.state.totalCount;\n    this.setState({totalCount: count+1});\n  },\n\n  render: function() {\n    return (\n      \u003cdiv className=\"home\"\u003e\n        \u003cdiv\u003eThe total count is: {this.state.totalCount}\u003c/div\u003e\n        \u003cdiv className=\"button\" onClick={this.incrementCount}\u003eIncrement Count\u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n});\n\nmodule.exports = Home;\n```\n\nIf you return to `localhost:8081`, you should see your button and a counter. If you click the button you should see the count increases. That's all it takes!\n\n## Getting Started with State\n\nLet's step through each line of the new `App.jsx` file:\n\n```\n// Import the React library into App.jsx\nvar React = require('react')\n\n// Use a method named createClass within the React library to create a\n// class named Home that we'll use in our application\nvar Home = React.createClass({\n\n  // Identify the initial \"state\" of the React application. An application's\n  // state is where you keep track of the status of the application. As users\n  // interact with an app (e.g. click buttons, move sliders, etc.), you will\n  // update values within a component's state\n  getInitialState() {\n    return {\n      totalCount: 0\n    }\n  },\n\n  // Define a function that will update the `totalCount` value\n  // within this component's state\n  incrementCount() {\n\n    // Determine what the current totalCount is by examining the current state\n    // of the `totalCount` variable\n    var count = this.state.totalCount;\n\n    // Update the state of this component by setting the `totalCount` variable\n    // to the value of `count` plus one\n    this.setState({totalCount: count+1});\n  },\n\n  // Define the html elements that are part of this component\n  render: function() {\n    return (\n\n      // Create a container div with the \"home\" class\n      \u003cdiv className=\"home\"\u003e\n\n        // Display the current state of the totalCount variable\n        \u003cdiv\u003eThe total count is: {this.state.totalCount}\u003c/div\u003e\n\n        // Create a div with the class \"button\", and make it so that\n        // when users click this button, we call the `incrementCount` function\n        // defined in this component\n        \u003cdiv className=\"button\" onClick={this.incrementCount}\u003eIncrement Count\u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n});\n\n// Export this component\nmodule.exports = Home;\n```\n\nThere are a few things to note about this component. `getInitialState` is an example of a special function that's defined by the React library. This special function allows you to initialize variables that you define in state. Likewise, `this.setState({variableName: newValue})` is a special bit of code that lets you update the variables in state. You can use these functions to manage the internal state of a component.\n\n## Getting Started with Props\n\nThe last major building block of React.js apps is Props. Props are nothing more than variables from one component's state that are passed to other components. As an example, suppose you wanted to separate the counter from the Home component. You could do so by creating a new file `/app/components/Counter.jsx` and defining the counter logic in that component:\n\n```\n// app/components/Counter.jsx\n\nvar React = require('react')\n\nvar Counter = React.createClass({\n\n  render: function() {\n    return (\n      \u003cdiv className=\"header\"\u003e\n        \u003cdiv\u003eThe total count is: {this.props.totalCount}\u003c/div\u003e\n        \u003cdiv className=\"button\"\n          onClick={this.props.incrementCount}\u003eIncrement Count\u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n});\n\nmodule.exports = Counter;\n```\n\nOnce you've saved the above, you can mount the Counter component within Home.jsx, which should be updated so as to read:\n\n```\n// app/components/Counter.jsx\n\nvar React = require('react')\nvar Counter = require('./Counter')\n\nvar Home = React.createClass({\n\n  getInitialState() {\n    return {\n      totalCount: 0\n    }\n  },\n\n  incrementCount() {\n    var count = this.state.totalCount;\n    this.setState({totalCount: count+1});\n  },\n\n  render: function() {\n    return (\n      \u003cdiv className=\"home\"\u003e\n        \u003cCounter totalCount={this.state.totalCount}\n          incrementCount={this.incrementCount} /\u003e\n      \u003c/div\u003e\n    )\n  }\n});\n\nmodule.exports = Home;\n```\n\nThe Home and Counter components work together to keep track of the `totalCount` variable. That variable's value is initially established in the `getInitialState()` of Home.jsx, and is passed through props to the Counter component. In other words, props are the vehicle through which application state is passed from the Home component to the Counter component.\n\nLikewise, the function `incrementCount` is defined in Home and passed to Counter. By passing this function through props, one can call that function from Counter whenever website visitors click the Increment Count button. That is to say, just like application state can be passed through props, functions and callbacks can also be passed through props.\n\n## Going Further\n\nThe brief guide above is meant only to give you a very quick introduction to React.js. To go further, I recommend the following resources:\n\n\u003cb\u003e[React in 15ish Minutes](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)\u003c/b\u003e: A great video introduction to React.js\n\n\u003cb\u003e[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)\u003c/b\u003e: A plugin for Chrome that allows you to inspect the props and state of each component, which helps tremendously as you're building and troubleshooting applications.\n\n\u003cb\u003e[SurviveJS: Webpack and React](https://www.amazon.com/SurviveJS-Webpack-React-apprentice-master/dp/152391050X/ref=sr_1_1?ie=UTF8\u0026qid=1485442146\u0026sr=8-1\u0026keywords=survivejs)\u003c/b\u003e: A helpful beginner's guide to React and its ecosystem (Babel, Webpack, ES6, etc.)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduhaime%2Freact-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fduhaime%2Freact-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduhaime%2Freact-boilerplate/lists"}