From 3825a1863b96e629ed4c717b437db792c24147c2 Mon Sep 17 00:00:00 2001 From: Nick Rodriguez Date: Mon, 17 Apr 2017 20:32:58 -0500 Subject: [PATCH 1/8] first update --- src/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.js b/src/App.js index 0042c777..e40e924d 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ function App() {
logo

Welcome to React

+

Test update

To get started, edit src/App.js and save to reload. From dda54b5fee34d9378bae26bb5301903699c789cf Mon Sep 17 00:00:00 2001 From: Nick Rodriguez Date: Sun, 23 Apr 2017 16:34:10 -0500 Subject: [PATCH 2/8] initial pushes --- .eslintrc | 2 +- src/App.js | 20 ---------- src/{ => components}/App.css | 0 src/components/App.js | 64 ++++++++++++++++++++++++++++++++ src/{ => components}/App.test.js | 0 src/components/Body.js | 16 ++++++++ src/components/Header.js | 17 +++++++++ src/components/ListOfUsers.js | 23 ++++++++++++ src/components/UserDetail.js | 17 +++++++++ src/components/component1.js | 11 ++++++ src/components/component2.js | 11 ++++++ src/components/component3.js | 11 ++++++ src/components/component4.js | 11 ++++++ src/components/component5.js | 11 ++++++ src/components/component6.js | 11 ++++++ src/components/footer.js | 11 ++++++ src/{ => components}/logo.svg | 0 src/index.js | 4 +- 18 files changed, 217 insertions(+), 23 deletions(-) delete mode 100644 src/App.js rename src/{ => components}/App.css (100%) create mode 100644 src/components/App.js rename src/{ => components}/App.test.js (100%) create mode 100644 src/components/Body.js create mode 100644 src/components/Header.js create mode 100644 src/components/ListOfUsers.js create mode 100644 src/components/UserDetail.js create mode 100644 src/components/component1.js create mode 100644 src/components/component2.js create mode 100644 src/components/component3.js create mode 100644 src/components/component4.js create mode 100644 src/components/component5.js create mode 100644 src/components/component6.js create mode 100644 src/components/footer.js rename src/{ => components}/logo.svg (100%) diff --git a/.eslintrc b/.eslintrc index ee54d86f..48b88b59 100644 --- a/.eslintrc +++ b/.eslintrc @@ -77,7 +77,7 @@ "init-declarations": 0, "key-spacing": [2, {"beforeColon": false, "afterColon": true}], "keyword-spacing": 2, - "linebreak-style": 2, + "linebreak-style": ["error", "windows"], "lines-around-comment": 0, "max-depth": 0, "max-len": [2, 100, 4, {"ignoreUrls": true}], diff --git a/src/App.js b/src/App.js deleted file mode 100644 index e40e924d..00000000 --- a/src/App.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import logo from "./logo.svg"; -import "./App.css"; - -function App() { - return ( -

-
- logo -

Welcome to React

-

Test update

-
-

- To get started, edit src/App.js and save to reload. -

-
- ); -} - -export default App; diff --git a/src/App.css b/src/components/App.css similarity index 100% rename from src/App.css rename to src/components/App.css diff --git a/src/components/App.js b/src/components/App.js new file mode 100644 index 00000000..a01a3ec4 --- /dev/null +++ b/src/components/App.js @@ -0,0 +1,64 @@ +import React from "react"; +// import logo from "./logo.svg"; moved to Header.js +import "./App.css"; +import Body from './Body.js'; +import Footer from './footer.js'; +import Header from './Header.js'; +// import Component1 from './component1.js'; +// import Component2 from './component2.js'; +// import Component3 from './component3.js'; +// import Component4 from './component4.js'; +// import Component5 from './component5.js'; +// import Component6 from './component6.js'; +import ListOfUsers from './ListOfUsers.js'; +//import UserDetail from './UserDetail.js'; + + +// function ComponentX() { +// return ( +//

Texas

+// ); +// } + + +function App(props) { + const userItems=props.users.map(function(users, index) { + return ( +
+ {users.first_name} {users.last_name} +
+ ); // end of return for MAP function + }); + const userItems2=props.users.map(function(users, index) { + return ( +
+ {users.address} +
+ ); // end of return for MAP function + + }); // end of APP fucntion + + console.log(userItems2); + console.log(userItems); + return ( +
+
+ {/* className = App-intro */} + {/* + // + // + // + // + // + + + */} + + +
{/* Footer location*/} +
+ + ); +} + +export default App; diff --git a/src/App.test.js b/src/components/App.test.js similarity index 100% rename from src/App.test.js rename to src/components/App.test.js diff --git a/src/components/Body.js b/src/components/Body.js new file mode 100644 index 00000000..56296342 --- /dev/null +++ b/src/components/Body.js @@ -0,0 +1,16 @@ +import React from "react"; + + +function Body() { + return ( + +

+ /* +

className="App-intro"> + To get started, edit src/App.js and save to reload. +

+*/ + ); + } + + export default Body; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 00000000..9049703a --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,17 @@ +import React from "react"; +import logo from "./logo.svg"; + +function Header(props) { + + return ( +
+ logo +

Welcome to React {props.name}

+

Test update Edits

+
+ ); + + } + + +export default Header; diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js new file mode 100644 index 00000000..d7facb41 --- /dev/null +++ b/src/components/ListOfUsers.js @@ -0,0 +1,23 @@ +import React from "react"; +import UserDetail from './UserDetail.js'; + +function ListOfUsers(props) { + const names = props.userItems; + console.log(names); + + const address = props.userItems2.map((userItems2,index) => +
+ {userItems2} {index} +
+); + + + return ( +
+ +
+ ); // end of return + +} + +export default ListOfUsers; diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js new file mode 100644 index 00000000..1549858d --- /dev/null +++ b/src/components/UserDetail.js @@ -0,0 +1,17 @@ +import React from "react"; + + +function UserDetail(props) { + + const index = props.address.length; + + + return ( +
+

user detail users

+
+ ); + +} + +export default UserDetail; diff --git a/src/components/component1.js b/src/components/component1.js new file mode 100644 index 00000000..dc406a9c --- /dev/null +++ b/src/components/component1.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component1 extends React.Component { + render(){ + return (
+

Component1

+
+ ); + } + } diff --git a/src/components/component2.js b/src/components/component2.js new file mode 100644 index 00000000..7f9ff323 --- /dev/null +++ b/src/components/component2.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component2 extends React.Component { + render(){ + return (
+

Component2

+
+ ); + } + } diff --git a/src/components/component3.js b/src/components/component3.js new file mode 100644 index 00000000..f13413ed --- /dev/null +++ b/src/components/component3.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component3 extends React.Component { + render(){ + return (
+

Component3

+
+ ); + } + } diff --git a/src/components/component4.js b/src/components/component4.js new file mode 100644 index 00000000..1cff27da --- /dev/null +++ b/src/components/component4.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component4 extends React.Component { + render(){ + return (
+

Component4

+
+ ); + } + } diff --git a/src/components/component5.js b/src/components/component5.js new file mode 100644 index 00000000..ac524ec2 --- /dev/null +++ b/src/components/component5.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component5 extends React.Component { + render(){ + return (
+

Component5

+
+ ); + } + } diff --git a/src/components/component6.js b/src/components/component6.js new file mode 100644 index 00000000..4b8af28f --- /dev/null +++ b/src/components/component6.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Component6 extends React.Component { + render(){ + return (
+

Component6

+
+ ); + } + } diff --git a/src/components/footer.js b/src/components/footer.js new file mode 100644 index 00000000..dd027983 --- /dev/null +++ b/src/components/footer.js @@ -0,0 +1,11 @@ +import React from "react"; + + +export default class Footer extends React.Component { + render(){ + return (
+

+
+ ); + } + } diff --git a/src/logo.svg b/src/components/logo.svg similarity index 100% rename from src/logo.svg rename to src/components/logo.svg diff --git a/src/index.js b/src/index.js index 8e6bfe35..1d876dac 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,13 @@ import React from "react"; import ReactDOM from "react-dom"; -import App from "./App"; +import App from "./components/App"; import "./index.css"; import users from "./users"; function render() { ReactDOM.render( - , + , // send 'users' array to APP.js document.getElementById("root") ); } From e5aafbf9e8ebe182ec4a00eb62ad57cf8443ec0e Mon Sep 17 00:00:00 2001 From: Nick Rodriguez Date: Sun, 23 Apr 2017 20:38:03 -0500 Subject: [PATCH 3/8] updates --- src/components/App.js | 25 +++----------- src/components/ListOfUsers.js | 19 ++++++----- src/components/UserDetail.js | 15 +++++++-- src/components/old_app.js | 62 +++++++++++++++++++++++++++++++++++ src/index.js | 2 +- 5 files changed, 90 insertions(+), 33 deletions(-) create mode 100644 src/components/old_app.js diff --git a/src/components/App.js b/src/components/App.js index a01a3ec4..b7f4b2c2 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -11,7 +11,7 @@ import Header from './Header.js'; // import Component5 from './component5.js'; // import Component6 from './component6.js'; import ListOfUsers from './ListOfUsers.js'; -//import UserDetail from './UserDetail.js'; +import UserDetail from './UserDetail.js'; // function ComponentX() { @@ -22,24 +22,7 @@ import ListOfUsers from './ListOfUsers.js'; function App(props) { - const userItems=props.users.map(function(users, index) { - return ( -
- {users.first_name} {users.last_name} -
- ); // end of return for MAP function - }); - const userItems2=props.users.map(function(users, index) { - return ( -
- {users.address} -
- ); // end of return for MAP function - }); // end of APP fucntion - - console.log(userItems2); - console.log(userItems); return (
@@ -51,10 +34,10 @@ function App(props) { // // - - */} - + */} + +
{/* Footer location*/}
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js index d7facb41..e003c5ee 100644 --- a/src/components/ListOfUsers.js +++ b/src/components/ListOfUsers.js @@ -1,20 +1,21 @@ import React from "react"; -import UserDetail from './UserDetail.js'; +//import UserDetail from './UserDetail.js'; function ListOfUsers(props) { - const names = props.userItems; - console.log(names); - const address = props.userItems2.map((userItems2,index) => + const Names=props.userNames.map(function(userNames,index){ + return (
- {userItems2} {index} -
-); - +
  • + {userNames.first_name} {userNames.last_name} +
    • + + ); +}); return (
    - + {Names}
    ); // end of return diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js index 1549858d..c51f1002 100644 --- a/src/components/UserDetail.js +++ b/src/components/UserDetail.js @@ -2,13 +2,24 @@ import React from "react"; function UserDetail(props) { +console.log(props.userDetails[0]) + +const details=props.userDetails.map(function(userDetails,index){ +return ( +
    + + {userDetails.address} {userDetails.Phone} + +
    +); +}); - const index = props.address.length; return (
    -

    user detail users

    +

    user detail users

    + {details}
    ); diff --git a/src/components/old_app.js b/src/components/old_app.js new file mode 100644 index 00000000..0a545327 --- /dev/null +++ b/src/components/old_app.js @@ -0,0 +1,62 @@ +import React from "react"; +// import logo from "./logo.svg"; moved to Header.js +import "./App.css"; +import Body from './Body.js'; +import Footer from './footer.js'; +import Header from './Header.js'; +// import Component1 from './component1.js'; +// import Component2 from './component2.js'; +// import Component3 from './component3.js'; +// import Component4 from './component4.js'; +// import Component5 from './component5.js'; +// import Component6 from './component6.js'; +import ListOfUsers from './ListOfUsers.js'; +import UserDetail from './UserDetail.js'; + + +// function ComponentX() { +// return ( +//

    Texas

    +// ); +// } + + +function App(props) { + const userNames=props.users.map(function(users, index) { + return ( +
    + {users.first_name}{users.last_name} +
    + ); // end of return for MAP function + }); + const userItems2=props.users.map(function(users, index) { + return ( +
    + {users.address}{users.phone}{users.occupation}{users.avatar} +
    + ); // end of return for MAP function + + }); // end of APP fucntion + + return ( +
    +
    + {/* className = App-intro */} + {/* + // + // + // + // + // + + + */} + + +
    {/* Footer location*/} +
    + + ); +} + +export default App; diff --git a/src/index.js b/src/index.js index 1d876dac..28127287 100644 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,7 @@ import users from "./users"; function render() { ReactDOM.render( - , // send 'users' array to APP.js + , // send 'users' array to APP.js document.getElementById("root") ); } From 8ce2b19df3dd16b35bdbedbba1a1d9e656300a97 Mon Sep 17 00:00:00 2001 From: Nick Rodriguez Date: Sun, 23 Apr 2017 20:47:17 -0500 Subject: [PATCH 4/8] updates2 --- src/components/App.js | 2 ++ src/components/ListOfUsers.js | 12 +++++------- src/components/UserDetail.js | 22 ++++++++-------------- 3 files changed, 15 insertions(+), 21 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index b7f4b2c2..3e6d04dd 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -36,8 +36,10 @@ function App(props) { */} + +