Udemy Course: Modern React with Redux

Udemy Author: Stephen Grider

Github Sources

Setting up the react js typescript environment

Source

Installing Create React App pacakge

npm install -g create-react-app

Creating react js typescript app

npx create-react-app app-name --template typescript

Converting JSX to JS

User Babel Tester

Converting inline css to jsx

In JSX we reference the Javascript object by inclosing the style with two curly brace. First curly brace is to specify Javascript and next one it for denote the Javascript object. The key and values are separating using colon, similar to JSON. To make a key word the hyphen is removed and the preceding letter is capitalized.

Other changes are class becomes className, for becomes htmlFor

We can reference the Javascript object with curly braces.

<div style="background-color: red;"></div>

<div style=></div>

Install React router

npm install react-router-dom

Create Fake Data

Faker JS

Semantic UI

Bootstrap Sass

Inspired by

Install node-sass and bootstrap

npm install node-sass bootstrap

Rename all _.css to _.scss

example:

mv src/index.css to src/index.scss

Change the reference to scss

exmaple: index.scss

@import "~bootstrap/scss/bootstrap";

Copy the variables file to the src

cp node_modules/bootstrap/scss/_variables.scss ./src/

Add imports to index.scss

@import "~bootstrap/scss/functions";
@import "variables";
@import "~bootstrap/scss/bootstrap";