diff --git a/contrib/!frameworks/react/README.org b/contrib/!frameworks/react/README.org
new file mode 100644
index 000000000..45ae90622
--- /dev/null
+++ b/contrib/!frameworks/react/README.org
@@ -0,0 +1,75 @@
+* React contribution layer for Spacemacs
+
+#+CAPTION: logo
+
+[[img/react.png]]
+
+** Table of Contents                                                  :TOC@4:
+ - [[#react-contribution-layer-for-spacemacs][React contribution layer for Spacemacs]]
+     - [[#description][Description]]
+         - [[#features][Features]]
+     - [[#todo-install][TODO Install]]
+     - [[#optional-configuration][Optional Configuration]]
+
+** Description
+
+ES6 and JSX ready configuration layer for React
+It will automatically recognize =.jsx= and =.react.js= files
+
+*** Features
+- on-the-fly syntax checking
+- proper syntax highlight and indentation with jsx
+- ternjs turbocharged autocompletion as in js2-mode
+
+** TODO Install
+
+To use this contribution add it to your =~/.spacemacs=
+
+#+begin_src emacs-lisp
+  (setq-default dotspacemacs-configuration-layers '(react))
+#+end_src
+
+You will also need to install =tern= to use the auto-completion and
+documentation features:
+#+BEGIN_SRC sh
+  $ npm install -g tern
+#+END_SRC
+
+To use the on-the-fly syntax checking, install =eslint= with babel and react support:
+#+BEGIN_SRC sh
+  $ npm install -g eslint babel-eslint eslint-plugin-react
+#+END_SRC
+
+If your project do not use a custom =.eslintrc= file I strongly advice you to try out this one by Airbnb:
+[[https://github.com/airbnb/javascript/blob/master/linters/.eslintrc][.eslintrc]]
+
+** Optional Configuration
+
+You may refer to the =web-mode= configuration for fine tuning the indenting behaviour.
+
+For example to have a consistent 2 spaces indenting both on =js= and =jsx= you may use these settings:
+
+#+begin_src emacs-lisp
+  (setq-default
+   ;; js2-mode
+   js2-basic-offset 2
+   ;; web-mode
+   css-indent-offset 2
+   web-mode-markup-indent-offset 2
+   web-mode-css-indent-offset 2
+   web-mode-code-indent-offset 2
+   web-mode-attr-indent-offset 2)
+#+end_src
+
+And if you want to have 2 space indent also for element's attributes, concatenations and contiguous function calls:
+#+begin_src emacs-lisp
+  (with-eval-after-load 'web-mode
+    (add-to-list 'web-mode-indentation-params '("lineup-args" . nil))
+    (add-to-list 'web-mode-indentation-params '("lineup-concats" . nil))
+    (add-to-list 'web-mode-indentation-params '("lineup-calls" . nil)))
+#+end_src
+
+
+
+
+
diff --git a/contrib/!frameworks/react/img/react.png b/contrib/!frameworks/react/img/react.png
new file mode 100644
index 000000000..15ea421f4
Binary files /dev/null and b/contrib/!frameworks/react/img/react.png differ
diff --git a/contrib/!frameworks/react/packages.el b/contrib/!frameworks/react/packages.el
new file mode 100644
index 000000000..8409baf8f
--- /dev/null
+++ b/contrib/!frameworks/react/packages.el
@@ -0,0 +1,68 @@
+;;; packages.el --- react Layer packages File for Spacemacs
+;;
+;; Copyright (c) 2012-2015 Sylvain Benner
+;; Copyright (c) 2014-2015 Andrea Moretti & Contributors
+;;
+;; Author: Andrea Moretti <axyzxp@gmail.com>
+;; URL: https://github.com/axyz
+;;
+;; This file is not part of GNU Emacs.
+;;
+;;; License: GPLv3
+
+;; List of all packages to install and/or initialize. Built-in packages
+;; which require an initialization must be listed explicitly in the list.
+(setq react-packages
+    '(
+      web-mode
+      js2-mode
+      flycheck
+      tern-mode
+      ))
+
+;; List of packages to exclude.
+(setq react-excluded-packages '())
+
+;; For each package, define a function react/init-<package-name>
+;;
+(defun react/post-init-flycheck ()
+  (with-eval-after-load 'flycheck
+    ;; use eslint with web-mode for jsx files
+    (flycheck-add-mode 'javascript-eslint 'web-mode)
+    (flycheck-add-mode 'javascript-eslint 'js2-mode)
+    ;; (setq flycheck-check-syntax-automatically '(save new-line mode-enabled))
+
+    ;; disable jshint since we prefer eslint checking
+    (setq-default flycheck-disabled-checkers
+                  (append flycheck-disabled-checkers
+                          '(javascript-jshint)))
+
+    ;; disable json-jsonlist checking for json files
+    (setq-default flycheck-disabled-checkers
+                  (append flycheck-disabled-checkers
+                          '(json-jsonlist)))))
+
+(defun react/post-init-web-mode ()
+  (add-to-list 'auto-mode-alist '("\\.jsx\\'" . web-mode))
+  (add-to-list 'auto-mode-alist '("\\.react.js\\'" . web-mode))
+
+  (add-hook 'web-mode-hook
+            (lambda ()
+              (when (or (equal web-mode-content-type "jsx")
+                        (equal web-mode-content-type "javascript"))
+                (web-mode-set-content-type "jsx")
+                (add-to-list 'company-backends 'company-tern)
+                (js2-minor-mode)
+                (tern-mode))))
+
+  (with-eval-after-load 'web-mode
+    (defadvice web-mode-highlight-part (around tweak-jsx activate)
+      (if (equal web-mode-content-type "jsx")
+          (let ((web-mode-enable-part-face nil))
+            ad-do-it)
+        ad-do-it))))
+
+;;
+;; Often the body of an initialize function uses `use-package'
+;; For more info on `use-package', see readme:
+;; https://github.com/jwiegley/use-package