React

ES6

New features: ES5 VS ES6

• let
• const
• arrow function
• template literals
• multi-line strings
• implicit returns
• key/property shorthand
• Array iteration
• spread syntax …
• extends inheritance
• modules export/import
• promises/callbackes

React

React - Hello World

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

React - JSX

• JSX, JavaScript extension, a template language with full power of JS.
• JSX allow you work with UI in JS code.
• Sample JSX code from DOC.

  const name = 'Josh Perez';
  const element = <h1>Hello, {name}</h1>;
  

React - Rendering Elements

• React elements are objects that easy to create.
• React DOM dynamically updates contents necessarily.

React - Components & Props

• React components are JS functions
• props: properties. arguments that passed into components called props.
• sample React components from DOC

  class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
  }
  

React - State & Lifecycle

State

• State is used with React Component Classes to make them dynamic.
• It enables the component to keep track of changing information in between renders.
• the state of a component is an object that holds information that may change over the lifetime of the component.

Lifecycle

• they’re created (mounted on the DOM),
• they experience growth (by updating),
• and they die (unmounted from the DOM).

This is the component lifecycle!

React - Handling Events

• React events are named using camelCase
• With JSX you pass a function as the event handler, rather than a string.

Tailwind CSS

an in-line writing css with built-in formats to style your app.

Tailwind in 15 minutes

• videos is private : (

Next.js

Next.js lets you build server-side rendering and static web applications using React.

Install

It’s easy to install:

npm install --save next react react-dom

Build

Add a build script:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Run

• npm run dev for running a development instance with hot-reloading, file watching and task re-running.
• npm run build for compiling your project.
• npm start for starting your app in production mode.