From e09ba544d2ac12db66f050db426e1722aae825f7 Mon Sep 17 00:00:00 2001 From: akhilesh Kumar Date: Wed, 25 Jan 2017 08:44:59 +0530 Subject: [PATCH 1/4] multipleComponent --- App.jsx | 6 +++++- Components/header.jsx | 18 ++++++++++++++++++ index.html | 1 + style/style.css | 3 +++ 4 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 Components/header.jsx create mode 100644 style/style.css diff --git a/App.jsx b/App.jsx index c7d8037..7dbff38 100644 --- a/App.jsx +++ b/App.jsx @@ -1,10 +1,14 @@ import React from "react";// var React =require("react") +import Header from "./Components/header.jsx"; class App extends React.Component{ render(){ return (
- Hello World +
+
+ Hello World +
) } diff --git a/Components/header.jsx b/Components/header.jsx new file mode 100644 index 0000000..7110982 --- /dev/null +++ b/Components/header.jsx @@ -0,0 +1,18 @@ +import React from "react";// var React =require("react") + +class Header extends React.Component{ + render(){ + let myStyle={padding:"5px", borderBottom:"1px solid",marginBottom:"15px"}; + return ( +
+
+ I m logo + I m magic button + +
+
+ ) + } +} + +export default Header; \ No newline at end of file diff --git a/index.html b/index.html index fa83aac..4e06ed3 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ My first React +
diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..3831b1c --- /dev/null +++ b/style/style.css @@ -0,0 +1,3 @@ +.pull-right{ + float: right; +} \ No newline at end of file From 70ae96c563964b7ec55a810f3786bd3f53dd17d6 Mon Sep 17 00:00:00 2001 From: akhilesh Kumar Date: Wed, 25 Jan 2017 08:46:15 +0530 Subject: [PATCH 2/4] readme updated --- readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme.md b/readme.md index b71fcd3..834ab13 100644 --- a/readme.md +++ b/readme.md @@ -2,6 +2,8 @@ **Master:**_Hello World_ +**multipleComponent:**_Demo fo multiple component_ + ##How to run > Run following command >> `npm i` From 08b6ca4775b28d1a5eef11b4b437a8c11cb3cd7f Mon Sep 17 00:00:00 2001 From: akhilesh Kumar Date: Fri, 27 Jan 2017 07:38:49 +0530 Subject: [PATCH 3/4] state data --- App.jsx | 54 +++++++++++++++++++++++++++++++++++++--- Components/footer.jsx | 16 ++++++++++++ Components/header.jsx | 2 +- Components/myContent.jsx | 20 +++++++++++++++ 4 files changed, 88 insertions(+), 4 deletions(-) create mode 100644 Components/footer.jsx create mode 100644 Components/myContent.jsx diff --git a/App.jsx b/App.jsx index 7dbff38..0733a15 100644 --- a/App.jsx +++ b/App.jsx @@ -1,14 +1,62 @@ import React from "react";// var React =require("react") import Header from "./Components/header.jsx"; +import Footer from "./Components/footer.jsx"; +import MyContent from "./Components/myContent.jsx"; class App extends React.Component{ + constructor(){ + super(); + this.state ={ + myData:[ + { + name:"Alice", + age:"25 Yrs", + education:"B. Tech." + }, + { + name:"Bob", + age:"26 Yrs", + education:"M.A." + },{ + name:"Riya", + age:"29 Yrs", + education:"chjjj" + } + ] + }; + + setTimeout(() =>{ + let data = [{p:8,p1:8},{p:7,p1:8}]; + this.setState({ + myData:[ + { + name:"Alice1", + age:"25 Yrs", + education:"B. Tech." + }, + { + name:"Bob1", + age:"26 Yrs", + education:"M.A." + },{ + name:"Riya1", + age:"29 Yrs", + education:"chjjj" + } + ] + }) + },3000); + } render(){ return (
-
- Hello World -
+ { + this.state.myData.map((e,i)=>{ + return + }) + } +
) } diff --git a/Components/footer.jsx b/Components/footer.jsx new file mode 100644 index 0000000..839c75c --- /dev/null +++ b/Components/footer.jsx @@ -0,0 +1,16 @@ +import React from "react";// var React =require("react") + +class Footer extends React.Component{ + render(){ + let myStyle={position:"fixed",bottom:"0",width:"calc(100% - 45px)",padding:"5px", borderTop:"1px solid",marginTop:"15px"}; + return ( +
+
+ Hi M footer +
+
+ ) + } +} + +export default Footer; \ No newline at end of file diff --git a/Components/header.jsx b/Components/header.jsx index 7110982..7294c16 100644 --- a/Components/header.jsx +++ b/Components/header.jsx @@ -7,8 +7,8 @@ class Header extends React.Component{
I m logo + I m magic button -
) diff --git a/Components/myContent.jsx b/Components/myContent.jsx new file mode 100644 index 0000000..9e9fb72 --- /dev/null +++ b/Components/myContent.jsx @@ -0,0 +1,20 @@ +import React from "react";// var React =require("react") + +class MyContent extends React.Component{ + constructor(){ + super(); + } + render(){ + let myStyle={padding:"5px", borderBottom:"1px solid",marginBottom:"15px"}; + return ( +

+ Data from parent
+ name:{this.props.myData.name},
+ age:{this.props.myData.age},
+ education:{this.props.myData.education} +

+ ) + } +} + +export default MyContent; \ No newline at end of file From 6b667c362ab56859714e18145110effd1f833169 Mon Sep 17 00:00:00 2001 From: akhilesh Kumar Date: Sat, 28 Jan 2017 08:26:15 +0530 Subject: [PATCH 4/4] clickHandlerAndDataPassing --- App.jsx | 34 ++++++++++++---------------------- Components/custFilter.jsx | 16 ++++++++++++++++ Components/myContent.jsx | 27 +++++++++++++++++++++++++-- 3 files changed, 53 insertions(+), 24 deletions(-) create mode 100644 Components/custFilter.jsx diff --git a/App.jsx b/App.jsx index 0733a15..b6dbda9 100644 --- a/App.jsx +++ b/App.jsx @@ -24,36 +24,26 @@ class App extends React.Component{ } ] }; + this.myContentClickListner= this.myContentClickListner.bind(this); + } - setTimeout(() =>{ - let data = [{p:8,p1:8},{p:7,p1:8}]; - this.setState({ - myData:[ - { - name:"Alice1", - age:"25 Yrs", - education:"B. Tech." - }, - { - name:"Bob1", - age:"26 Yrs", - education:"M.A." - },{ - name:"Riya1", - age:"29 Yrs", - education:"chjjj" - } - ] - }) - },3000); + myContentClickListner(){ + console.log("this.arguments: ",arguments,arguments[1].target); + let data=this.state.myData; + data[arguments[2]].name +="_1"; + this.setState({ + myData:data + }) } + + render(){ return (
{ this.state.myData.map((e,i)=>{ - return + return }) }