{"id":2108,"date":"2022-01-15T06:30:47","date_gmt":"2022-01-15T06:30:47","guid":{"rendered":"https:\/\/codeinsightacademy.com\/blog\/?p=2108"},"modified":"2022-09-27T11:12:08","modified_gmt":"2022-09-27T11:12:08","slug":"react-cheat-sheet","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/javascript\/react-cheat-sheet\/","title":{"rendered":"React Cheat Sheet"},"content":{"rendered":"\n<p>React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.<\/p>\n\n\n\n<p>Create new react project<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm -v\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i npx<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app my-react-app<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>cd my-react-app\ncode .<\/code><\/pre>\n\n\n\n<p>Run from terminal<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm start\n\nOR\n\nnpm start --port 8000<\/code><\/pre>\n\n\n\n<p>Open Browser and run the react app http:\/\/localhost:3000 OR http:\/\/ipaddress:3000<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/codeinsightacademy.com\/blog\/http:\/\/codeinsightacademy.com\/blog\/wp-content\/uploads\/2022\/01\/react.png\"><img loading=\"lazy\" width=\"713\" height=\"530\" src=\"https:\/\/codeinsightacademy.com\/blog\/http:\/\/codeinsightacademy.com\/blog\/wp-content\/uploads\/2022\/01\/react.png\" alt=\"\" data-id=\"2111\" data-link=\"https:\/\/codeinsightacademy.com\/blog\/javascript\/react-cheat-sheet\/attachment\/react\/\" class=\"wp-image-2111\"\/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>App.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import logo from '.\/logo.svg';\nimport '.\/App.css';\n\nfunction App() {\n  return (\n    &lt;&gt;\n      <strong>&lt;h1&gt;Test App&lt;\/h1&gt;<\/strong>\n    &lt;\/&gt;\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<p>Create new component and use <strong>click<\/strong> and <strong>change<\/strong> event<\/p>\n\n\n\n<p>src\/components\/Add.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Fragment, useState } from \"react\";\n\n\nfunction Add () {\n\n    const &#91; num1, setNum1 ] = useState(0);\n    const &#91; num2, setNum2 ] = useState(0);\n    const &#91; result, setResult ] = useState(0);\n\n    function addFun() {\n        setResult(num1 + num2);\n    }\n\n    return (&lt;Fragment&gt;\n        &lt;h1&gt;Addition of two numbers&lt;\/h1&gt;\n        &lt;input type=\"text\" onChange={ e =&gt; setNum1(parseInt(e.target.value)) }\/&gt;\n        &lt;input type=\"text\" onChange={ e =&gt; setNum2(parseInt(e.target.value)) } \/&gt;\n        &lt;button onClick={addFun}&gt;Get Addtion&lt;\/button&gt;\n        &lt;div&gt;{result}&lt;\/div&gt;\n    &lt;\/Fragment&gt;);\n}\n\nexport default Add;<\/code><\/pre>\n\n\n\n<p>Add this Add component in App component as tag &lt;Add \/&gt;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import '.\/App.css';\nimport Add from '.\/components\/Add';\n\nfunction App() {\n  return (\n    &lt;&gt;\n      <strong>&lt;Add \/&gt;\n      &lt;Add \/&gt;<\/strong>\n      &lt;h1&gt;Test App&lt;\/h1&gt;\n    &lt;\/&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>React Properties<\/p>\n\n\n\n<p>App.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import '.\/App.css';\nimport Add from '.\/components\/Add';\n\nfunction App() {\n  return (\n    &lt;&gt;\n      <strong>&lt;Add x=\"5\" y=\"6\"\/&gt;\n      &lt;Add x=\"7\" y=\"8\"\/&gt;<\/strong>\n      &lt;h1&gt;Test App&lt;\/h1&gt;\n    &lt;\/&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>Add.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Fragment, useState } from \"react\";\n\n\nfunction Add (<strong>props<\/strong>) {\n\n    const &#91; num1, setNum1 ] = useState(<strong>parseInt(props.x)<\/strong>);\n    const &#91; num2, setNum2 ] = useState(<strong>parseInt(props.y)<\/strong>);\n    const &#91; result, setResult ] = useState(0);\n\n    function addFun() {\n        setResult(num1 + num2);\n    }\n\n    return (&lt;Fragment&gt;\n        &lt;h1&gt;Addition of two numbers&lt;\/h1&gt;\n        &lt;input type=\"text\" onChange={ e =&gt; setNum1(parseInt(e.target.value)) }\/&gt;\n        &lt;input type=\"text\" onChange={ e =&gt; setNum2(parseInt(e.target.value)) } \/&gt;\n        &lt;button onClick={addFun}&gt;Get Addtion&lt;\/button&gt;\n        &lt;div&gt;{result}&lt;\/div&gt;\n    &lt;\/Fragment&gt;);\n}\n\nexport default Add;<\/code><\/pre>\n\n\n\n<p>Ajax call in React.js<\/p>\n\n\n\n<p>Create new component Users<\/p>\n\n\n\n<p>components\/User.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Fragment } from \"react\";\n\nfunction User(props) {\n\n    \/\/object destructoring assignment\n    const {id, name, username, email} = props.user;\n\n    return (\n        &lt;Fragment&gt;\n            &lt;tr&gt;\n                &lt;td&gt;{props.user.id}&lt;\/td&gt; \n                &lt;td&gt;{props.user.name}&lt;\/td&gt;\n                &lt;td&gt;{username}&lt;\/td&gt;  \n                &lt;td&gt;{email}&lt;\/td&gt;\n            &lt;\/tr&gt;\n        &lt;\/Fragment&gt;\n    );\n\n}\n\nexport default User;<\/code><\/pre>\n\n\n\n<p>components\/UsersListing.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Fragment, useState } from \"react\";\nimport User from \".\/User\";\n\nfunction UsersListing () {\n\n    const &#91; users, setUsers ] = useState(&#91;]);\n\n\n    function getUsers() {\n\n        fetch(\"https:\/\/jsonplaceholder.typicode.com\/users\")\n        .then(response =&gt; response.json())\n        .then(json =&gt; {\n                console.table(json)\n                var rows = &#91;];\n                for(let i = 0; i &lt; json.length; i++) {\n                    rows.push(&lt;User key={i} user={json&#91;i]}\/&gt;);\n                }\n                setUsers(rows);\n            }\n        );\n\n    }\n\n    return (&lt;Fragment&gt;\n        &lt;h1&gt;Users Listing&lt;\/h1&gt;\n        \n        &lt;button onClick={getUsers}&gt;Get Users&lt;\/button&gt;\n\n        &lt;table border='1'&gt;\n            &lt;thead&gt;\n                &lt;th&gt;Id&lt;\/th&gt;\n                &lt;th&gt;Name&lt;\/th&gt;\n                &lt;th&gt;Username&lt;\/th&gt;\n                &lt;th&gt;Email&lt;\/th&gt;\n            &lt;\/thead&gt;\n            &lt;tbody&gt;\n                {users}\n            &lt;\/tbody&gt;\n        &lt;\/table&gt;\n    &lt;\/Fragment&gt;);\n}\n\nexport default UsersListing;<\/code><\/pre>\n\n\n\n<p>Use &lt;UsersListing \/&gt; component in App.js JSX to show users list<\/p>\n\n\n\n<p>Routing<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/REACT\/react_router.asp\">https:\/\/www.w3schools.com\/REACT\/react_router.asp<\/a><\/p>\n\n\n\n<h2>Deploy React App on Github<\/h2>\n\n\n\n<p>Create repository on github<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>git init\ngit add .\ngit commit -m \"first commit\"\ngit branch -M main\ngit remote add origin https:\/\/github.com\/&lt;username&gt;\/&lt;repositoryname&gt;.git<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>git remote set-url origin https:\/\/&lt;githubtoken&gt;@github.com\/&lt;username&gt;\/&lt;repositoryname&gt;.git\n#git clone https:\/\/&lt;username&gt;:&lt;githubtoken&gt;@github.com\/&lt;username&gt;\/&lt;repositoryname&gt;.git<\/code><\/pre>\n\n\n\n<p>To get github token Go To <strong>Profile Settings<\/strong> =&gt; <strong>Developer Settings<\/strong> =&gt; <strong>Personal Access Token<\/strong> =&gt; <strong>Generate New Token<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install gh-pages --save-dev\n<\/code><\/pre>\n\n\n\n<p>vim package.json<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"my-app\",\n  \"version\": \"0.1.0\",\n  <strong>\"homepage\": \"https:\/\/gitname.github.io\/repositoryname\",<\/strong>\n  \"private\": true,\n  \n  \n \"scripts\": {\n    <strong>\"predeploy\": \"npm run build\",\n    \"deploy\": \"gh-pages -d build\",<\/strong>\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run deploy<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>git status\ngit add .\ngit commit -m 'deploy react on github'\ngit push\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>https:\/\/&lt;username>.github.io\/&lt;repositoryname>\/<\/code><\/pre>\n\n\n\n<p>To publish react app locally<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build<\/code><\/pre>\n\n\n\n<p>verify build directory and index.html file <\/p>\n\n\n\n<p>build index.html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"manifest\" href=\"<strong>manifest.json<\/strong>\"\/&gt;\n&lt;title&gt;React App&lt;\/title&gt;\n&lt;script defer=\"defer\" src=\"<strong>.\/static\/js\/main.&lt;yourhash&gt;.js<\/strong>\"&gt;&lt;\/script&gt;\n&lt;link href=\"<strong>.\/static\/css\/main.&lt;yourhash&gt;.css<\/strong>\" rel=\"stylesheet\"&gt;\n\n<\/code><\/pre>\n\n\n\n<p>You can publish this in xampp htdocs folder<\/p>\n\n\n\n<h2>index.html<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n\n&lt;head>\n    &lt;script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\" crossorigin>&lt;\/script>\n    &lt;script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\" crossorigin>&lt;\/script>\n    &lt;script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\">&lt;\/script>\n    &lt;script src=\"https:\/\/unpkg.com\/react-router@5.0.0\/umd\/react-router.min.js\">&lt;\/script>\n    &lt;script src=\"https:\/\/unpkg.com\/react-router-dom@5.0.0\/umd\/react-router-dom.min.js\">&lt;\/script>\n    &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"\n        integrity=\"sha384-iYQeCzEYFbKjA\/T2uDLTpkwGzCiq6soy8tYaI1GyVh\/UjpbCx\/TYkiZhlZB6+fzT\" crossorigin=\"anonymous\">\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/js\/bootstrap.bundle.min.js\"\n        integrity=\"sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8\"\n        crossorigin=\"anonymous\">&lt;\/script>\n&lt;\/head>\n\n&lt;body class=\"container-fluid\">\n\n\n    &lt;div id=\"root\">&lt;\/div>\n    &lt;script type=\"text\/babel\">\n\n        function Home() {\n            return &lt;h1>This is home&lt;\/h1>\n        }\n\n        function UserComponent() {\n            return &lt;h1>This is user&lt;\/h1>\n        }\n\n        function AdminComponent() {\n            return &lt;h1>This is admin&lt;\/h1>\n        }\n\n\n        const Router = window.ReactRouterDOM.BrowserRouter;\n        const Route = window.ReactRouterDOM.Route;\n        const Link = window.ReactRouterDOM.Link;\n        const Prompt = window.ReactRouterDOM.Prompt;\n        const Switch = window.ReactRouterDOM.Switch;\n        const Redirect = window.ReactRouterDOM.Redirect;\n\n        function App() {\n            return &lt;>\n            &lt;Router>\n\n                &lt;nav>\n                    &lt;ul>\n                        &lt;li>\n                            &lt;Link to=\"\/\">Home&lt;\/Link>\n                        &lt;\/li>\n                        &lt;li>\n                            &lt;Link to=\"\/admin\">Admin&lt;\/Link>\n                        &lt;\/li>\n                        &lt;li>\n                            &lt;Link to=\"\/user\">Users&lt;\/Link>\n                        &lt;\/li>\n                    &lt;\/ul>\n                &lt;\/nav>\n\n                &lt;Switch>\n                    &lt;Route path='\/user' component={UserComponent} \/>\n                    &lt;Route path='\/admin' component={AdminComponent} \/>\n                    &lt;Route exact path='\/' component={Home} \/>\n                &lt;\/Switch>\n            &lt;\/Router>\n            &lt;\/>;\n        }\n\n        ReactDOM.render(&lt;App \/>, document.getElementById('root'))\n    &lt;\/script>\n\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. Create new react project Run from terminal Open Browser and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2108"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=2108"}],"version-history":[{"count":33,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2108\/revisions"}],"predecessor-version":[{"id":2445,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2108\/revisions\/2445"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=2108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=2108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=2108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}