Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/diegohaz/arc
React starter kit based on Atomic Design
https://github.com/diegohaz/arc
atomic-design boilerplate css-in-js isomorphic jest react react-router redux redux-saga starter-kit storybook styled-components universal
Last synced: 4 days ago
JSON representation
React starter kit based on Atomic Design
- Host: GitHub
- URL: https://github.com/diegohaz/arc
- Owner: diegohaz
- Created: 2016-10-09T06:34:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T09:10:40.000Z (almost 3 years ago)
- Last Synced: 2024-10-29T15:17:17.869Z (3 months ago)
- Topics: atomic-design, boilerplate, css-in-js, isomorphic, jest, react, react-router, redux, redux-saga, starter-kit, storybook, styled-components, universal
- Language: JavaScript
- Homepage: https://arc.js.org
- Size: 8.92 MB
- Stars: 2,916
- Watchers: 81
- Forks: 292
- Open Issues: 64
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**ARc** (Atomic React) is a React starter kit based on the [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) methodology. It's progressive, which means that you can start with the basic boilerplate and try the other features when you are comfortable.
- **[Demo](https://arc.js.org)**
- **[Documentation](https://github.com/diegohaz/arc/wiki)**
If you find this useful, please check out Reakit, a toolkit for building composable UI with React.
## Branches
- ### [`master`](https://github.com/diegohaz/arc)
The basic stack with [React](https://facebook.github.io/react/), [Webpack](https://github.com/webpack/webpack), [react-router](https://github.com/ReactTraining/react-router) and [Jest](https://facebook.github.io/jest/).
- ### [`redux`](https://github.com/diegohaz/arc/tree/redux) ([compare](https://github.com/diegohaz/arc/compare/master...redux?diff=split#files_bucket))
Master plus [redux](https://github.com/reactjs/redux), [redux-saga](https://github.com/yelouafi/redux-saga) and [redux-form](https://github.com/erikras/redux-form).
- ### [`redux-ssr`](https://github.com/diegohaz/arc/tree/redux-ssr) ([compare](https://github.com/diegohaz/arc/compare/redux...redux-ssr?diff=split#files_bucket))
Redux plus [Server Side Rendering](https://github.com/reactjs/redux/blob/master/docs/recipes/ServerRendering.md)
## Why
I've been a web developer for the past 14 years and after dealing with IE vs. Netscape wars, `` layouts and flash websites, I can say that we are now living in the best moment in web development. Web components are awesome and React makes it better.
React encourages you to create very small and pure components. However, as your project grows, you will have an increasingly complex components folder. At some point, this will be really huge and hard to maintain.
I had a React project with more than 100 components in the `components` folder. The first approach I tried to organize it was separating the components by domain (described [here](http://marmelab.com/blog/2015/12/17/react-directory-structure.html)), but I realized that most of my components didn't belong to any domain, but were shared. This meant that my problems just moved to the `commons` folder.
The [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) approach comes handy to solve this problem because it considers the reusability through composition, *which is actually what React is*. You will have your minimal/stylish components in one folder, pages in another and so on.
## Setup
### 1. Get the source code
Just clone one of the ARc [branches](#branches):
```sh
$ git clone -b master https://github.com/diegohaz/arc my-app
$ cd my-app
```
You will probably want to remove ARc git history and start a brand new repository:
```sh
$ rm -rf .git
$ git init
```
### 2. Install dependencies
```sh
$ npm install
```
### 3. Run the app
```sh
$ npm run dev
```
It will start the development server with [HMR](https://webpack.github.io/docs/hot-module-replacement) on top of it.
> [http://localhost:3000](http://localhost:3000) — Development server
> [http://localhost:3001](http://localhost:3001) — Webpack assets server (for `redux-ssr` only)
Now you can open [http://localhost:3000](http://localhost:3000) in browser and start developing.
## Contributing
When submitting an issue, use the following patterns in the title for better understanding:
```bash
[v0.3.1-redux] Something wrong is not right # the v0.3.1 release of the redux branch
[redux] Something wrong is not right # the actual code of the redux branch
Something wrong is right # general, related to master or not directly related to any branch
```
PRs are very appreciated. For bugs/features consider creating an issue before sending a PR.
## License
MIT © [Diego Haz](https://github.com/diegohaz)