Basic Structure for React app following Atomic Design.

This base project allows you to have a basic React App folder structure following the principles of Atomic Design. It contain some basic components that you can use. All the components are not (or minimally) stylized. The main objective of this project is to have a basic structure, that is the reason we are not doing complex styles and/or adding many libs.

Also, each component is a JSX file and a .scss file that is associated to the component. This means, all the components for this project should be modular, to make it easy its usage between different apps.

Using these package, you will be able to start a new fresh React project with the basic folder and file structures.

This project uses ES6 in the JS side, and Sass for styles. It also uses BrowserSync, a tool that will create a web server in your machine that automatically updates the code and the styles whenever the watcher detects a change.

• Webpack
• ES6
• SASS
• React Router
• Auto watcher for JS and SCSS files
• Atomic design project structure
• Launch server with hot-reload using webpack
• JS Lint ( extending airbnb eslint styles )
• Styleint

• Tests
• Upgrade to Webpack 2.^ once stable

• nodejs v5.*
• npm v3.*

Download the master branch

or

Clone this repo (Be sure you delete the .git file, or move the files to your own project folder/repository)

git clone -b master --single-branch --depth 1 [email protected]:Rulox/react-atomic-structure.git

npm install

npm run start

A browser webpack server should be ready on http://localhost:8080/ (or any other URL+PORT that your terminal says). You can start working right now in the code, and all the changes will be visible in the browser just opened.

But first, What is Atomic Design?

These components are just an idea on how to develop your application following the Atomic Design. Feel free to upgrade/delete them in order to do your own app!

• Anchor
• Label
• Button
• Input
• Image
• Title
• Paragraph

• Labeled input
• Content

• Article
• Form
• Nav

• Home
• About

To create a new component, just create a new folder in the atoms/molecules/organisms/templates folder with the name of your component.

Create now the React component in the jsx file. Also create your .scss file and remember to import it in the component jsx file using require.

This project comes with the following scripts to help you.

npm run start

1. Create CSS and JS bundles from Sass and JS.
2. Launch a web server.
3. Launch watchers on JS/CSS files.

npm run build

1. Build CSS and JS files. With this command, the js will be minified, the bundle version will be used in the html.

npm run lint

1. Launch JS Lint checker.

Feel free to create a pull request or create an issue to add features or fix bugs.