Functional Component: useState
11 |14 | 15 |
Class based Component: state
16 |
20 |
23 | );
24 | }
25 | }
26 |
27 | const mapStateToProps = ({ comments }) => {
28 | return {
29 | comments
30 | };
31 | };
32 |
33 | export default connect(mapStateToProps, { fetchComments })(App);
34 |
--------------------------------------------------------------------------------
/examples/react-redux-webpack-client-server/server/BasicController.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config();
2 | const isHtmlWebpackPlugin = process.env.WEBPACK_STATIC_HTML_BUILD;
3 |
4 | const React = require('react');
5 | const renderToString = require('react-dom/server').renderToString;
6 | const TestingSSR = require('../src/TestingSSR').default;
7 |
8 | class BasicController {
9 | constructor(app) {
10 | this.app = app;
11 | this.allRoutes();
12 | }
13 |
14 | allRoutes() {
15 | if (isHtmlWebpackPlugin != 'true') {
16 | this.app.get('*', (req, res) => {
17 | res.send(`
18 |
19 |
20 | List of comments 101
21 |{this.renderComments()}
22 | ${renderToString(
21 |
22 |
23 | `);
24 | });
25 | }
26 | }
27 | }
28 |
29 | module.exports = app => {
30 | return new BasicController(app);
31 | };
32 |
--------------------------------------------------------------------------------
/examples/react-redux-webpack-client-server-scripts/server/BasicController.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config();
2 | const isHtmlWebpackPlugin = process.env.WEBPACK_STATIC_HTML_BUILD;
3 |
4 | const React = require('react');
5 | const renderToString = require('react-dom/server').renderToString;
6 | const TestingSSR = require('../src/TestingSSR').default;
7 |
8 | class BasicController {
9 | constructor(app) {
10 | this.app = app;
11 | this.allRoutes();
12 | }
13 |
14 | allRoutes() {
15 | if (isHtmlWebpackPlugin != 'true') {
16 | this.app.get('*', (req, res) => {
17 | res.send(`
18 |
19 |
20 | ${renderToString(
21 |
22 |
23 | `);
24 | });
25 | }
26 | }
27 | }
28 |
29 | module.exports = app => {
30 | return new BasicController(app);
31 | };
32 |
--------------------------------------------------------------------------------
/greenkeeper.json:
--------------------------------------------------------------------------------
1 | {
2 | "groups": {
3 | "default": {
4 | "packages": [
5 | "examples/basic-react-example-lifecycle/package.json",
6 | "examples/basic-react-example-state/package.json",
7 | "examples/basic-react-example[map-with-key]/package.json",
8 | "examples/basic-redux-example[redux-promise]/package.json",
9 | "examples/basic-redux-example[redux-thunk]/package.json",
10 | "examples/basic-webpack[default]/package.json",
11 | "examples/react-redux-webpack-client-server-scripts/package.json",
12 | "examples/react-redux-webpack-client-server-scripts/server/package.json",
13 | "examples/react-redux-webpack-client-server/package.json",
14 | "examples/react-redux-webpack-client-server/server/package.json",
15 | "examples/react-redux-webpack-client/package.json"
16 | ]
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/examples/react-redux-webpack-client-server/src/index.js:
--------------------------------------------------------------------------------
1 | //require('babel-runtime/regenerator');
2 | //require('webpack-hot-middleware/client?reload=true');
3 | import React from 'react';
4 | import { BrowserRouter, Route } from 'react-router-dom';
5 | import ReactDOM from 'react-dom';
6 | import rootReducer from './reducers';
7 | import { Provider } from 'react-redux';
8 | import { createStore, applyMiddleware, compose } from 'redux';
9 |
10 | import '@babel/polyfill';
11 |
12 | import reduxThunk from 'redux-thunk';
13 | import App from './App';
14 |
15 | import './index.css';
16 |
17 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
18 |
19 | const store = createStore(rootReducer, applyMiddleware(reduxThunk));
20 |
21 | ReactDOM.render(
22 |
25 |
27 |
25 |
27 |
37 | Hi!
38 |
39 |
40 |
42 | {this.renderComments()}
44 | 
45 |
46 | );
47 | }
48 | }
49 |
50 | const mapStateToProps = ({ comments }) => {
51 | return {
52 | comments
53 | };
54 | };
55 |
56 | export default connect(mapStateToProps, { fetchComments })(App);
57 |
--------------------------------------------------------------------------------
/examples/react-redux-webpack-client-server-scripts/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import { fetchComments } from './actions';
5 | //import { css, jsx } from '@emotion/core';
6 | import styled from '@emotion/styled';
7 |
8 | import styles from './App.css';
9 | import cssInJs from './App.css.js';
10 |
11 | import rPI from './images/rPI-400x400.jpg';
12 |
13 | const CommentsBox = styled('div')`
14 | background-color: lavender;
15 | `;
16 |
17 | /*
18 | const listItem = css`
19 | list-style: none;
20 | padding: 0;
21 | `;
22 |
23 | const bold = css`
24 | font-weight: 'bold';
25 | `;
26 | */
27 |
28 | class App extends Component {
29 | componentDidMount() {
30 | this.props.fetchComments();
31 | }
32 |
33 | renderComments = () => {
34 | return this.props.comments.map(comment => {
35 | return List of comments 101
43 |
42 | {this.renderComments()}
44 |
45 |
46 | );
47 | }
48 | }
49 |
50 | const mapStateToProps = ({ comments }) => {
51 | return {
52 | comments
53 | };
54 | };
55 |
56 | export default connect(mapStateToProps, { fetchComments })(App);
57 |
--------------------------------------------------------------------------------
/examples/react-redux-webpack-client-server-scripts/config/webpack.config.dev.client.js:
--------------------------------------------------------------------------------
1 | /*
2 | //const webpack = require('webpack');
3 | const merge = require('webpack-merge');
4 | const commonConfig = require('./webpack.config.js');
5 |
6 | const config = {
7 | mode: 'development',
8 | entry: {
9 | main: './src/index.js'
10 | },
11 | devServer: {
12 | contentBase: '/..public',
13 | overlay: true
14 | }
15 | };
16 |
17 | module.exports = merge(commonConfig, config);
18 | */
19 | const path = require('path');
20 | const webpack = require('webpack');
21 | const merge = require('webpack-merge');
22 | const commonConfig = require('./webpack.config.js');
23 |
24 | /*
25 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
26 | .BundleAnalyzerPlugin;
27 | */
28 |
29 | const config = {
30 | name: 'client',
31 | target: 'web',
32 | mode: 'development',
33 | entry: {
34 | main: ['webpack-hot-middleware/client?reload=true', './src/index.js'],
35 | other: './src/other.js'
36 | },
37 | output: {
38 | path: path.resolve(__dirname, '../public'),
39 | //publicPath: '/',
40 | filename: './[name]-bundle.js'
41 | },
42 | devServer: {
43 | contentBase: '/..public',
44 | hot: true,
45 | overlay: true
46 | },
47 | plugins: [
48 | new webpack.HotModuleReplacementPlugin()
49 | /*,
50 | new BundleAnalyzerPlugin({
51 | generateStatsFile: true
52 | })
53 | */
54 | ]
55 | };
56 |
57 | module.exports = merge(commonConfig, config);
58 |
--------------------------------------------------------------------------------
/examples/react-redux-webpack-client-server/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | const merge = require('webpack-merge');
2 | const baseConfig = require('./webpack.config.js');
3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
5 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
6 |
7 | const path = require('path');
8 | const CleanWebpackPlugin = require('clean-webpack-plugin');
9 |
10 | const BrotliPlugin = require('brotli-webpack-plugin');
11 | const CompressionPlugin = require('compression-webpack-plugin');
12 |
13 | let pathsToClean = ['dist/', 'build/', 'public/'];
14 |
15 | let cleanOptions = {
16 | root: path.resolve(__dirname, '../'),
17 | exclude: ['template.html', 'manifest.json', 'favicon.ico'],
18 | verbose: true,
19 | dry: false
20 | };
21 |
22 | const config = {
23 | mode: 'production',
24 | optimization: {
25 | minimizer: [new UglifyJsPlugin()]
26 | },
27 | plugins: [
28 | new CleanWebpackPlugin(pathsToClean, cleanOptions),
29 | new MiniCssExtractPlugin({
30 | filename: '[name]-[contenthash].css'
31 | }),
32 | new OptimizeCssAssetsPlugin({
33 | assetNameRegExp: /\.css$/g,
34 | cssProcessor: require('cssnano'),
35 | cssProcessorOptions: { discardComments: { removeAll: true } },
36 | canPrint: true
37 | }),
38 | new CompressionPlugin({
39 | algorithm: 'gzip'
40 | }),
41 | new BrotliPlugin()
42 | ]
43 | };
44 |
45 | module.exports = merge(baseConfig, config);
46 |
--------------------------------------------------------------------------------
/examples/basic-react-example[map-with-key]/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import uuid from 'uuid';
3 |
4 | const Child = props => (
5 | List of comments 101
43 |
6 |
21 | );
22 |
23 | class App extends Component {
24 | state = {
25 | ourSalutation: [
26 | { salutation: 'Hi', timestamp: '29519bf2-c68e-11e8-8f1c-f3e5f253a17f' },
27 | {
28 | salutation: 'Hello',
29 | timestamp: '3c72eae1-c68e-11e8-a508-89da3bf216bc'
30 | },
31 | { salutation: 'Hola', timestamp: '46af7641-c68e-11e8-9146-8343393a23eb' }
32 | ]
33 | };
34 | render() {
35 | return (
36 |
7 | I´m receiving...{' '}
8 | {props.onShowingHello.map(({ salutation, timestamp }, index) => (
9 |
10 |
16 |
17 |
18 | ))}
19 |
20 |
37 |
51 | );
52 | }
53 | }
54 |
55 | export default App;
56 |
--------------------------------------------------------------------------------
/00_1_intro_JS.md:
--------------------------------------------------------------------------------
1 | ## JS beyond JavaScript
2 |
3 | **JS CallStack**
4 | High level intro: Remember, first, that JS is a single-threaded language (this basically means that it can only handle one task at the time).
5 | The JS engine (example: Google V8 or SpiderMonkey) defines the Global Execution Context (GEC) like "the browser or Node" (in relation to where the code is executed), sets the Global Memory or Scope) and creates the Call Stack, which allows the interpreter to keep track of what happened, what is happening and what is going to happen. For more information about this abstract Data Type: [Stack](
24 |
27 | A
25 |
57 |
59 | {jSx}
;
30 | }
31 | }
32 |
33 | export default App;
34 | ```
35 |
36 | **if/else** - condition ? () : ()
37 |
38 | ```javascript
39 | render() {
40 | const { conditionIs } = this.state;
41 |
42 | return (
43 |
44 | {conditionIs
45 | ? `I've a cristal clear state... I'm ${conditionIs}`
46 | : `I'm ${conditionIs}`}
47 |
48 | );
49 | }
50 | }
51 | ```
52 |
53 | **Ternary operator**
54 |
55 | ```javascript
56 | render() {
57 | const { conditionIs } = this.state;
58 |
59 | let jSx = conditionIs
60 | ? `I've a cristal clear state... I'm ${conditionIs}`
61 | : `I'm ${conditionIs}`;
62 |
63 | return {jSx}
;
64 | }
65 | ```
66 |
67 | **if &&** (short-circuit evaluation)
68 |
69 | ```javascript
70 | render() {
71 | const { conditionIs } = this.state;
72 |
73 | return (
74 |
75 | {conditionIs && `I've a cristal clear state... I'm ${conditionIs}`}
76 |
77 | );
78 | }
79 | }
80 | ```
81 |
82 | #### Props and Functional component
83 |
84 | **if > return** - if x, return z
85 |
86 | ```javascript
87 | import React from 'react';
88 |
89 | const Child = props => {
90 | if (!props.conditionIs) {
91 | return null;
92 | }
93 |
94 | return Im Child! {props.conditionIs}
;
95 | };
96 |
97 | const App = () => (
98 |
99 | Im App!
100 |
102 | );
103 |
104 | export default App;
105 | ```
106 |
107 | Note: You will see that some people return empty elements like `` or ``. This is totally valid, however, in most cases you don´t want to "return something" (aka, add some element to the DOM) so, start always returning `null`, and switch to elements in case you want to render and show a particular message to the user.
108 |
--------------------------------------------------------------------------------
/04_methods.md:
--------------------------------------------------------------------------------
1 | ## Methods
2 |
3 | Let´s grab the previous example and use a `Global Event Handler` (for this case, onClick) with setState() and a custom method.
4 |
5 | Note: In React events (like onClick), methods and component´s attributes (aka, props) are named using `lower camelCase`.
6 |
7 | ### Setting state with onClick
8 |
9 | ```javascript
10 | class App extends Component {
11 | state = {
12 | yourName: 'Peter Pan'
13 | };
14 |
15 | render() {
16 | return (
17 |
82 | ,
84 | document.getElementById('root')
85 | );
86 | ```
87 |
88 | *Note:* Remember `React Apps` **usually** have a `single root element`.
89 |
90 | File: `public/index.html`
91 |
92 | ```html
93 |
94 | ```
95 |
96 | ### Elements
97 |
98 | As we saw previously, we create elements through `React.createElement()`.
99 | An element is an object that describes what we want to show in the screen.
100 | Well, it is (in fact) an object representation of a DOM node.
101 |
102 | ```javascript
103 | const element =
18 |
23 | );
24 | }
25 | }
26 | ```
27 |
28 | ### Setting state with custom method
29 |
30 | ```javascript
31 | class App extends Component {
32 | state = {
33 | yourName: 'Peter Pan'
34 | };
35 |
36 | updateStateProperty = (stateProperty, statePropertyValue) => {
37 | this.setState({ [stateProperty]: statePropertyValue });
38 | };
39 |
40 | render() {
41 | return (
42 | {`Hello ${this.state.yourName}`}
19 | this.setState({ yourName: 'Wendy' })}>
20 | Change name to Wendy on clicking...
21 |
22 |
43 |
48 | );
49 | }
50 | }
51 | ```
52 |
53 | ### Setting state with custom method passing it down
54 |
55 | App.js
56 |
57 | ```javascript
58 | import React, { Component } from 'react';
59 | import Child from './Child';
60 |
61 | class App extends Component {
62 | state = {
63 | yourName: 'Peter Pan'
64 | };
65 |
66 | updateStateProperty = (stateProperty, statePropertyValue) => {
67 | this.setState({ [stateProperty]: statePropertyValue });
68 | };
69 |
70 | render() {
71 | return (
72 | {`Hello ${this.state.yourName}`}
44 | this.updateStateProperty('yourName', 'Wendy')}>
45 | Change state...
46 |
47 |
73 |
75 | Change state...
76 |
77 |
78 | );
79 | }
80 | }
81 |
82 | export default App;
83 | ```
84 |
85 | Child.js
86 |
87 | ```javascript
88 | import React from 'react';
89 |
90 | const Child = props => (
91 | {`Hello ${this.state.yourName}`}
74 |
92 |
96 | );
97 |
98 | export default Child;
99 | ```
100 |
101 | Notes:
102 | In `App.js` we pass a reference to the function updateStateProperty `onUpdateStateProperty={this.updateStateProperty}` as props to `Child.js` where we are going to execute the function with the proper arguments `onClick={() => props.onUpdateStateProperty('yourName', 'Wendy')}`
103 |
--------------------------------------------------------------------------------
/notesToPlace_primitive-and-reference-types.md:
--------------------------------------------------------------------------------
1 | **Primitive and reference types**
2 | I´m going to suppose that you are familiar with the concept of "Data Types" (string, number, array, boolean, null, undefined, symbol, object)
3 | Our "data" can be classified as Primitive or Reference in relation to _where_ and _how_ it´s stored in memory.
4 |
5 | * Variables that hold "just one value" are stored in the "stack" (memory, faster but less storage) and every time we pass them to, for example a function, we pass the value.
6 | * Variables that hold "multiple values" (like objects and arrays) are stored in the "heap" (memory, slower but more storage) and are passed as reference: we don´t pass the value, if not, a pointer that is going to reference to that value.
7 |
8 | Primitive Types are copied by value
9 |
10 | Primitive Type: string example.
11 | We declare a variable and initialize it with the value of "Peter".
12 | Then, we declare an initialize a new variable with the VALUE of the previous one, name.
13 | If we decide to change the value of name, name will hold the new data but name1 will keep the value that we passed: "Peter".
14 |
15 | ```
16 | let name = "Peter";
17 | let name1 = name;
18 | name = "Pan";
19 |
20 | console.log('name ' + name);
21 | console.log('name1 ' + name1);
22 | ```
23 |
24 | Result:
25 |
26 | ```
27 | name Pan
28 | name1 Peter
29 | ```
30 |
31 | Remember: we are copying the value that we stored in `name` and set it as the value of `name1`. Two different variables holding two different values.
32 |
33 | Now, let´s try to do something similar with a Reference Type.
34 |
35 | ```
36 | let person = { name: "Peter"};
37 |
38 | let name = person.name;
39 |
40 | person.name = "Pan";
41 |
42 | let name1 = name;
43 |
44 | let name2 = person;
45 |
46 | console.log(person);
47 |
48 | console.log('name ' + name);
49 | console.log('name1 ' + name1);
50 |
51 | console.log('name2 ' + JSON.stringify(person));
52 | ```
53 |
54 | Result:
55 |
56 | ```
57 | { name: 'Pan' }
58 | name Peter
59 | name1 Peter
60 | name2 {"name":"Pan"}
61 | ```
62 |
63 | Short explanation:
64 |
65 | 1. We declare an initialize the variable person with an object.
66 | 2. `Variable name` is initialized with the value of the property name of the object person. This value is a string, so it will be passed by value.
67 | 3. We change the value of the `property name` of the object person to `string "Pan"`
68 | 4. We declare and initialize the `variable name1` with the value of the variable name (by value)
69 | 5. We declare and initialize the `variable name2` with person (by reference).
70 |
71 | Primitives are compared by value.
72 |
73 | ```
74 | var a = 1;
75 | var b = 1;
76 | a === b;
77 | ```
78 |
79 | This returns `'true'`
80 |
81 | However, this is false for Reference (where the comparison is between the spaces in the heap that each one is occupying)
82 |
83 | ```
84 | var a = { a: 1};
85 | var b = { a: 1};
86 | a === b;
87 | ```
88 |
89 | This returns `'false'`
90 |
--------------------------------------------------------------------------------
/01_1_elements.md:
--------------------------------------------------------------------------------
1 | ## React Elements
2 |
3 | **createElement()**
4 |
5 | Returns a JavaScript object
6 | It takes 3 arguments:
7 |
8 | 1. element
9 | 2. attributes
10 | 3. content or element´s children
11 |
12 | Example:
13 |
14 | ```javascript
15 | const element = React.createElement(
16 | 'div',
17 | null,
18 | React.createElement('strong', null, 'Hello world!')
19 | );
20 | ```
21 |
22 | *Note:* We can pass multiple parameters as the last argument. Behind the scenes, `React` will "wrap them" in an array.
23 |
24 | Example:
25 | ```javascript
26 | ...
27 | React.createElement('div', null, 'Hello world!', ' More 1...', ' More 2...')
28 | ...
29 | ```
30 |
31 | In our examples, if we log `element` we will have one case where the value of the key `children` will be a `string` and the other an `array of strings`
32 |
33 | ```javascript
34 | props:
35 | children: "Hello world!"
36 |
37 | props:
38 | children: (3) ["Hello world!", " More 1...", " More 2..."]
39 | ```
40 |
41 | Alternatively, we can pass an `object` as the *second argument* containing: `attributes` and the own `content` as the `value` of the children's key.
42 | Example:
43 | ```javascript
44 | const element = React.createElement(
45 | 'div',
46 | null,
47 | React.createElement('div', { role: 'contentinfo', className: 'this-is-a-div', children: ['Hi',' Hola'] })
48 | );
49 | ```
50 |
51 | **ReactDOM.render()**
52 |
53 | Let´s first `render` our previous element.
54 |
55 | ```javascript
56 | const element = React.createElement(
57 | 'div',
58 | null,
59 | React.createElement('strong', null, 'Hello world!')
60 | );
61 |
62 | ReactDOM.render(element, document.getElementById('root'));
63 | ```
64 |
65 | If we inspect our `html` we will see our DOM node...
66 |
67 | ```html
68 |
69 | props.onUpdateStateProperty('yourName', 'Wendy')}>
93 | Change state...
94 |
95 |
70 |
72 |
73 | ```
74 |
75 | Another example (with `components` not elements)
76 |
77 | Example: `src/index.js`
78 |
79 | ```javascript
80 | ReactDOM.render(
81 | Hello world!
71 | Im an element!
;
104 | ```
105 |
106 | Through components (we will cover this on the next chapter) we return the created elements. Let´s go back to our `Hello world!` example...
107 |
108 | ```javascript
109 | const element = React.createElement(
110 | 'div',
111 | null,
112 | React.createElement('strong', null, 'Hello world!')
113 | );
114 |
115 | HelloWorld = () => element;
116 |
117 | ReactDOM.render({this.renderMessage('Hi')}
47 | );
48 | }
49 | ```
50 |
51 | ... or ... `renderMessage = message => { return message; };` or the same, `renderMessage = message => { return {message}
; };`
52 |
53 | For multilines use `()`
54 |
55 | ```javascript
56 | renderMessage = message => {
57 | return (
58 |
59 | My message:
61 | );
62 | };
63 | ```
64 |
65 | **.map()**
66 |
67 | `const myArrayElements = myArray.map(function callback(currentValue[, index[, array]]) { // element to return }[, thisArg])`
68 |
69 | Given an array, it generates a new one (just for clarity allow me to repeat, new array) as the result of executing the callback function on each element of the array.
70 |
71 | Example: map an array and retrieve a new array with the results assigned to a variable
72 |
73 | ```javascript
74 | const friends = [
75 | { name: 'Peter', age: 30 },
76 | { name: 'Tinkerbell', age: 100 },
77 | { name: 'Wendy', age: 31 }
78 | ];
79 |
80 | const friendsNames = friends.map(eachFriend => eachFriend.name);
81 |
82 | console.log(friendsNames);
83 | // Array(3) [ "Peter", "Tinkerbell", "Wendy" ]
84 | ```
85 |
86 | **.filter()**
87 |
88 | `var myArrayElements = myArray.filter(callback(element[, index[, array]])[, thisArg])`
89 |
90 | Given an array, it generates a new one with the elements that meet the criteria of the function logic.
91 |
92 | Example: filter and retrieve all the elements which property name is NOT Wendy
93 |
94 | ```javascript
95 | const friends = [
96 | { name: 'Peter', age: 30 },
97 | { name: 'Tinkerbell', age: 100 },
98 | { name: 'Wendy', age: 31 }
99 | ];
100 |
101 | const friendsFiltered = friends.filter(friend => friend.name != 'Wendy');
102 |
103 | console.log(friendsFiltered);
104 | /*
105 | (2) […]
106 | 0: Object { name: "Peter", age: 30 }
107 | 1: Object { name: "Tinkerbell", age: 100 }
108 | */
109 | ```
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React
2 |
3 | [](https://greenkeeper.io/)
4 | [](https://opensource.org/licenses/MIT)
5 |
6 | **Original MOTTO:** An easy way to learn React through examples.
7 |
8 | **Updated MOTTO:** Learning React topic by topic.
9 |
10 | ## Before starting
11 |
12 | ---
13 |
14 | *2/21/19 UPDATE*:
15 | Many things happened in `React` and its ecosystem. I will try to update the sections to `React 16.8.\*` (`Hooks` and some interesting `new APIs`) and go deeper in the “Life cycle” paragraph for class-based Components. Also, I will be splitting sections in sub-sections for better understanding and proper grouping.
16 |
17 | ---
18 |
19 | After several years of contributing, mentoring and working with `JS` and `React`, I decided to “put together” some notes linked to recurrent doubts and obstacles that friends and co-workers have to face daily.
20 |
21 | This is a pure practical guide (*ps*, it was at the beginning): please, keep the `practical intention` present during the course of these "shared notes"; I don´t have the intent of challenging the great and plentiful coaching classes; neither the books/"white papers" that today, you can easily find anywhere (starting with the own Facebook´s proprietary documentation).
22 |
23 | My aim, as I stated before (even with the latests addons and updates), is -still- clearly pragmatic. You will see some concepts and technicalities (as general and well-needed context) but you should (perhaps must) complement this "joint exercise" with other materials (I try to avoid quoting or referencing given that, an important part of your training is discovering good sources and picking those that satisfy your own and extremely personal "way to learn".
24 | However, taking a look the the mother source will not hurt you: [react](https://github.com/facebook/react)).
25 |
26 | ## Getting Started
27 |
28 | ### Pre-requisites
29 |
30 | You DO need to have an intermediate knowledge of `JavaScript` and, preferably, some exposure to [es2015 or ES6](http://es6-features.org).
31 | Even when "more complex topics" (not ordinary ones) are addressed as needed as part of the "lessons" (for example *leaks*, *currying*) not having an underlying `JS` base at all will generate more doubts and it could guide you to frustration, and ultimately, a premature failure.
32 | If you don´t have experience with `JavaScript`, some familiarity with `Functional Programming` and `Prototypes`... Please, first resolve the context of `this` and `then` come back (btw, if this made you smile, you should be good).
33 |
34 | Before proceeding with the tutorial, be sure that you have installed or, install...
35 |
36 | **Required**
37 |
38 | * [Node.js](https://nodejs.org/en/download/)
39 | * Package manager (`npm` which comes with `Node` or `yarn`)
40 |
41 | *Note:* packages, dependencies, libraries... are going to be referenced on-demand. Those whose scope is bigger will be addressed in [09_packages](./09_packages.md)
42 |
43 | **Recommended**
44 |
45 | * For Windows users: `Git bash` https://git-scm.com/downloads as a `CMD` replace, or, `PowerShell`
46 |
47 | **Alternatives**
48 |
49 | * yarn https://yarnpkg.com/lang/en/docs/install/
50 |
51 | Alternative to `npm`. I will be using `yarn`
52 | (At the moment of writing this `doc` there are no major differences between the two, as it used to...)
53 |
54 | Learn more about the [npm registry](https://docs.npmjs.com/misc/registry) consumed by both, `yarn` and `npm`
--------------------------------------------------------------------------------
/examples/react-redux-webpack-client-server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nocra",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test":
8 | "jest --env=jsdom --watchAll --colors --config=config/jest/jest.config.json --rootDir",
9 | "start":
10 | "cross-env START='true' NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.client.js",
11 | "build:dev":
12 | "cross-env NODE_ENV=development webpack --config config/webpack.config.dev.client.js",
13 | "build":
14 | "cross-env NODE_ENV=production webpack --config config/webpack.config.prod.js",
15 | "build:server":
16 | "cross-env NODE_ENV=production webpack --config config/webpack.config.prod.server.js --env.NODE_ENV=production --watch",
17 | "dev": "cross-env NODE_ENV=development node server/index.js",
18 | "build:server:flex":
19 | "cross-env nodemon --watch build build/server-prod-bundle.js",
20 | "prod": "cross-env NODE_ENV=production node build/server-prod-bundle.js"
21 | },
22 | "keywords": [],
23 | "author": "",
24 | "license": "ISC",
25 | "dependencies": {
26 | "@emotion/core": "^10.0.5",
27 | "@emotion/styled": "^10.0.5",
28 | "axios": "^0.18.0",
29 | "dotenv": "^8.0.0",
30 | "express-static-gzip": "^1.1.3",
31 | "lodash": "^4.17.11",
32 | "nodemon": "^2.0.0",
33 | "react": "^16.6.3",
34 | "react-dom": "^16.6.3",
35 | "react-redux": "^7.0.0",
36 | "react-router-dom": "^5.0.0",
37 | "redux": "^4.0.1",
38 | "redux-thunk": "^2.3.0"
39 | },
40 | "devDependencies": {
41 | "@babel/core": "^7.2.2",
42 | "@babel/plugin-proposal-class-properties": "^7.2.1",
43 | "@babel/plugin-syntax-dynamic-import": "^7.2.0",
44 | "@babel/plugin-transform-runtime": "^7.2.0",
45 | "@babel/polyfill": "^7.0.0",
46 | "@babel/preset-env": "^7.2.0",
47 | "@babel/preset-es2015": "^7.0.0-beta.53",
48 | "@babel/preset-react": "^7.0.0",
49 | "@babel/preset-stage-2": "^7.0.0",
50 | "@babel/register": "^7.0.0",
51 | "babel-core": "7.0.0-bridge.0",
52 | "babel-jest": "^24.3.1",
53 | "babel-loader": "^8.0.4",
54 | "babel-plugin-async-to-promises": "^1.0.5",
55 | "babel-plugin-emotion": "^10.0.5",
56 | "babel-plugin-transform-async-to-promises": "^0.8.5",
57 | "babel-plugin-universal-import": "^4.0.0",
58 | "brotli-webpack-plugin": "^1.0.0",
59 | "clean-webpack-plugin": "^3.0.0",
60 | "compression-webpack-plugin": "^2.0.0",
61 | "cross-env": "^6.0.0",
62 | "css-loader": "^3.0.0",
63 | "enzyme": "^3.8.0",
64 | "enzyme-adapter-react-16": "^1.7.1",
65 | "enzyme-to-json": "^3.3.5",
66 | "file-loader": "^4.0.0",
67 | "html-webpack-plugin": "^3.2.0",
68 | "identity-obj-proxy": "^3.0.0",
69 | "jest": "^24.3.1",
70 | "jest-cli": "^24.3.1",
71 | "jest-watch-typeahead": "^0.3.0",
72 | "mini-css-extract-plugin": "^0.7.0",
73 | "optimize-css-assets-webpack-plugin": "^5.0.1",
74 | "react-test-renderer": "^16.6.3",
75 | "regenerator-runtime": "^0.13.1",
76 | "style-loader": "^0.23.1",
77 | "uglifyjs-webpack-plugin": "^2.0.1",
78 | "webpack": "^4.27.1",
79 | "webpack-bundle-analyzer": "^3.0.3",
80 | "webpack-cli": "^3.1.2",
81 | "webpack-dev-middleware": "^3.4.0",
82 | "webpack-dev-server": "^3.1.10",
83 | "webpack-hot-middleware": "^2.24.3",
84 | "webpack-merge": "^4.1.5",
85 | "webpack-node-externals": "^1.7.2"
86 | },
87 | "browserslist": ["last 1 version", "> 1%", "IE 11", "IE 10", "IE 9"]
88 | }
89 |
--------------------------------------------------------------------------------
/examples/react-redux-webpack-client-server-scripts/server/server.js:
--------------------------------------------------------------------------------
1 | //const express = require('express');
2 | import express from 'express';
3 |
4 | //const expressStaticGzip = require('express-static-gzip');
5 | import expressStaticGzip from 'express-static-gzip';
6 |
7 | //const bodyParser = require('body-parser');
8 | import bodyParser from 'body-parser';
9 |
10 | const isProd = process.env.NODE_ENV === 'production';
11 |
12 | //require('dotenv').config();
13 | import dotenv from 'dotenv';
14 | dotenv.config();
15 |
16 | import webpackHotServerMiddleware from 'webpack-hot-server-middleware';
17 |
18 | const isHtmlWebpackPlugin = process.env.WEBPACK_STATIC_HTML_BUILD;
19 |
20 | let webpackDevMiddleware, webpackHotMiddlware, compiler;
21 |
22 | const webpack = require('webpack');
23 | import devClientConfiguration from '../config/webpack.config.dev.client.js';
24 | import devServerConfiguration from '../config/webpack.config.dev.server.js';
25 |
26 | import prodClientConfiguration from '../config/webpack.config.prod.client.js';
27 | import prodServerConfiguration from '../config/webpack.config.prod.server.js';
28 |
29 | console.log('ENNNNNNNNNNNNNNNNNNNNNNNNNNN', typeof isProd);
30 |
31 | if (isProd === false) {
32 | //const config = require('../config/webpack.config.dev.server.js');
33 | //const devClientConfiguration = require('../config/webpack.config.dev.client.js');
34 | //const devServerConfiguration = require('../config/webpack.config.dev.server.js');
35 |
36 | compiler = webpack([devClientConfiguration, devServerConfiguration]);
37 |
38 | //console.log(compiler);
39 |
40 | webpackDevMiddleware = require('webpack-dev-middleware')(
41 | compiler,
42 | devClientConfiguration.devServer
43 | );
44 |
45 | webpackHotMiddlware = require('webpack-hot-middleware')(
46 | compiler.compilers[0],
47 | devClientConfiguration.devServer
48 | );
49 | } else {
50 | console.log('WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW');
51 | //const config = require();
52 | webpack([prodClientConfiguration, prodServerConfiguration]);
53 | }
54 |
55 | class RouterAndMiddlewares {
56 | constructor() {
57 | this.app = express();
58 | this.initExpress();
59 | this.middlewaresExpress();
60 | this.initControllers();
61 | this.start();
62 | }
63 |
64 | initExpress() {
65 | this.app.set('port', 8080);
66 | }
67 |
68 | middlewaresExpress() {
69 | this.app.use(bodyParser.urlencoded({ extended: true }));
70 | this.app.use(bodyParser.json());
71 |
72 | if (!isProd) {
73 | console.log(1111111111111111111111, webpackDevMiddleware);
74 | this.app.use(webpackDevMiddleware);
75 | this.app.use(webpackHotMiddlware);
76 | this.app.use(webpackHotServerMiddleware(compiler));
77 | }
78 |
79 | /*
80 | const staticMiddleware = express.static('public');
81 | this.app.use(staticMiddleware);
82 | */
83 |
84 | this.app.use(
85 | expressStaticGzip('public', {
86 | enableBrotli: true,
87 | prefere: ['br']
88 | })
89 | );
90 | }
91 |
92 | initControllers() {
93 | require('./BasicController.js')(this.app);
94 | }
95 | start() {
96 | let self = this;
97 | this.app.listen(this.app.get('port'), () => {
98 | console.log(`Server Listening for port: ${self.app.get('port')}`);
99 | });
100 | }
101 | }
102 |
103 | new RouterAndMiddlewares();
104 |
105 | /*
106 | module.exports = app => {
107 | return new RouterAndMiddlewares(app);
108 | };
109 | */
110 |
--------------------------------------------------------------------------------
/00_2_intro_JS-patterns.md:
--------------------------------------------------------------------------------
1 | ## Functional Programming
2 |
3 | ### HOF: Higher Order Function
4 | Is a `function` that takes a function as an argument AND/OR returns a function.
5 |
6 | *Basic example:* function that returns (or creates) a new function.
7 |
8 | ```javascript
9 | multiplyNumbers = theFirstNumber => {
10 | return theSecondNumber => theSecondNumber * theFirstNumber;
11 | };
12 |
13 | let multiplyNumbers30 = multiplyNumbers(30);
14 |
15 | // console.log(multiplyNumbers30);
16 | console.log(typeof multiplyNumbers30);
17 | // function
18 |
19 | console.log(multiplyNumbers30(2));
20 | // 60
21 |
22 | console.log(typeof multiplyNumbers30(2));
23 | // number
24 | ```
25 |
26 | ---
27 |
28 | ### Immutability
29 | * Mutable data that CAN be modified after creation
30 | * Immutable can NOT be modified
31 |
32 | *Mutable example*: as you can see, when we `push()` we are modifying the original source, `arr1`
33 | ```javascript
34 | const arr1 = [1,2,3]
35 |
36 | const arr2 = arr1
37 |
38 | arr2.push(4)
39 |
40 | console.log(arr1, arr2)
41 | console.log(arr1 == arr2, arr1 === arr2)
42 | ```
43 |
44 | Result:
45 | ```javascript
46 | [1, 2, 3, 4]
47 | [1, 2, 3, 4]
48 | true
49 | true
50 | ```
51 |
52 | *Immutable example*: with the spread operator we are spreading all the values of `arr1` in a new array
53 | ```javascript
54 | const arr1 = [1,2,3]
55 |
56 | const arr2 = [...arr1]
57 |
58 | arr2.push(4)
59 |
60 | console.log(arr1, arr2)
61 | console.log(arr1 == arr2, arr1 === arr2)
62 | ```
63 |
64 | Result:
65 | ```javascript
66 | [1, 2, 3]
67 | [1, 2, 3, 4]
68 | false
69 | false
70 | ```
71 |
72 | *Important note*: You will find several tutorials (and libraries) offering methods to avoid mutating data. Some of them, using the same naming (`push`) which can be confusing, especially at the beginning. Let's see this case to dispel any possible doubt during your research.
73 |
74 | ```javascript
75 | /* If your prefer fat arrow fn
76 | const push = element => arr => {
77 | let tempArr = [...arr]
78 | tempArr.push(element)
79 | return tempArr
80 | }
81 | */
82 |
83 | function push(element) {
84 | return function (arr) {
85 | let tempArr = [...arr]
86 | tempArr.push(element)
87 | return tempArr
88 | }
89 | }
90 |
91 | const arr1 = [1,2,3]
92 | const arr2 = arr1
93 | const arr3 = push(5)(arr1)
94 |
95 | console.log(arr1, arr2, arr3)
96 | ```
97 |
98 | Result:
99 | ```javascript
100 | [1, 2, 3]
101 | [1, 2, 3]
102 | [1, 2, 3, 5]
103 | ```
104 |
105 | The method `push()()` is a `curried function` (*a function that takes multiple arguments one at the time: btw, we will see this topic in depth*). First, we are passing the element that we want to append in our new array; second, the original array.
106 |
107 | Here's the important part. In our example, `push()` is a function defined in the `global scope` while `[].push` a method of the Array data type.
108 |
109 | Try...
110 | ```javascript
111 | console.log(push())
112 | console.log([].push)
113 | ```
114 |
115 | Result:
116 | ```javascript
117 | function (arr) {
118 | let tempArr = [...arr]
119 | tempArr.push(element)
120 | return tempArr
121 | }
122 | function push() { [native code] }
123 | ```
124 |
125 |
126 |
127 | In most of the cases, using the `spread operator (...)` will be enough (even for nested arrays).
128 |
129 | ```javascript
130 | const arr1 = [1, [2,3, [4]], 5, [6, [7]]]
131 | const arr2 = [...arr1]
132 |
133 | console.log(arr1, arr2)
134 | ```
135 |
136 | ```javascript
137 | [1, [2, 3, [4]], 5, [6, [7]]]
138 | [1, [2, 3, [4]], 5, [6, [7]]]
139 | ```
--------------------------------------------------------------------------------
/examples/react-redux-webpack-client-server-scripts/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nocra",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "jest --env=jsdom --watchAll --colors --config=config/jest/jest.config.json --rootDir",
8 | "start": "cross-env START='true' NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.client.js",
9 | "build:dev": "cross-env NODE_ENV=development webpack --config config/webpack.config.dev.client.js",
10 | "build": "cross-env NODE_ENV=production webpack --config config/webpack.config.prod.js",
11 | "build:server": "cross-env NODE_ENV=production webpack --config config/webpack.config.prod.server.js --env.NODE_ENV=production --watch",
12 | "dev": "cross-env NODE_ENV=development nodemon --watch config --watch server --inspect server/index.js",
13 | "build:server:flex": "cross-env nodemon --watch build build/server-prod-bundle.js",
14 | "prod": "cross-env NODE_ENV=production node server/index.js"
15 | },
16 | "keywords": [],
17 | "author": "",
18 | "license": "ISC",
19 | "dependencies": {
20 | "@emotion/core": "^10.0.5",
21 | "@emotion/styled": "^10.0.5",
22 | "axios": "^0.18.0",
23 | "dotenv": "^8.0.0",
24 | "express-static-gzip": "^1.1.3",
25 | "lodash": "^4.17.11",
26 | "nodemon": "^2.0.0",
27 | "react": "^16.6.3",
28 | "react-dom": "^16.6.3",
29 | "react-redux": "^7.0.0",
30 | "react-router-dom": "^5.0.0",
31 | "redux": "^4.0.1",
32 | "redux-thunk": "^2.3.0",
33 | "webpack-hot-server-middleware": "^0.6.0"
34 | },
35 | "devDependencies": {
36 | "@babel/core": "^7.2.2",
37 | "@babel/plugin-proposal-class-properties": "^7.2.1",
38 | "@babel/plugin-syntax-dynamic-import": "^7.2.0",
39 | "@babel/plugin-transform-runtime": "^7.2.0",
40 | "@babel/polyfill": "^7.0.0",
41 | "@babel/preset-env": "^7.2.0",
42 | "@babel/preset-es2015": "^7.0.0-beta.53",
43 | "@babel/preset-react": "^7.0.0",
44 | "@babel/preset-stage-2": "^7.0.0",
45 | "@babel/register": "^7.0.0",
46 | "babel-core": "7.0.0-bridge.0",
47 | "babel-jest": "^24.3.1",
48 | "babel-loader": "^8.0.4",
49 | "babel-plugin-async-to-promises": "^1.0.5",
50 | "babel-plugin-emotion": "^10.0.5",
51 | "babel-plugin-transform-async-to-promises": "^0.8.5",
52 | "babel-plugin-universal-import": "^4.0.0",
53 | "brotli-webpack-plugin": "^1.0.0",
54 | "clean-webpack-plugin": "^3.0.0",
55 | "compression-webpack-plugin": "^2.0.0",
56 | "cross-env": "^6.0.0",
57 | "css-loader": "^3.0.0",
58 | "enzyme": "^3.8.0",
59 | "enzyme-adapter-react-16": "^1.7.1",
60 | "enzyme-to-json": "^3.3.5",
61 | "file-loader": "^4.0.0",
62 | "html-webpack-plugin": "^3.2.0",
63 | "identity-obj-proxy": "^3.0.0",
64 | "jest": "^24.3.1",
65 | "jest-cli": "^24.3.1",
66 | "jest-watch-typeahead": "^0.3.0",
67 | "mini-css-extract-plugin": "^0.7.0",
68 | "optimize-css-assets-webpack-plugin": "^5.0.1",
69 | "react-test-renderer": "^16.6.3",
70 | "regenerator-runtime": "^0.13.1",
71 | "style-loader": "^0.23.1",
72 | "uglifyjs-webpack-plugin": "^2.0.1",
73 | "webpack": "^4.27.1",
74 | "webpack-bundle-analyzer": "^3.0.3",
75 | "webpack-cli": "^3.1.2",
76 | "webpack-dev-middleware": "^3.4.0",
77 | "webpack-dev-server": "^3.1.10",
78 | "webpack-hot-middleware": "^2.24.3",
79 | "webpack-merge": "^4.1.5",
80 | "webpack-node-externals": "^1.7.2"
81 | },
82 | "browserslist": [
83 | "last 1 version",
84 | "> 1%",
85 | "IE 11",
86 | "IE 10",
87 | "IE 9"
88 | ]
89 | }
90 |
--------------------------------------------------------------------------------
/01_0_starting.md:
--------------------------------------------------------------------------------
1 | # First steps with React
2 |
3 | ## Trying React online
4 | You can try `React online` through any of the major JS "sandboxes" or "playgrounds". I´m going to use [jsfiddle](https://jsfiddle.net), but, feel free to employ your favorite one. *PS*: Another great service is [codesandbox](https://codesandbox.io/) which allows you to download a compressed file with all the assets and code to run it locally once you are done.
5 |
6 | *Note:* Remember you can also include the path (relative if your are working locally or absolute/CDN) to `React` and `ReactDOM` using the `src attribute of the
13 |
14 | ```
15 |
16 | **For production:** @16.x.x
17 | ```javascript
18 |
19 |
20 | ```
21 |
22 | ---
23 |
24 | In your fiddle, if you inspect the output, inside the iframe -> head you will find the 2 libraries plus `Babel`, needed for transpiling `ES* code` (aka, last JS code) into `browser-compatible JS`.
25 |
26 | In *jsfiddle* be sure that you are including `React` and `ReactDOM`. In the `JavaScript input`, under Language, select `Babel + JSX`.
27 | Great! You are ready to start playing!
28 |
29 | Add within the markup or HTML a div with the id `root` (it could be any name).
30 |
31 | ```html
32 |
33 | ```
34 |
35 | Inside the JS text-area, place...
36 | ```javascript
37 | function MyFriend() {
38 | return(
39 | {message}
60 |
40 |
43 | )
44 | }
45 |
46 | var app = (
47 | Peter
41 |More...
42 |
68 |
`
71 | );
72 | }
73 |
74 | const app = MyFriend();
75 | const root = document.getElementById('root');
76 | root.insertAdjacentHTML('beforeend', app)
77 | ```
78 |
79 |
80 | Don´t worry too much about what´s going on! We will see it in detail during this and the upcoming lessons. For the moment, just remember that you can use `React + ReactDOM` with...
81 | * `Peter
69 |More...
70 |