From e9d7c6add41bf45a7143ff3ec5ab905a302ee783 Mon Sep 17 00:00:00 2001 From: juananrey Date: Wed, 13 Feb 2019 15:27:39 +0100 Subject: [PATCH] A more useful course after getting hands dirty on react --- react_course.md | 69 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 react_course.md diff --git a/react_course.md b/react_course.md new file mode 100644 index 0000000..4986df3 --- /dev/null +++ b/react_course.md @@ -0,0 +1,69 @@ +REACT COURSE +------------ + +## Basics +- React has something called "state", which we can check in any page built in react. +- React operates with "Components", reusable pieces of code that can stay anywhere within your application. +- Furthermore, Componentes are actually Virtual DOM components (this is, copy/representation of the DOM object). If we change a component state, it would be reflected inmediately for **any** instance of such component, because react will call `render()` function each time that a `setState()` is invoked. + +## 101 components +- Every class extends from `React.Component`, and should have **at least** one method, called `render()`. +- In order to render at least one element in your page, we can use `react-dom`: It's render method takes two parameters: a valid JSX (e.g. a react component with the notation: ``, and a mountpoint! +- React don't know anything about where the components are mounted, so in order to render a component you will need to do two things: +```js +// In the Component file, so the whole environment is aware that this component exists +export default ComponentName; + +// In the main file that renders your application within a div +import ComponentName from './components/ComponentName'; +render(, document.querySelector('#main')); +``` + +## HTML + JSX +- In react you **can't** return more than one element within the render page; you should make a parent-siblings relation instead. +- Or even better: wrap them into a `React.Fragment` tag! (Since React 16.2) +- For comments in JSX, you should use the JS interpret way `{ /* Comment */}`. + +### React + CSS +- You can import it outside or inside the React realm. If you want to do that inside, simply call `import` within your Main React page. + +## Passing dynamic data with .props +- Idea: passing data along components +- Props: those are like HTML parameters within a React `Component`. +- There are two types of values: strings (between `""`) and the rest (between `{}`). E.g: `
`. +- We can use object destructuring to have all the information contained in props, as in: `const {tagline} = this.props;` (Further reference: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment#Object_destructuring). + +## Stateless functional components +- Normal function VS arrow function (perks: implicit return if is a one liner, shorter syntax, **STATELESS** +```js +function Header(tagline) { // Normal function + return (); +} +const Header = tagline => (); // Arrow function + +const Header = ({tagline, age}) => (); // Arrow function with object destructuring in which we are passing `this.props` to this component! +``` +- Stateless functional component: arrow function without any context knowledge (any `this.whatever`) which does the exact same functionality as a react component that a) has no context and b) has nothing but a `render()` method. + +## React Router +```js +import { BrowserRouter, Route, Switch } from 'react-router-dom'; +import StorePicker from './StorePicker'; + +const Router = () => ( + + // This will try first the 1st route, if not the 2nd... if none matches, it will default to 404 not found! + + + // This is the last fallback, so we don't include any path here + + +); +export default Router; + +// On the index.js +import React from 'react'; +import { render } from 'react-dom'; +import Router from './components/Router'; +render(, document.querySelector('#main')); +```