Introduction to React

Kursinnhold

Introduction to React

Introduction to React

1. Getting Started: ES6

Why React?Node.js and npm ES6 Variables ES6 Arrow Functions ES6 Map Method ES6 Destructuring ES6 Spread Operator ES6 Ternary Operator

2. Getting Started: JSX

JSX Introduction JSX Variables & Nested Elements JSX Embedding Expressions JSX Specifying Attributes Getting Started with React

3. React in Practice

Getting familiar with JSX Writing more Complex Elements using JSX Creating a React-Based Project Structure of a React Project

4. React Components

Introduction to Components Functional Components Creating React Components Importing Components

5. Controlling Data & Content

Passing Data into Components Conditional Rendering Loop Based Rendering Keys in Lists Event Handling Creating a TODO Application

6. Hooks

Introduction to Hooks Using the State Hook The Effect Hook Rules of Using Hooks Creating Custom Hooks Fixing the Todo Application

7. React Router

Introduction to React Router Route-Based Rendering Creating Navigation Bars Using Params

JSX Specifying Attributes

In order to specify attributes to the elements we can use the syntax: <element attribute=value></element>

It is very similar to HTML though it is important to note that the names of attributes are sometimes different and follow camelCase convention.

For example class in JSX is className instead, and tabindex is tabIndex.

js

We can also assign dynamic attributes by embedding an expression:

js

Note

We don't put quotes around curly braces when embedding a JavaScript expression in an attribute.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 4

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Kursinnhold

Introduction to React

Introduction to React

1. Getting Started: ES6

Why React?Node.js and npm ES6 Variables ES6 Arrow Functions ES6 Map Method ES6 Destructuring ES6 Spread Operator ES6 Ternary Operator

2. Getting Started: JSX

JSX Introduction JSX Variables & Nested Elements JSX Embedding Expressions JSX Specifying Attributes Getting Started with React

3. React in Practice

Getting familiar with JSX Writing more Complex Elements using JSX Creating a React-Based Project Structure of a React Project

4. React Components

Introduction to Components Functional Components Creating React Components Importing Components

5. Controlling Data & Content

Passing Data into Components Conditional Rendering Loop Based Rendering Keys in Lists Event Handling Creating a TODO Application

6. Hooks

Introduction to Hooks Using the State Hook The Effect Hook Rules of Using Hooks Creating Custom Hooks Fixing the Todo Application

7. React Router

Introduction to React Router Route-Based Rendering Creating Navigation Bars Using Params

JSX Specifying Attributes

In order to specify attributes to the elements we can use the syntax: <element attribute=value></element>

It is very similar to HTML though it is important to note that the names of attributes are sometimes different and follow camelCase convention.

For example class in JSX is className instead, and tabindex is tabIndex.

js

We can also assign dynamic attributes by embedding an expression:

js

Note

We don't put quotes around curly braces when embedding a JavaScript expression in an attribute.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 4

some-alt