React-Arc v1.0.0: React starter kit based on Atomic Design

icon
Latest Release: v1.0.0

A lot of things have been changed since the last version, which would make this changelog enormous. If your project is based on older versions of ARc, then it probably isn't worth migrating your whole code base. Only use it on new projects.

General changes:

  • dropped support for fullstack and universal-redux branches (they will be moved to another repository for future reference);
  • created redux-ssr branch to replace universal-redux;
  • changed root directory structure (src -> src-example, src-clean -> src and placed internal scripts in private folder);
  • redesigned home page.
Source code(tar.gz)
Source code(zip)

arclogo

Build Status Coverage Status Gitter chat

ARc (Atomic React) is a React starter kit based on the Atomic Design methodology. It's progressive, which means that you can start with the basic boilerplate and try the other features when you are comfortable.



If you find this useful, please check out Reakit, a toolkit for building composable UI with React.



Branches

Why

I've been a web developer for the past 14 years and after dealing with IE vs. Netscape wars, <table> 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), 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 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:

$ 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:

$ rm -rf .git
$ git init

2. Install dependencies

$ npm install

3. Run the app

$ npm run dev

It will start the development server with HMR on top of it.

http://localhost:3000 — Development server
http://localhost:3001 — Webpack assets server (for redux-ssr only)

Now you can open http://localhost:3000 in browser and start developing.

Contributing

When submitting an issue, use the following patterns in the title for better understanding:

[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

Comments

  • Bump tmpl from 1.0.4 to 1.0.5
    Bump tmpl from 1.0.4 to 1.0.5

    Sep 21, 2021

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Discussion: are people still using Atomic design in 2021?
    Discussion: are people still using Atomic design in 2021?

    Sep 30, 2021

    This repo seems to be the go-to example for using atomic design principles in a React app. We're in the beginning stages of architecting a sizable React Native app. Have many of you migrated away from this design pattern or are you sticking with it?

    Reply
  • Bump url-parse from 1.4.4 to 1.5.3
    Bump url-parse from 1.4.4 to 1.5.3

    Oct 5, 2021

    Bumps url-parse from 1.4.4 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • eslint bug
    eslint bug

    Oct 10, 2021

    eslint don't correctly work with vscode

    Reply
  • Bump follow-redirects from 1.6.1 to 1.14.7
    Bump follow-redirects from 1.6.1 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.6.1 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump shelljs from 0.8.3 to 0.8.5
    Bump shelljs from 0.8.3 to 0.8.5

    Jan 15, 2022

    Bumps shelljs from 0.8.3 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    v0.8.4

    Small patch release to fix a circular dependency warning in node v14. See #973.

    Changelog

    Sourced from shelljs's changelog.

    Change Log

    Unreleased

    Full Changelog

    Closed issues:

    • find returns empty array even though directory has files #922
    • exec() should support node v10 (maxbuffer change) #915
    • grep exit status and extra newlines #900
    • Travis CI currently broken #893
    • Drop node v4 support #873
    • cp -Ru respects the -R but not the -u #808

    Merged pull requests:

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • [master] Added functionality on forms for default props.  Currently a…
    [master] Added functionality on forms for default props. Currently a…

    Mar 30, 2017

    …n error was being thrown if you added a default Prop

    Here is there error that was being thrown:

    Warning: styled.input contains an input of type text with both value and defaultValue props. 
    Input elements must be either controlled or uncontrolled (specify either the value prop, or 
    the defaultValue prop, but not both). Decide between using a controlled or uncontrolled 
    input element and remove one of these props. More info: 
    https://fb.me/react-controlled-components
    

    I just immutably replaced value with defaultValue if defaultValue was specified by user.

    Reply
  • Applying the social login to other applications
    Applying the social login to other applications

    Mar 13, 2017

    I'm using your social login sagas from this project, and wondered if you'd implemented something similar with an OAuth application such as GitHub? For Facebook and Google I see you're injecting the official script and executing it in order to authorize with that service, but how about something like GitHub where a script might not be available?

    I'm asking because in another project I tried to use passport-github but the whole callback URL logic got me into a mess, and your FB/Google saga logic is pretty awesome.

    enhancement help wanted PR welcome 
    Reply
  • Please, test generator-arc
    Please, test generator-arc

    Jan 9, 2017

    Hi, guys, recently I've released the generator-arc branch.

    image

    I have big plans for it, but first I need to make sure this is stable. I'll really appreciate if you guys start to use it on your projects and give your feedback.

    It should work even if you aren't using ARc, at least yo arc:component --ours, which clones an actual component of yours and automates the process to create a new one.

    Just npm install -g yo generator-arc, go to your project root and yo arc:component --ours (or --theirs if you want to grab any ARc's component).

    help wanted 
    Reply
  • Updating all dependencies, with tests
    Updating all dependencies, with tests

    Mar 28, 2019

    Like @kybarg

    Highlights

    • Updated webpack to version 4
    • Removed webpack-blocks dependency in favor of plain config file
    • Updated babel
    • Dropped support for Node.js 6
    • Removed unused dependencies

    Plus

    • react: 16.8.5
    • react-dom: 16.8.5
    • react-router-dom: 5.0.0
    • react-redux: 6.0.1
    • redux: 4.0.1
    • redux-form 8.1.0
    • redux-saga: 1.0.2
    • redux-saga-thunk: 0.7.3
    • styled-components: 4.2.0
    • and more...
    Reply
  • Fixing the linebreak-style eslint error for Windows
    Fixing the linebreak-style eslint error for Windows

    Mar 16, 2017

    On Windows, with the current eslint setup, you get this error: Expected linebreaks to be 'LF' but found 'CRLF'.

    The eslint site says this is because Unix and Windows have two different linebreaks.

    Is there a better way to fix this besides adding "linebreak-style": 0, to the .eslintrc file?

    Reply
  • [universal-redux] Upgrading to react-router 4.x
    [universal-redux] Upgrading to react-router 4.x

    Mar 28, 2017

    closes #161

                                                                                                                                                                                                           
    Reply