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

Generate a React project

npx create-react-app <my_app_name>

Note: in case of errors:

npm uninstall -g create-react-app

npx create-react-app <my_app_name>

npm uninstall -g create-react-app

Create a Server project

Create package.json file

npm init

npm init

Start

npm start

Install

React & Redux & Redux-Thunk & Axios:

npm install --save redux react-redux axios redux-thunk

React Router:

npm install --save react-router-dom

Redux Forms

npm install --save redux-form

Lodash

npm install --save lodash

JSON-SERVER

npm install --save json-server

Faker

npm install --save faker

Vercel

npm install -g vercel

Google API. Make changes to public/index.html:

<script src="https://apis.google.com/js/api.js"></script>

npm install --save redux react-redux axios redux-thunk

npm install --save react-router-dom

npm install --save redux-form

npm install --save lodash

npm install --save json-server

npm install --save faker

npm install -g vercel

<script src="https://apis.google.com/js/api.js"></script>

Wire up Semantic Stylesheet

public/index.html

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
/>

In case of CORS error, install the CSS library locally:

npm install semantic-ui-css

import the library into your root index.js component:

import "semantic-ui-css/semantic.min.css";

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
/>

Resources

Description

URL

Code sandbox

codesandbox.io/s/react-yud4c

Node download

nodejs.org/en/download

Babel

babeljs.io

Codepen

codepen.io

Faker JS (images, companies, addresses,…)

https://github.com/marak/Faker.js/

Unsplash API

URL:

unsplash.com/developers

UID, PWD

nick.guner@gmail.com, zaika code

Create Application:

https://unsplash.com/oauth/applications

Geolocation API Doc

developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

Playground

stephengrider.github.io/playgrounds/

Google API

Create a new project:

console.developers.google.com

JSON Placeholder API (18&19)

jsonplaceholder.typicode.com

Wiki API

https://en.wikipedia.org/w/api.php?action=query&format=json&origin=*&list=search&srsearch=SEARCHITEM

Google Translate API

cloud.google.com/translate/docs

Netlify

Choose to login with Gitlab Account

Deployed Exercises

videos-hooks:

https://videos-hooks-4iwi3nnih-nickguner.vercel.app/

Google OAuth

Google Scopes

http://developers.google.com/identity/protocols/googlescopes

http://developers.google.com/identity/protocols/googlescopes

Google API Docs

https://github.com/google/google-api-javascript-client/blob/master/docs/reference.md https://cloud.google.com/compute/docs/tutorials/javascript-guide

JSON Server

npmjs.com/package/json-server

GIT

Group Repo:

https://gitlab.com/m7320

Note:

Use master, not main branch

Sample Command:

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

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