{"id":15563195,"url":"https://github.com/tush-tr/react-practices","last_synced_at":"2026-04-12T02:34:04.409Z","repository":{"id":104217120,"uuid":"345459776","full_name":"tush-tr/react-practices","owner":"tush-tr","description":"Introduction to React.js and some practice projects in React.js","archived":false,"fork":false,"pushed_at":"2022-05-21T11:24:59.000Z","size":2769,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-03T14:48:32.396Z","etag":null,"topics":["html","javascript","javascript-es6","jsx","nodejs","react","react-components","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tush-tr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-07T21:43:02.000Z","updated_at":"2023-04-11T15:35:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"c6df780d-88bf-4c75-a6d5-7e2662124553","html_url":"https://github.com/tush-tr/react-practices","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tush-tr%2Freact-practices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tush-tr%2Freact-practices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tush-tr%2Freact-practices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tush-tr%2Freact-practices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tush-tr","download_url":"https://codeload.github.com/tush-tr/react-practices/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246140592,"owners_count":20729802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","javascript","javascript-es6","jsx","nodejs","react","react-components","reactjs"],"created_at":"2024-10-02T16:20:26.956Z","updated_at":"2026-04-12T02:33:59.357Z","avatar_url":"https://github.com/tush-tr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Start your React development Journey from Here..\n\nSome projects I made during learning react are here\n### \u003ca href=\"keeper-app\"\u003eKeeper App\u003c/a\u003e\n\n\n## Contents\n\u003cli\u003e\u003ca href=\"#what\"\u003eWhat is React?\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#intro\"\u003eIntroduction to Babel and JSX.\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#jsinjsx\"\u003e JavaScript Expressions inside JSX\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#jsx-styling\"\u003eJSX Attributes and styling React Elements\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#react-components\"\u003eReact Components\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#es6-1\"\u003eJavaScript ES6 Import and Export modules\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#local-setup\"\u003eLocal Environment Setup for React development\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#props\"\u003eProps in React\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#mapping\"\u003eMapping Components \u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#es6-functions\"\u003eSome new ES6 functions on arrays and arrow functions\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#conditional\"\u003eConditional Rendering in react \u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#state\"\u003eWhat is state? declarative and imperative programming\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#usestate\"\u003eUse State Hook\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#destructuring\"\u003eDestructuring in JavaScript\u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#handling\"\u003eHandling events in React \u003c/a\u003e\n\u003cli\u003e\u003ca href=\"#components\"\u003eClass components vs Functional Components\u003c/a\u003e\n\n\u003ch1 id=\"what\"\u003e What is React? \u003c/h1\u003e\nA javascript library for building user interfaces.\u003cbr\u003e\nWe end up breaking down a very complex user interface structure into a component\ntree.\u003cbr\u003e\u003cbr\u003e\n\n\u003ch1 id=\"intro\"\u003e Introduction to React, Babel and JSX\u003c/h1\u003e\n\n### Start HTML template for react project\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n \n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n \n  \u003ctitle\u003eReact App\u003c/title\u003e\n\u003c/head\u003e\n \n\u003cbody\u003e\n  \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003cscript src=\"../src/index.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n \n\u003c/html\u003e\n```\n\nEverything that we create using react will go inside this div(id=root)\u003cbr\u003e\n\nAll of code we do in the index.js file in JavaScript using react.\n\nThe first thing we have to do in index.js is require react and react-dom modules.\n```javascript\nvar React = require(\"react\");\nvar ReactDOM = require(\"react-dom\");\n```\n\n### Render Function\n\n\u003cb\u003eReactDOM.render()\u003c/b\u003e\n\nto use React to actually create something on screen ,\n\nwe're going to use the render function.\n\nrender function takes three inputs. The first input is \"WHAT TO SHOW\".\n\nsecond input is \"WHERE TO SHOW IT\", And finally we\n\ncan also add a optional callback to tell us when that render function has completed.\n```javascript\nReactDOM.render(\"What to show\",\"Where to show\",()=\u003e{\n  \n})\n```\n\n### Writing Hello World in React\n```javascript\nvar React = require(\"react\");\nvar ReactDOM = require(\"react-dom\");\n \nReactDOM.render(\u003ch1\u003eHello World\u003c/h1\u003e,document.getElementById(\"root\"))\n```\n\n## What is JSX?\n\nwe're inside a JavaScript file\nand we're able to write plain HTML without any sort of fancy angle brackets or for example the EJS\nbrackets or anything to denote that this is somehow not Javascript.\nSo what exactly is this magic?\nWell this is what JSX does. React works by creating these JSX files, so files where we've got\nHTML right in the body of a JavaScript file. And what happened behind the scenes is that our HTML\nis picked up by a compiler and it gets converted or compiled down to actual JavaScript. And the compiler\ncomes from including this React module right here.\n\n## What is Babel?\n\ninside the React module, there is something called Babel. And Babel, as they tell you, is a JavaScript compiler. So it's able to take next generation JavaScript like ES 6, 7, 8 and compile it down\nto a version of JavaScript that every browser can understand.\nAnd this includes compiling JSX down to plain old JavaScript.\n\n\n## React vs Vanilla JavaScript\n\n```javascript\nReactDOM.render(\u003ch1\u003eHello World\u003c/h1\u003e,\n  document.getElementById(\"root\"))\n  \n// Vanilla js\nvar h1 = document.createElement('h1');\nh1.innerHTML = \"Hello World\";\ndocument.getElementById(\"root\").appendChild(h1);\n```\n\n## Babel working\n\nBabel actually goes a lot further than just\nrendering JSX, It allows us to use some next generation JavaScript,\nso for example ES6 OR ES 2015. And we can use some of the new constructs that are available through\nthese new versions of JavaScript and it's able to compile it down into bog standard normal JavaScript.\n\n## Import Keyword- JavaScript ES6\n\ninstead of requiring the React module and setting it to a variable and doing all of this, the new\nway of doing it is to simply just import React from a particular module or a particular location,\nso in our case it's still the React module right here.\n```javascript\nimport React from \"react\";\n```\n\n### Note:-\n\nwhen we use this render method it can only take a single HTML element.\nThat means if you have two HTML elements back to back, then this is not going to work.\nSo we can wrap up all the element to a element of HTML just like this-\n\n```javascript\nReactDOM.render(\u003cdiv\u003e\u003ch1\u003eHello World\u003c/h1\u003e\u003cp\u003eThis is a paragraph\u003c/p\u003e\u003c/div\u003e,\n  document.getElementById(\"root\"))\n```\n\n\u003chr\u003e\n\n\u003ch1 id=\"jsinjsx\"\u003e JavaScript Expressions inside JSX\u003c/h1\u003e\n\n### Use JS Expressions inside JSX\nIf we wanted to insert JavaScript code inside the HTML inside the JavaScript file then what we have to do is to simply wrap the JavaScript inside a set of curly braces.\n\n```javascript\nconst name = \"Pan Card\";\nconst Bb = ()=\u003e{\n  return(\n    \u003cdiv\u003e\n      \u003ch1\u003eMy document List\u003c/h1\u003e\n      \u003cul\u003e\n        \u003cli\u003e{name}\u003c/li\u003e \n      \u003c/ul\u003e\n    \u003c/div\u003e\n  )\n}\nReactDOM.render(\u003cBb /\u003e,\ndocument.getElementById(\"root\"))\n```\n\nNote:-\n\u003eWe can add any JavaScript expression in between these curly braces which is injecting code into our HTML elements in our JSX file. But we can't write JavaScript statements.\n\n### Statements vs Expressions in JavaScript\n#### Statements\nWhen we write programs - we describe the sequences of actions that should be performed to get a desired result. In programming languages those actions are called statements. So every Javascript program basically consists of statements. In Javascript statements are separated by semicolons.\n\n```javascript\nlet declaredVariable; // variable declaration is a statement\nlet otherVariable = 0; // even with assignment\nfunction functionCall() { // function declaration is a statement\n}\nif(true){} // if is statement\n2+2; // even this is statement\n```\n\n#### Expressions\nSimply speaking an expression returns a value:\n```javascript\n2+2\ntrue\ntrue \u0026\u0026 false\nfunctionCall() // whatever the function returns\ndeclaredVariable // whatever the variable value was\ndeclaredVariable = 'new value' // assignment is an expression\n```\n### Template literals in ES6\n\nif you come from another language you might know it as\nstring interpolation.\n\nSo basically injecting strings into a piece of JavaScript.\n\nSo the way we would do that is add a set of backticks and in between the backticks we can add a dollar\nsign and then another set of curly braces\nand inside here we can add a piece of JavaScript.\n```HTML\n\u003ch1\u003eHello {`${fname} ${lname}`} \u003c/h1\u003e\n```\n\n\u003chr\u003e\n\n\u003ch1 id=\"jsx-styling\"\u003e JSX Attributes and styling React Elements \u003c/h1\u003e\n\nEven though JSX looks like HTML, it's still being rendered down to JavaScript. And\nin JavaScript the property to access all of the classes that exist on an element is a property called\nclassName.\n\nSo In JSX we use html attributes in a different way same as in Javascript.\n```javascript\n\u003ch1 className=\"headings\"\u003eMy Favourite Foods\u003c/h1\u003e\n```\n### Including jsx file in HTML file\n```HTML\n\u003cscript src=\"../src/index.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\nOur HTML file doesn't know that this index.js file is in fact a JSX file. So how to solve this...\n\n```HTML\n\u003cscript src=\"../src/index.js\" type=\"text/JSX\"\u003e\u003c/script\u003e\n```\nwhen we add an attribute in normal\nHTML, it's not camelcase like this where the first word is lowercase and the next words are capitalized\nlike the end for name here.\n\u003e Attribute name should be in camel case\n```JSX\n\u003ch1 className=\"headings\" contentEditable=\"true\"\u003e\n```\n\n\u003e Tags should be self closing \n\n```JSX\n\u003cimg src=\"nsfnoe\" /\u003e\n```\n\n## Inline Styling in React JSX\nIn Javascript, it wants this value for the style property as a Javascript object.\nJavascript objects look like this:\n```JavaScript\n{\ncolor: \"red\",\n}\n```\nthey exist in a set of curly braces\nand then they have key-value pairs.\n\nSo in this case, the key would be the word color and this would behave a bit like a variable, so it's not a string.\nWhereas the value, in terms of CSS anyways, is going to be a string.\nSo in this case, it will be red.\nAnd each of these key-value pairs in a Javascript object is separated by commas not semicolons as you\nwould see in the style sheet.\n```JSX\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nconst stylesheet = {\n  headingStyle: {\n    fontSize: \"20px\",\n    border: \"1px solid black\",\n    color: \"red\"\n  },\n  contentStyle: {\n    color: \"pink\"\n  }\n};\nReactDOM.render(\n  \u003cdiv\u003e\n    \u003ch1 style={stylesheet.headingStyle}\u003eHello World!\u003c/h1\u003e\n    \u003cp style={stylesheet.contentStyle}\u003e\n      loremrerniovn prov eivr ikepv evi gkpev ti\n    \u003c/p\u003e\n  \u003c/div\u003e,\n  document.getElementById(\"root\")\n);\n\n```\n\nIf at some point in our code something changes let's say the user did something or the day changed or the time changed became\nmorning to night, something happens and we wanted to change the style of our h1.\n\nWe don't have to touch any of our code in here.\nAll we have to do is to just update the properties of our custom style object.\n\n\n```JSX\nstylesheet.headingStyle.color = \"blue\";\n```\n\n\u003chr\u003e\n\n\u003ch1 id=\"react-components\"\u003e React Components \u003c/h1\u003e\n\nGive your components a name that is in Pascal case which means that every single word has the first letter capitalized.\nCall this component heading and let's open up a set of parentheses and open up a set of curly braces.\n\nNow in this heading function, all that it's going to do is to return a HTML element that is created using\n\nJavascript.\n```JSX\nconst Heading = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eMy Favourite Foods\u003c/h1\u003e\n      \u003cul\u003e\n        \u003cli\u003eBacon\u003c/li\u003e\n        \u003cli\u003eJamon\u003c/li\u003e\n        \u003cli\u003eNoodles\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## How react differentiate between custom components vs DOM elements\n\nAll of our components have names which start with\na capital letter using Pascal case.\nAnd this allows React to differentiate between the custom components that we're building versus the\nHTML elements that we're trying to get hold of that exists in the DOM.\n\n### Rendering our custom component\n```JSX\nReactDOM.render(\u003cHeading\u003e\u003c/Heading\u003e, document.getElementById(\"root\"));\n```\n\nWe can do like this too\n```JSX\nReactDOM.render(\u003cHeading /\u003e, document.getElementById(\"root\"));\n```\n\u003e \u003ca href=\"https://github.com/airbnb/javascript/tree/master/react\"\u003eAirBNB React Styling Guide\u003c/a\u003e\n\n## Including Components per seperate file\nIf I had a very large website and I had all of my components cluttering index\n.js that would be terrible.\n\u003cbr\u003eSo we're going to use a ES6 feature where we import our heading component from a separate file and it's\ngoing to be very similar to what we're doing with React and ReactDOM. But in this case we're going to be doing all of the importing and exporting ourselves.\u003cbr\u003e\nwe would have all of our components separated into individual files with the JSX extension.\nlike this--\n\u003e Heading.jsx\n\n#### Importing jsx files into index.js file\nwe have to use the ES6 import export functionality.\n#### Export Function\n\nIn the file where we've got our component, We're going to export this heading function as the default export.\n```JSX\nexport default Heading;\n```\n\nSo I'm going to import heading from that heading.jsx file.\n\nSo I'm going to use the relative path\n\nso ./, and then heading.jsx\n\n\nBut of course in ES6 the extension of the file is actually optional.\n```JSX\nimport Heading from \"./Heading\";\n```\nIn mostly cases index.js just has a custom component called App. And instead of all of these things,\u003cbr\u003e\nwe would have a custom file called App.jsx and inside here we would have all import statements.\u003cbr\u003e\nwe would render our component as a function called App which returns a div\nwhich contains that heading custom component as well as the list custom component.\n\n#### Index.js file--\n```JSX\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nReactDOM.render(\n  \u003cApp /\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n#### App.jsx file\n```JSX\nimport React from \"react\";\nimport Heading from \"./Heading\";\nimport List from \"./list\";\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cHeading /\u003e\n      \u003ch1\u003eMy fav Places\u003c/h1\u003e\n      \u003cList /\u003e\n    \u003c/div\u003e\n  );\n};\nexport default App;\n```\n\nremember that each of these components can now be reused as and when we want to.\n\u003chr\u003e\n\n\u003ch1 id=\"es6-1\"\u003e JavaScript ES6 Import and Export modules \u003c/h1\u003e\n\n#### Exporting something from a module(file) of javascript\n\n\n\nmath.js file\n```javascript\nconst pi = 3.14;\nexport default pi;\n```\n\n#### Importing the file in another  file\n```javascript\nimport pi from \"./math\";\n// pi  3.14\n```\ncreating a default export means that when another file writes import something\nfrom this file, that something is going to be equivalent to the default export. You can use any variable to import that file default export will be imported.\n```javascript\nimport x from \"./math\";\n// x == 3.14\n```\n\nwhat if we had more than one thing in this file math.js?\n### How would we export multiple things?\nIf you want to export more from this file you can export without using default like this.\n\n```javascript\nconst pi = 3.14;\nconst add=(a,b)=\u003e{\n  return a+b;\n}\nexport default pi;\nexport {add};\n```\n\nAnd how we can import these other things to an external file?\n```javascript\nimport {add} from \"./math\"\n```\n\n\u003eWhat import and\nexport and the concept of modules allows us to do is to really be able to start splitting up our large\nJavascript files into individual more manageable components.\n\nHow to import everything from a module?\n```javascript\nimport * as m from \"./file\";\n```\n\n\u003ch1 id=\"local-setup\"\u003e Local Environment Setup for React development\u003c/h1\u003e\n\n\u003col\u003e\n\u003cli\u003eCheck node js is up to date\n\u003cli\u003eInstall VS code(or any editor of your choice)\n\u003cli\u003e\u003ca href=\"https://reactjs.org/docs/create-a-new-react-app.html\"\u003eCreate React App\u003c/a\u003e\n\nEasiest way to create a new react application.\n```Bash\n$ npx create-react-app my-app\n```\n\u003cli\u003eRunning React App\n\n```Bash\n$ cd my-app\n$ npm start\n```\n\nInside our source folder\nthe only ones that we want to keep is the index.js.\nAnd we're going to delete everything else.\n\u003c/ol\u003e\n\n\n\u003chr\u003e\n\n\u003ch1 id=\"props\"\u003e Props in React \u003c/h1\u003e\nWhen we code in plain html we can't define our own attributes as well as elements.\n But in React components we have almost as a custom HTML element then we can define these attributes.\nAnd in the React component world, those attributes are called properties and you'll usually hear them\nreferred to as \u003cb\u003e props\u003c/b\u003e.\n\nSo let's create a reusable component card, let's say every card has students informatoion like name, class, section, roll no.\n\n“props” (which stands for properties) object argument with data and returns a React element.\n\n\n```java\nconst Student = (props)=\u003e{\n  return(\n    \u003cdiv\u003e\n      \u003ch2\u003e{props.name}\u003c/h2\u003e\n      \u003ch2\u003e{props.rollno}\u003c/h2\u003e\n      \u003ch2\u003e{props.class}\u003c/h2\u003e\n      \u003ch2\u003e{props.section}\u003c/h2\u003e\n      \u003c/div\u003e\n  )\n}\n```\nHow to use these reusable components with props? \n```HTML\n\u003cStudent name=\"Tushar Rajpoot\" rollno=\"24\" class=\"12th\" section=\"B1\" /\u003e\n```\nWhen React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.\n\n\n\n\n\u003chr\u003e\n\u003ch1 id=\"mapping\"\u003e Mapping Components \u003c/h1\u003e\nMapping components make it easy for us to\nmap all of individual custom pieces of data to each of these custom components.\n\n```HTML\n\u003cCard\n    name={contacts[0].name}\n    img={contacts[0].imgURL}\n    tel={contacts[0].phone}\n    email={contacts[0].email}\n/\u003e\n\u003cCard\n    name={contacts[1].name}\n    img={contacts[1].imgURL}\n    tel={contacts[1].phone}\n    email={contacts[1].email}\n/\u003e\n```\nwe don't need now to repeat these components\n\n## Map function\nmap function is a Javascript function that's really useful for handling arrays such as our contacts\narray.\n\nlike this array currently contains three items. And each of these are a Javascript object with\nthe same properties but different values.\n```javascript\nconst contacts = [\n  {\n    id: 1,\n    name: \"Beyonce\",\n    imgURL:\n      \"https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg\",\n    phone: \"+123 456 789\",\n    email: \"b@beyonce.com\"\n  },\n  {\n    id: 2,\n    name: \"Jack Bauer\",\n    imgURL:\n      \"https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg\",\n    phone: \"+987 654 321\",\n    email: \"jack@nowhere.com\"\n  },\n  {\n    id: 3,\n    name: \"Chuck Norris\",\n    imgURL:\n      \"https://i.pinimg.com/originals/e3/94/47/e39447de921955826b1e498ccf9a39af.png\",\n    phone: \"+918 372 574\",\n    email: \"gmail@chucknorris.com\"\n  }\n];\n```\n\n### use map function for using this array for rendering its items\nThis map function as the input\nthe thing that should go inside these parentheses, it expects an actual function.\nSo in this case we're calling a function and then passing it a function.\n\n```javascript\narr.map((element)=\u003econsole.log(element))\n```\n\n### functional programming\nwhere instead of\npassing values around your code, you're passing functions into functions even into functions.\n\nNow we use map function for rendering our contact cards from contact array--\n\nmake a createCard function that returns card with props of passed argument\n\n```javascript\nconst createCard = (element)=\u003e{\n  return \u003cCard name={element.name} /\u003e\n}\n```\n\n\nadd map function instead of many card components like this\n```JSX\n{contacts.map(createCard)}\n```\n\n\nwhat the map function does is it loops through this\narray of contacts\nand for every single item that exists in the array, it calls the createCard function and it passes over\neach of the objects inside the array.\n\nwe can also do the same thing  like this\n```javascript\n{contacts.map((contact)=\u003e{\n    return \u003cCard name={contact.name}\n    img={contact.imgURL}\n    tel={contact.phone}\n    email={contact.email} \n    /\u003e\n    })\n}\n```\n\n### key property\nwe will have to give components a property that has to be\ncalled key. And this property has to be something that is unique amongst each of these card components\nthat's being created using this loop.\n\n```HTML\n{contacts.map((contact)=\u003e{\n    return \u003cCard\n    key={contact.id}\n    name={contact.name}\n    img={contact.imgURL}\n    tel={contact.phone}\n    email={contact.email} \n    /\u003e\n    })\n}\n```\n\nkey prop has to be spelt exactly like this and it's expected by React. And the value can be\na string or it can be a number, but it must be unique across all of the repeated components.\n\n\nkey property for each React component is a special property.\nAnd it's used to ensure the right order of items goes into the tree, We can't use it as a prop.\n\n\n\u003chr\u003e\n\u003ch1 id=\"es6-functions\"\u003e Map/Reduce/Filter ES6 functions\u003c/h1\u003e\n\nwe will look at some of the related functions\nthat help us deal with arrays such as map, filter, reduce find, and find index.\n\n## map() function\n\u003cb\u003eCreate a new array by doing something with each item in an array.\u003c/b\u003e\n\nlet's look at this array I have of numbers\n```javascript\nlet numbers = [12,34,56,545];\nconst double = (n)=\u003e{\n    return  n*2;\n}\nlet newNumbers = numbers.map(double);\n```\n\nIf I pass this function double into my map function, then it's going to loop through my numbers array\nand for each of the numbers in there it's going to put it as the input of this function and output a\nnew array with each item replaced with double the size of the previous one.\n\n#### How to do the same thing using foreach method\n```javascript\nlet newNumbers = [];\nnumbers.foreach((n)={\n    newNumbers.push(n*2);\n})\n```\n\nSo it's more concise using map because this function itself actually returns an output\nwhich is a new array.\n\n\n## Filter function\nCreate a new array by keeping the items that return true.\n```javascript\nconst num = [2,3,5,7,12,45,34];\nconst newArr = num.filter((e)=\u003ee\u003c10)\nconsole.log(newArr)\n```\nDo the same thing with foreach--\n```javascript\nlet newArr = [];\nnum.forEach((e)=\u003e{\n  if(e\u003c10){\n    newArr.push(e)\n  }\n})\n```\n\n## Reduce Function\nAccumulate a value by doing something to each item in an array.\n\nget sum of all elements in an array using foreach\n```javascript\nlet arr = [1,2,53,7765,3,5];\nlet sum = 0;\narr.foreach((num)=\u003e{\n    sum+=num;\n})\n```\nDo the same thing using reduce function\n```javascript\nlet sumOfnum = num.reduce(function(Accumulator, currentnumber){\n  return Accumulator+currentnumber;\n})\n```\n\n## Find \nFind the first item that matches from an array.\n\n```javascript\nlet findnum = numbers.find((e)=\u003ee\u003e10);\n```\n\n## FindIndex - \nfind the index of the first item that matches.\n```javascript\nlet findnum = numbers.findIndex((e)=\u003ee\u003e10)\n// OR\nfindnum = numbers.findIndex((e)=\u003e{\n    return e\u003e10;\n})\n```\n\n## Arrow Functions\n\nalso known as the fat arrow.\n\nArrow functions allow us to write shorter function syntax:\n```js\nlet hello = () =\u003e {\n  return \"Hello World!\";\n}\n```\n\n\u003chr\u003e\n\n\u003ch1 id=\"conditional\"\u003e Conditional Rendering in React\u003c/h1\u003e\nwhat if we have to render a component based on the condition?\u003cbr\u003e\nAs we know in JSX we can only use js expression inside curly braces but we can't use javascript statements and we can't use if/else statement inside our jsx code.\u003cbr\u003e\nso what we can do for this?\n\u003cbr\u003e\ncreate a new function(or component) and return our jsx code conditionaly like this\n\n\n```html\nconst RenderOrNot = ()=\u003e{\n  if(true){\n    return(\n      \u003ch1\u003eYou are In\u003c/h1\u003e\n    )\n  }\n  else{\n    return(\n      \u003ch1\u003eNo you can't go inside\u003c/h1\u003e     \n    )\n  }\n}\n```\n\n## Ternary Operator\n\n```javascript\ncondition ? Do if true : Do if false\n```\n\nwe can use ternary operator inside jsx code\n```HTML\nfunction App() {\n  return (\n    \u003cdiv className=\"container\"\u003e    \n      {istrue ? \u003ch1\u003eYou are in\u003c/h1\u003e : \u003ch1\u003eYou can't go inside\u003c/h1\u003e}\n    \u003c/div\u003e\n  );\n}\n```\n\n## AND operator\n\n### \u0026\u0026 in JS\n\u003cpre\u003e\n(Expression \u0026\u0026 Expression)\n(x\u003e2 \u0026\u0026 x\u003c8)\n\u003c/pre\u003e\n\n### \u0026\u0026 in React\n\u003cpre\u003e\ncondition \u0026\u0026 Expression\ntrue \u0026\u0026 expression\nfalse \u0026\u0026 \u003cdel\u003eexpression\u003c/del\u003e\n\u003c/pre\u003e\n\n\u003chr\u003e\n\u003ch1 id=\"state\"\u003e State in React \u003c/h1\u003e\nthis is a really central concept to how React does things.\u003cbr\u003e\nThe idea is that the UI(user interface )that somebody's looking at your website sees is a\nfunction of the state of your app.\n\n```javascript\nlet isDone = false;\nfunction App(){\n    return(\n        \u003cp style={isDone ? { textDecoration: \"line-through\" } : null}\u003eTodo Task\u003c/p\u003e\n    )}\n```\n\n\n\u003e\u003cbr\u003e\n\u003ewe have a user interface that is dependent upon the value of a state variable.\u003cbr\u003e\n\u003e\u003cbr\u003e\n\n## Declarative programming\nthis kind of programming is often known as \u003cb\u003edeclarative programming.\u003c/b\u003e We're declaring\nwhen we're writing our code how our user interface should look under different conditions dependent\nupon the state.\n\n## Imperative programming\nthis is what we've been doing all along\nusing Javascript.\n```js\ndocument.getElementById(\"root\").style.textDecoration = \"line-through\";\n```\n\n\n\u003ch1 id=\"usesate\"\u003eUse State Hook\u003c/h1\u003e\n\n## What are hooks?\nA way of being able to make our website interactive and actually have changeable state.\n\n### we can't change rendered elements inside our jsx code\nIf we want to update we have to re-render all of this.\none way of doing this would be to call ReactDOM.render all over again inside our function(for changing elements ).\n```JSX\nvar count = 0;\nconst increase = ()=\u003e{\n  count++;\n  console.log(\"Got clicked\")\n}\n\nReactDOM.render(\n  \u003cdiv className=\"container\"\u003e\n    \u003ch1\u003e{count}\u003c/h1\u003e \n    {\n        // this will not gonna changed(value of count) because \n        // It has rendered once\n    }\n    \u003cbutton onClick={increase}\u003e+\u003c/button\u003e\n  \u003c/div\u003e,\n  document.getElementById(\"root\")\n);\n```\n\nSo what we have to do for updating everytime button gets clicked is render elements everytime like this\n```JSX\nvar count = 0;\nconst increase = ()=\u003e{\n  count++;\n  ReactDOM.render(\n    \u003cdiv className=\"container\"\u003e\n      \u003ch1\u003e{count}\u003c/h1\u003e\n      \u003cbutton onClick={increase}\u003e+\u003c/button\u003e\n    \u003c/div\u003e,\n    document.getElementById(\"root\")\n  );\n}\n```\n\nWe have all of this repetition\nthat's not really doing anything for us.\n\n## UseState hook\n\nSo how do people actually solve this problem using React?\nWell this is where hooks come in. And there's a hook code useState that is perfect for this situation.\nBut one of the rules for using hooks is that you must use a hook inside a functional component.\n\n\u003eSo we have to create a function that renders a component and then inside that function we can use hooks.\n\n```javascript\nfunction App() {\n\n  const state = useState();\n\n  function increase(){\n    \n  }\n\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003ch1\u003e{count}\u003c/h1\u003e\n      \u003cbutton onClick={increase}\u003e+\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nif we console log our usestate variable value it will return like this\n```\n[undefined, ƒ bound dispatchAction()]\n```\n\nif we pass a value in our useState() hook like this\n```js\nconst state = useState(0); // inside parentheses our starting state\n// output- [0, ƒ bound dispatchAction()]\n// we can get out starter state like this-\nconsole.log(state[0]);\n```\n\n### Destructuring\n in JavaScript ES6 there's this concept called destructuring and what it allows you to do is to destructure a complex structure.\nSo the complex things in JavaScript are objects and arrays.\n\nlet's say we have an array like this one\n```js\nconst students = [\"Tushar\", \"Rahul\",\"Sahul\"];\n```\nWe can destructure this array,so that instead of having this name students, we can use a set of square\nbrackets. like this and  then we can provide some names for each of the\nelements inside the array ordered by their positions.\n```js\nconst [student1, student2, student3] = [\"Tushar\", \"Rahul\",\"Sahul\"];\n```\n\n\u003e Note: only when working with arrays - arrays are declared using square brackets, so we also deconstruct them using a square bracket.\n\n\nWe can use this concept with our state like this\n```js\nconst [count] = useState(0);\n```\nso count is our starter state now and now we can use or render our state like this--\n\n```HTML\n\u003ch1\u003e{count}\u003c/h1\u003e\n```\n\nSo how do we use this useState hook to update its value?\n\nWell remember that we mentioned that this array that gets returned from this function has two items.\nThe first one is a value\nand the second one is a function.\nso lets give the function a name like this-\n```js\nconst [count, setCount] = useState(0);\n```\n\nand now we can use this function for interactivity in our starter state\n```js\nfunction App() {\n  const [count, setCount] = useState(0);\n  function increase(){\n    setCount(12)\n  }\n  return (\n    \u003cdiv className=\"container\"\u003e\n      \u003ch1\u003e{count}\u003c/h1\u003e\n      \u003cbutton onClick={increase}\u003e+\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\nnow if we want to increase our starter state by 1 on pressing the button so we can do like this\n```js\nfunction increase(){\n    setCount(count+1)\n  }\n```\n\n\u003chr\u003e\n\n\u003ch1 id=\"destructuring\"\u003e Destructuring Assignment in JavaScript\u003c/h1\u003e\nThe destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.\n\n```js\nlet a, b, rest;\n[a, b] = [10, 20];\n\nconsole.log(a);\n// expected output: 10\n\nconsole.log(b);\n// expected output: 20\n\n[a, b, ...rest] = [10, 20, 30, 40, 50];\n\nconsole.log(rest);\n// expected output: Array [30,40,50]\n\n```\n## Object destructuring\nBasic assignment\n\n```js\nconst user = {\n    id: 42,\n    is_verified: true\n};\n\nconst {id, is_verified} = user;\n\nconsole.log(id); // 42\nconsole.log(is_verified); // true\n```\nlets destructure this array of objects\n```js\ncars = [\n  {\n    model: \"Honda Civic\",\n    //The top colour refers to the first item in the array below:\n    //i.e. hondaTopColour = \"black\"\n    coloursByPopularity: [\"black\", \"silver\"],\n    speedStats: {\n      topSpeed: 140,\n      zeroToSixty: 8.5\n    }\n  },\n  {\n    model: \"Tesla Model 3\",\n    coloursByPopularity: [\"red\", \"white\"],\n    speedStats: {\n      topSpeed: 150,\n      zeroToSixty: 3.2\n    }\n  }\n];\n```\n```js\nlet [honda, tesla] = cars\nlet {speedStats: {topSpeed: hondaTopSpeed}} = honda;\nlet {speedStats:{topSpeed: teslaTopSpeed}} = tesla;\nlet {coloursByPopularity:[hondaTopColour]} = honda;\nlet {coloursByPopularity:[teslaTopColour]} = tesla;\n```\n\n\u003chr\u003e\n\n\u003ch1 id=\"handling\"\u003e Handling events in React\u003c/h1\u003e\n\nlet's say we have a function \n\n```js\nconst clicked =()=\u003e{\n    console.log(\"Clicked\")\n  }\n```\n\nand we can use this function to handle onclick event like this\n```js\n\u003cbutton onClick={clicked}\u003eSubmit\u003c/button\u003e\n```\n\nif we have to change some content on the page after clicking the button, then we can use our useState hook like this\n```js\nconst [headingText, setHeadingText] = useState(\"Hello\");\n\n  const clicked =()=\u003e{\n    console.log(\"Clicked\")\n    setHeadingText(\"Hello Tushar\")\n  }\n```\n\n\u003e\u003ca href=\"https://codesandbox.io/s/event-handling-in-react-forked-usorr?file=/src/components/App.jsx\"\u003eSee this sandbox for more about handling events \u003c/a\u003e\n\n\u003chr\u003e\n\n\u003ch1 id=\"components\"\u003eClass Components vs Functional Components \u003c/h1\u003e\n\nonce upon a time, there were two ways of adding state into a React app.\nOne way or what you might call functional components, look like this.\n\n```js \nfunction App(){\n  return(\n    \u003ch1\u003eHello\u003c/h1\u003e\n  )\n}\n```\n\nthere's also another way that you can in fact create React components. Instead of splitting\nindividual components into functions,\nyou can also create a class. And the only difference is the keyword, instead of function becomes class.\n\nClasses are not called, so they don't have these parentheses.\nAnd this class must extend something that comes from the React module something called component.\nAnd this turns your app class into a React component class. And in order to render what you want to see\ninside this component, you have to add your code inside a render method.\n```js\nclass App extends React.Component {\n  render() {\n    return \u003ch1\u003eHello\u003c/h1\u003e;\n  }\n}\n```\nin the past, the main reason why people converted their functional components into class components\nwas because it was required in order to have state.\n\u003ca href=\"https://reactjs.org/docs/state-and-lifecycle.html\"\u003eState and Lifecycle\u003c/a\u003e\n\n## Converting a Function to a Class\nYou can convert a function component like Clock to a class in five steps:\n\u003col\u003e\n\u003cli\u003eCreate an ES6 class, with the same name, that extends React.Component.\n\u003cli\u003eAdd a single empty method to it called render().\n\u003cli\u003eMove the body of the function into the render() method.\n\u003cli\u003eReplace props with this.props in the render() body.\n\u003cli\u003eDelete the remaining empty function declaration.\n\u003c/ol\u003e\n\n```js\nfunction Clock(props) {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eHello, world!\u003c/h1\u003e\n      \u003ch2\u003eIt is {props.date.toLocaleTimeString()}.\u003c/h2\u003e\n    \u003c/div\u003e\n  );\n}\nReactDOM.render(\n  \u003cClock /\u003e,\n  document.getElementById('root')\n);\n// OR\nclass Clock extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eHello, world!\u003c/h1\u003e\n        \u003ch2\u003eIt is {this.props.date.toLocaleTimeString()}.\u003c/h2\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nSo what does managing state using classes actually look like?\n\nCounter app using class component\n```js\nimport React from \"react\";\n\nclass ClassComponent extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      count: 0\n    };\n    this.increase = this.increase.bind(this);\n  }\n\n  increase() {\n    this.setState({ count: this.state.count + 1 });\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003e{this.state.count}\u003c/h1\u003e\n        \u003cbutton onClick={this.increase}\u003e+\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default ClassComponent;\n```\ncounter app using functional component and hooks\n```js\nfunction FunctionalComponent() {\n  const [count, setCount] = useState(0);\n\n  function increase() {\n    setCount(count + 1);\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{count}\u003c/h1\u003e\n      \u003cbutton onClick={increase}\u003e+\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\u003ewhat the React team recommends is that if you're writing new code that you should start using hooks instead of classes because this is a much easier way of managing state.\n\n\u003eyou can only use hooks with functional components. You can't use it inside a class component.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003e \u003cbr\u003e\n\u003e Tushar Rajput\u003cbr\u003e\n\u003e \u003ca href=\"https://tush-tr.github.io/\"\u003etush-tr.github.io\u003c/a\u003e\n\u003e \u003cbr\u003e\n\u003e\u003cbr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftush-tr%2Freact-practices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftush-tr%2Freact-practices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftush-tr%2Freact-practices/lists"}