From 999fe3b83ac9cb41bb7f1514baeb68c007a369a3 Mon Sep 17 00:00:00 2001
From: Piotr Lasota <lasota.piotr1@gmail.com>
Date: Wed, 25 Oct 2017 20:03:56 +0200
Subject: [PATCH 1/2] Change className to variant in examples

---
 react/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/react/README.md b/react/README.md
index 6ade245c..d172990b 100644
--- a/react/README.md
+++ b/react/README.md
@@ -400,7 +400,7 @@
     ```jsx
     // bad
     render() {
-      return <MyComponent className="long body" foo="bar">
+      return <MyComponent variant="long body" foo="bar">
                <MyChild />
              </MyComponent>;
     }
@@ -408,7 +408,7 @@
     // good
     render() {
       return (
-        <MyComponent className="long body" foo="bar">
+        <MyComponent variant="long body" foo="bar">
           <MyChild />
         </MyComponent>
       );
@@ -427,10 +427,10 @@
 
     ```jsx
     // bad
-    <Foo className="stuff"></Foo>
+    <Foo variant="stuff"></Foo>
 
     // good
-    <Foo className="stuff" />
+    <Foo variant="stuff" />
     ```
 
   - If your component has multi-line properties, close its tag on a new line. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)

From 9d3e7e0a2c47dedf6032d77418a531e8abfd7762 Mon Sep 17 00:00:00 2001
From: Piotr Lasota <lasota.piotr1@gmail.com>
Date: Wed, 25 Oct 2017 20:05:40 +0200
Subject: [PATCH 2/2] Add component with className as anti-pattern example

---
 react/README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/react/README.md b/react/README.md
index d172990b..ee440e9b 100644
--- a/react/README.md
+++ b/react/README.md
@@ -143,6 +143,9 @@
     // bad
     <MyComponent style="fancy" />
 
+    // bad
+    <MyComponent className="fancy" />
+
     // good
     <MyComponent variant="fancy" />
     ```