From 5a86e5c204c61f221df9f15babb5754a75ad1f95 Mon Sep 17 00:00:00 2001
From: rajesh durgam <drvgao@users.noreply.github.com>
Date: Wed, 29 Apr 2020 18:13:30 +0530
Subject: [PATCH 1/3] Fetch data from API

---
 README.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/README.md b/README.md
index 4b8f9dc..a33f89a 100644
--- a/README.md
+++ b/README.md
@@ -505,6 +505,41 @@ function isJson(str) {
 }
 ```
 
+# Fetch data from API REACT
+``` REACT JS
+import React, {Component} from 'react'
+
+export default class StarWars extends Component {
+    constructor(){
+        super()
+        this.state = {
+            character: {},
+            isLoading: false
+        }
+    }
+
+    componentDidMount(){
+        this.setState({isLoading: true})
+        fetch("https://swapi.co/api/people/1")
+            .then(response => response.json())
+            .then(data => (
+                this.setState({
+                    isLoading: false,
+                    character: data
+                })
+            ))
+    }
 
+    
+    render(){
+        const text = this.state.isLoading ? "People data is loading..." : this.state.character.name
+        return(
+            <div>
+                <p>{text}</p>
+            </div>
+        )
+    }
+}
+```
 
 

From 13c382d8fb0f4d4345fa45fb0a3404b2c6822726 Mon Sep 17 00:00:00 2001
From: rajesh durgam <drvgao@users.noreply.github.com>
Date: Thu, 30 Apr 2020 10:42:19 +0530
Subject: [PATCH 2/3] removed react fetch API data snippet

removed react snippet and moved to ReactCodeSnippet.md file
---
 README.md | 36 ------------------------------------
 1 file changed, 36 deletions(-)

diff --git a/README.md b/README.md
index a33f89a..7cbba47 100644
--- a/README.md
+++ b/README.md
@@ -505,41 +505,5 @@ function isJson(str) {
 }
 ```
 
-# Fetch data from API REACT
-``` REACT JS
-import React, {Component} from 'react'
-
-export default class StarWars extends Component {
-    constructor(){
-        super()
-        this.state = {
-            character: {},
-            isLoading: false
-        }
-    }
-
-    componentDidMount(){
-        this.setState({isLoading: true})
-        fetch("https://swapi.co/api/people/1")
-            .then(response => response.json())
-            .then(data => (
-                this.setState({
-                    isLoading: false,
-                    character: data
-                })
-            ))
-    }
-
-    
-    render(){
-        const text = this.state.isLoading ? "People data is loading..." : this.state.character.name
-        return(
-            <div>
-                <p>{text}</p>
-            </div>
-        )
-    }
-}
-```
 
 

From fa3fa23b61f7dd9635d11399376949a1b3d8efd2 Mon Sep 17 00:00:00 2001
From: rajesh durgam <drvgao@users.noreply.github.com>
Date: Thu, 30 Apr 2020 10:49:44 +0530
Subject: [PATCH 3/3] React code snippets

1. How to create app
2. Fetch data from API
3. Routing example
4. Update npm packages
5. Make npm production build
---
 ReactCodeSnippets.md | 77 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 ReactCodeSnippets.md

diff --git a/ReactCodeSnippets.md b/ReactCodeSnippets.md
new file mode 100644
index 0000000..e98633c
--- /dev/null
+++ b/ReactCodeSnippets.md
@@ -0,0 +1,77 @@
+# REACT CODE SNIPPETS
+# Create REACT APP
+```
+npx create-react-app my-app
+cd my-app
+npm start
+```
+# Fetch data from API REACT
+``` REACT JS
+import React, {Component} from 'react'
+
+export default class StarWars extends Component {
+    constructor(){
+        super()
+        this.state = {
+            character: {},
+            isLoading: false
+        }
+    }
+
+    componentDidMount(){
+        this.setState({isLoading: true})
+        fetch("https://swapi.co/api/people/1")
+            .then(response => response.json())
+            .then(data => (
+                this.setState({
+                    isLoading: false,
+                    character: data
+                })
+            ))
+    }
+
+    
+    render(){
+        const text = this.state.isLoading ? "People data is loading..." : this.state.character.name
+        return(
+            <div>
+                <p>{text}</p>
+            </div>
+        )
+    }
+}
+```
+# ROUTING
+```
+ReactDOM.render(( 
+
+  <Switch> 
+
+    <Route exact path="/" component={Home} /> 
+
+    <Route path="/login" component={Login} /> 
+
+    <Route path="/explore" component={Explore} /> 
+
+  </Switch>), 
+
+  document.getElementById('root') 
+
+); 
+```
+# Update REACT Dependancies or Libraries
+```
+npm install -g npm-check-updates 
+ncu -u 
+npm update 
+npm install
+```
+# npm run build
+```
+Builds the app for production to the build folder.
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.
+
+Your app is ready to be deployed.
+```