> For the complete documentation index, see [llms.txt](https://bryan-guner.gitbook.io/my-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bryan-guner.gitbook.io/my-docs/mynotes/udemy-react-and-redux/modern+react+with+redux.md).

# Modern+React+With+Redux

 

## General

| **uDemy Course**     | <https://www.udemy.com/course/react-redux/>                                 |
| -------------------- | --------------------------------------------------------------------------- |
| **Project Root Dir** | C:\Users\nick\WslFiles\React                                                |
| **Semantic UI CDN**  | <https://cdnjs.com/libraries/semantic-ui>                                   |
| **Semantic UI**      | <https://semantic-ui.com/>                                                  |
| **Semantic min css** | <https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css> |

## Common Commands, APIs, & Procedures

<table data-header-hidden><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Generate a React project</strong></td><td>Note: in case of errors:</td></tr><tr><td><pre><code>npx create-react-app &#x3C;my_app_name>
</code></pre></td><td></td></tr><tr><td><pre><code>npm uninstall -g create-react-app
</code></pre></td><td></td></tr><tr><td><strong>Create a Server project</strong></td><td>Create package.json file</td></tr><tr><td><pre><code>npm init
</code></pre></td><td></td></tr><tr><td><strong>Start</strong></td><td><code>npm start</code></td></tr><tr><td><strong>Install</strong></td><td><p>React &#x26; Redux &#x26; Redux-Thunk &#x26; Axios:</p><p>React Router:</p><p>Redux Forms</p><p>Lodash</p><p>JSON-SERVER</p><p>Faker</p><p>Vercel</p><p>Google API. Make changes to <code>public/index.html</code>:</p></td></tr><tr><td><pre><code>npm install --save redux react-redux axios redux-thunk
</code></pre></td><td></td></tr><tr><td><pre><code>npm install --save react-router-dom
</code></pre></td><td></td></tr><tr><td><pre><code>npm install --save redux-form
</code></pre></td><td></td></tr><tr><td><pre><code>npm install --save lodash
</code></pre></td><td></td></tr><tr><td><pre><code>npm install --save json-server
</code></pre></td><td></td></tr><tr><td><pre><code>npm install --save faker
</code></pre></td><td></td></tr><tr><td><pre><code>npm install -g vercel
</code></pre></td><td></td></tr><tr><td><pre><code>&#x3C;script src="https://apis.google.com/js/api.js">&#x3C;/script>
</code></pre></td><td></td></tr><tr><td><p><img src="https://nickguner.atlassian.net/wiki/plugins/servlet/confluence/placeholder/macro?definition=e2FuY2hvcjpzZW1hbnRpY30&#x26;locale=en_US&#x26;version=2" alt=""><strong>Wire up Semantic Stylesheet</strong></p><p><code>public/index.html</code></p></td><td><p>In case of CORS error, install the CSS library locally:</p><p><code>npm install semantic-ui-css</code></p><p>import the library into your root <code>index.js</code> component:</p><p><code>import "semantic-ui-css/semantic.min.css";</code></p></td></tr><tr><td><pre><code>&#x3C;link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
/>
</code></pre></td><td></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>&#x3C;link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
/>
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>&#x3C;script src="https://apis.google.com/js/api.js">&#x3C;/script>
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>npm install -g vercel
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>npm install --save faker
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>npm install --save json-server
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>npm install --save lodash
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>npm install --save redux-form
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>npm install --save react-router-dom
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>npm install --save redux react-redux axios redux-thunk
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>npm init
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>npm uninstall -g create-react-app
</code></pre></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>npx create-react-app &#x3C;my_app_name>
</code></pre></td></tr></tbody></table>

## Resources

<table data-header-hidden><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Description</strong></td><td><strong>URL</strong></td></tr><tr><td>Code sandbox</td><td><code>codesandbox.io/s/react-yud4c</code></td></tr><tr><td>Node download</td><td><code>nodejs.org/en/download</code></td></tr><tr><td>Babel</td><td><code>babeljs.io</code></td></tr><tr><td>Codepen</td><td><code>codepen.io</code></td></tr><tr><td>Faker JS (images, companies, addresses,…)</td><td><a href="https://github.com/marak/Faker.js/">https://github.com/marak/Faker.js/</a></td></tr><tr><td><img src="https://nickguner.atlassian.net/wiki/plugins/servlet/confluence/placeholder/macro?definition=e2FuY2hvcjpVbnNwbGFzaH0&#x26;locale=en_US&#x26;version=2" alt="">Unsplash API</td><td><p>URL:</p><p><code>unsplash.com/developers</code></p><p>UID, PWD</p><p><code>nick.guner@gmail.com, zaika code</code></p><p>Create Application:</p><p><a href="https://unsplash.com/oauth/applications">https://unsplash.com/oauth/applications</a></p></td></tr><tr><td>Geolocation API Doc</td><td><code>developer.mozilla.org/en-US/docs/Web/API/Geolocation_API</code></td></tr><tr><td><img src="https://nickguner.atlassian.net/wiki/plugins/servlet/confluence/placeholder/macro?definition=e2FuY2hvcjpQbGF5Z3JvdW5kfQ&#x26;locale=en_US&#x26;version=2" alt="">Playground</td><td><code>stephengrider.github.io/playgrounds/</code></td></tr><tr><td>Google API</td><td><p>Create a new project:</p><p><code>console.developers.google.com</code></p></td></tr><tr><td>JSON Placeholder API (18&#x26;19)</td><td><code>jsonplaceholder.typicode.com</code></td></tr><tr><td>Wiki API</td><td><code>https://en.wikipedia.org/w/api.php?action=query&#x26;format=json&#x26;origin=*&#x26;list=search&#x26;srsearch=SEARCHITEM</code></td></tr><tr><td>Google Translate API</td><td><code>cloud.google.com/translate/docs</code></td></tr><tr><td>Netlify</td><td>Choose to login with Gitlab Account</td></tr><tr><td>Deployed Exercises</td><td><p>videos-hooks:</p><p><a href="https://videos-hooks-4iwi3nnih-nickguner.vercel.app/">https://videos-hooks-4iwi3nnih-nickguner.vercel.app/</a></p></td></tr><tr><td>Google OAuth</td><td>Google Scopes</td></tr><tr><td><pre><code>http://developers.google.com/identity/protocols/googlescopes 
</code></pre></td><td></td></tr><tr><td>Google API Docs</td><td><code>https://github.com/google/google-api-javascript-client/blob/master/docs/reference.md</code><br><a href="https://cloud.google.com/compute/docs/tutorials/javascript-guide">https://cloud.google.com/compute/docs/tutorials/javascript-guide</a></td></tr><tr><td>JSON Server</td><td><code>npmjs.com/package/json-server</code></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>http://developers.google.com/identity/protocols/googlescopes 
</code></pre></td></tr></tbody></table>

## GIT

<table data-header-hidden><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Group Repo:</strong></td><td><a href="https://gitlab.com/m7320">https://gitlab.com/m7320</a></td></tr><tr><td><strong>Note:</strong></td><td>Use <code>master</code>, not <code>main</code> branch</td></tr><tr><td><strong>Sample Command:</strong></td><td>c4a5a3199c904ef981f8805a04fe95a9</td></tr><tr><td><pre><code>cd C:\Users\nick\WslFiles\React\jsx
git init
git remote add origin https://gitlab.com/m7320/jsx.git
git add .
git commit -m "Initial commit"
git push -u origin master
</code></pre></td><td></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th></th></tr></thead><tbody><tr><td><pre><code>cd C:\Users\nick\WslFiles\React\jsx
git init
git remote add origin https://gitlab.com/m7320/jsx.git
git add .
git commit -m "Initial commit"
git push -u origin master
</code></pre></td></tr></tbody></table>

## Projects

| **Location**                                                                                                                | **Section**          | **Image**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| --------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `C:\Users\nick\WslFiles\React\jsx`                                                                                          | 1,2                  | ![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211213-130653.png?version=1\&modificationDate=1639400813069\&cacheVersion=1\&api=v2)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `C:\Users\nick\WslFiles\React\components`                                                                                   | 3                    | ![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211213-150707.png?version=1\&modificationDate=1639408029929\&cacheVersion=1\&api=v2)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `C:\Users\nick\WslFiles\React\seasons`                                                                                      | 4, 5, 6              | ![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211213-192509.png?version=1\&modificationDate=1639423512228\&cacheVersion=1\&api=v2)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `C:\Users\nick\WslFiles\React\pics`                                                                                         | 7, 8, 9, 10          | ![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211214-152648.png?version=1\&modificationDate=1639495610398\&cacheVersion=1\&api=v2)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `C:\Users\nick\WslFiles\React\videos`                                                                                       | 11                   | ![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211215-164914.png?version=1\&modificationDate=1639586957559\&cacheVersion=1\&api=v2)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `C:\Users\nick\WslFiles\React\widgets`                                                                                      | 12, 13               | ![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211217-131055.png?version=1\&modificationDate=1639746657145\&cacheVersion=1\&api=v2)![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211217-131138.png?version=1\&modificationDate=1639746699846\&cacheVersion=1\&api=v2)![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211217-131210.png?version=1\&modificationDate=1639746733559\&cacheVersion=1\&api=v2)![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211217-131300.png?version=1\&modificationDate=1639746782801\&cacheVersion=1\&api=v2) |
| `C:\Users\nick\WslFiles\React\videos-hooks`                                                                                 | 14                   | Same as section 11                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `C:\Users\nick\WslFiles\React\songs`                                                                                        | 16,17                | ![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211207-130006.png?version=1\&modificationDate=1638882008308\&cacheVersion=1\&api=v2)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `C:\Users\nick\WslFiles\React\blog`                                                                                         | 18,19                | ![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20211207-130921.png?version=1\&modificationDate=1638882562289\&cacheVersion=1\&api=v2)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| <p><code>C:\Users\nick\WslFiles\React\streams\api</code></p><p><code>C:\Users\nick\WslFiles\React\streams\client</code></p> | 20,21,22,23,24,25,26 | ![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20220102-160052.png?version=1\&modificationDate=1641139252654\&cacheVersion=1\&api=v2)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `C:\Users\nick\WslFiles\React\translate`                                                                                    | 27,28                | ![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20220103-200911.png?version=1\&modificationDate=1641240551163\&cacheVersion=1\&api=v2)![](https://nickguner.atlassian.net/wiki/download/attachments/1967489025/image-20220103-200950.png?version=1\&modificationDate=1641240590100\&cacheVersion=1\&api=v2)                                                                                                                                                                                                                                                                                                                                           |

&#x20;