From 212a4ead2dec78fffc59e6fd494d5225199fef50 Mon Sep 17 00:00:00 2001
From: Apalok-Kreeti <aroy@kreeti.com>
Date: Thu, 4 May 2017 18:44:17 +0530
Subject: [PATCH] added coding convention for react

---
 README.md |   3 +-
 react.md  | 144 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 react.md

diff --git a/README.md b/README.md
index 2bd78cb..5c3b657 100644
--- a/README.md
+++ b/README.md
@@ -3,4 +3,5 @@
 1. <a href="/git.md">Git</a>
 2. <a href="/ruby.md">Ruby</a>
 3. <a href="/rails.md">Rails</a>
-4. <a href="/rspec.md">RSpec</a>
\ No newline at end of file
+4. <a href="/rspec.md">RSpec</a>
+5. <a href="/react.md">React</a>
diff --git a/react.md b/react.md
new file mode 100644
index 0000000..a305d02
--- /dev/null
+++ b/react.md
@@ -0,0 +1,144 @@
+# React
+
+# Naming
+
+* Always use JSX syntax.
+
+* Use .jsx extension for React components.
+
+* Use PascalCase for filenames. E.g., FoodMenus.jsx.
+
+# Syntax
+
+* Do not use React.createElement unless you're initializing the app from a file that is not JSX.
+
+  # bad
+    const Listing = React.createClass({
+      // ...
+      render() {
+        return <div>{this.state.hello}</div>;
+      }
+    });
+
+  # good
+    class Listing extends React.Component {
+      // ...
+      render() {
+        return <div>{this.state.hello}</div>;
+      }
+    }
+
+* Use PascalCase for React components and camelCase for their instances. 
+
+  # bad
+  import foodMenus from './FoodMenus';
+
+  # good
+  import FoodMenus from './FoodMenus';
+
+  # bad
+  const FoodMenus = <FoodMenus />;
+
+  # good
+  const foodMenus = <FoodMenus />;
+
+* Use the filename as the component name. For example, FoodMenus.jsx should have a reference name of FoodMenus.
+
+* Do not use displayName for naming components. Instead, name the component by reference.
+
+  # bad
+  export default React.createClass({
+    displayName: 'ReservationCard',
+    // ...
+  });
+
+  # good
+ class ReservationCard extends React.Component {
+   // ...
+ }
+
+* Follow these alignment styles for JSX syntax.
+
+  # bad
+  <Foo superLongParam="bar"
+     anotherSuperLongParam="baz" />
+
+  # good
+  <Foo
+    superLongParam="bar"
+    anotherSuperLongParam="baz"
+  />
+
+* Use double quotes (") for JSX attributes & single quotes (') for all other JS. 
+
+  # bad
+    <Foo bar='bar' />
+
+  # good
+    <Foo bar="bar" />
+
+  # bad
+    <Foo style={{ left: "20px" }} />
+
+  # good
+    <Foo style={{ left: '20px' }} />
+
+* Always include a single space in your self-closing tag.
+
+  # bad
+  <Foo/>
+
+  # good
+  <Foo />
+
+* Use camelCase for prop names.
+
+  # bad
+  <Foo UserName="john" />
+
+  # good
+  <Foo userName="john" />
+
+* Omit the value of the prop when it is explicitly true.
+  # bad
+  <Foo hidden={true} />
+
+  # good
+  <Foo hidden />
+
+* Avoid using an array index as key prop, prefer a unique ID.
+
+  # bad
+  {todos.map((todo, index) =>
+    <Todo
+      {...todo}
+      key={index}
+    />
+  )}
+
+  # good
+  {todos.map(todo => (
+    <Todo
+      {...todo}
+      key={todo.id}
+   />
+  ))}
+
+* Wrap JSX tags in parentheses when they span more than one line.
+
+  # bad
+  render() {
+    return <MyComponent className="long body" foo="bar">
+             <MyChild />
+           </MyComponent>;
+  }
+
+  # good
+  render() {
+    return (
+      <MyComponent className="long body" foo="bar">
+        <MyChild />
+      </MyComponent>
+    );
+  }
+