React fundamentals

Exercises of react fundamentals.

Getting started

$ git clone https://github.com/JoanClaret/react-fundamentals.git
$ cd react-fundamentals
$ npm install
$ npm start
$ open http://localhost:3333/

Examples:

01 - Setup

Example code

02 - Building a simple component

Example code

03 - Component properties

Setting properties in your React components.

Example code - Documentation

04 - Child properties

When you're building your React components, you'll probably want to access child properties of the markup.

Example code - Documentation

05 - Component state

State is used for properties on a component that will change, versus static properties that are passed in. This lesson will introduce you to taking input within your React components.

Example code - Documentation

06 - Owner ownee relationship

The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship.

Example code - Documentation

07 - Toggle Class

Using State to toggle class in a component

Example code

08 - Toggle Class between components

Toggle class between componets

Example code

09 - Using refs

When you are using React components you need to be able to access specific references to individual components. This is done by defining a ref.

Example code - Documentation

10 - Sending values between components

Sending a value from component to component without using refs

Example code

11 - Mounting - unmounting

React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson will introduce mounting and unmounting of your React components.

Example code - Documentation

12 - Higer order components

Higher order components will allow you to apply behaviors to multiple React components.

Example code - Documentation

13 - Filter list

In React, application data flows unidirectionally via the state and props objects, as opposed to the two-way binding of libraries like Angular. This means that, in a multi component heirachy, a common parent component should manage the state and pass it down the chain via props. Your state should be updated using the setState method to ensure that a UI refresh will occur, if necessary. The resulting values should be passed down to child components using attributes that are accessible in said children via this.props. See this example that shows this concept in practice

Example code - Documentation

### 14 - Routing React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.

Dev dependencies:
Install "react-router" npm package as dependency: npm i react-router --save

Example code - Documentation

Switching between exercises

Once you has executed the "Getting started" commands, edit main.js file and uncomment the import line of the exercise you want to preview in the browser:

// import App from './exercises/01-Setup';
import App from './exercises/02-Component';

License

MIT