Exercises of react fundamentals.
$ git clone https://github.com/JoanClaret/react-fundamentals.git
$ cd react-fundamentals
$ npm install
$ npm start
$ open http://localhost:3333/Setting properties in your React components.
When you're building your React components, you'll probably want to access child properties of the markup.
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.
The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship.
Using State to toggle class in a component
Toggle class between componets
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.
Sending a value from component to component without using refs
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.
Higher order components will allow you to apply behaviors to multiple React components.
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
### 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
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';MIT