React 1
SOURCES
ARTICLES
ES6
ES6 Syntax and Feature Overview
REACT
React - Hello World
React - JSX
React - Rendering Elements
React - Components & Props
React - State & Lifecycle
React - Handling Events
TAILWIND
Utility First CSS
tailwind in 15 minutes
NEXTJS
Learn Next.js
Why to use Next.js
NOTES
- ES6
- var- function scoped, can be reasigned
- let- block scoped, can be reasigned
- const- block scoped, cannot be reasigned
- arrow functions are a shorter way to write functions
- template literals are a way to write strings that can span multiple lines and have embedded expressions
- object destructuring is a way to extract properties from objects and bind them to variables
-
React
- JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript
- jsx is not a string, it is a type of expression
- jsx describes what the UI should look like
- jsx prevents injection attacks
- jsx represents objects
- Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
- React elements are immutable
- Tailwind
- Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
- tailwind is inside the classname attribute
- tailwind can be used with react
- tailwind is css but with a different syntax
- Next.js
- a good analogy for next js is react is like linux and next js is like ubuntu (a distro of linux)
- next js is used by 5 of the fortune 12 companies
- focuses on server side rendering (which is awesome)