two new artiuckes

complete-firebase-authentication-react-tutorial.md

@@ -1207,7 +1207,7 @@ const withAuthentication = (Component) => {
   class WithAuthentication extends React.Component {
     render() {
       return (
-        <Component />
+        <Component {...this.props} />
       );
     }
   }
@@ -1245,7 +1245,7 @@ const withAuthentication = (Component) =>
 
     render() {
       return (
-        <Component />
+        <Component {...this.props} />
       );
     }
   }
@@ -1286,7 +1286,7 @@ const withAuthentication = (Component) =>
 
       return (
         <AuthUserContext.Provider value={authUser}>
-          <Component />
+          <Component {...this.props} />
         </AuthUserContext.Provider>
       );
     }
@@ -1601,7 +1601,7 @@ import React from 'react';
 const withAuthorization = () => (Component) => {
   class WithAuthorization extends React.Component {
     render() {
-      return <Component />;
+      return <Component {...this.props} />;
     }
   }
 
@@ -1634,7 +1634,7 @@ const withAuthorization = (authCondition) => (Component) => {
     render() {
       return (
         <AuthUserContext.Consumer>
-          {authUser => authUser ? <Component /> : null}
+          {authUser => authUser ? <Component {...this.props} /> : null}
         </AuthUserContext.Consumer>
       );
     }
@@ -2180,7 +2180,7 @@ const withAuthentication = (Component) => {
 
     render() {
       return (
-        <Component />
+        <Component {...this.props} />
       );
     }
   }
@@ -2294,7 +2294,7 @@ const withAuthorization = (condition) => (Component) => {
     }
 
     render() {
-      return this.props.authUser ? <Component /> : null;
+      return this.props.authUser ? <Component {...this.props} /> : null;
     }
   }
 
@@ -2506,7 +2506,7 @@ const withAuthentication = (Component) => {
 
     render() {
       return (
-        <Component />
+        <Component {...this.props} />
       );
     }
   }
@@ -2613,7 +2613,7 @@ const withAuthorization = (condition) => (Component) => {
     }
 
     render() {
-      return this.props.sessionStore.authUser ? <Component /> : null;
+      return this.props.sessionStore.authUser ? <Component {...this.props} /> : null;
     }
   }
 

graphql-apollo-server-tutorial.md

@@ -1381,7 +1381,7 @@ const user = (sequelize, DataTypes) => {
   });
 
   User.associate = models => {
-    User.hasMany(models.Message);
+    User.hasMany(models.Message, { onDelete: 'CASCADE' });
   };
 
   return User;
@@ -1638,7 +1638,7 @@ const user = (sequelize, DataTypes) => {
   });
 
   User.associate = models => {
-    User.hasMany(models.Message);
+    User.hasMany(models.Message, { onDelete: 'CASCADE' });
   };
 
   User.findByLogin = async login => {
@@ -4414,6 +4414,34 @@ const server = new ApolloServer({
 ...
 {{< /highlight >}}
 
+Last but not least, don't forget to add the loader to your subscriptions too, in case you make use of them over there:
+
+{{< highlight javascript "hl_lines=11 12 13" >}}
+...
+
+const server = new ApolloServer({
+  typeDefs: schema,
+  resolvers,
+  ...
+  context: async ({ req, connection }) => {
+    if (connection) {
+      return {
+        models,
+        user: new DataLoader(keys =>
+          loaders.user.batchUsers(keys, models),
+        ),
+      };
+    }
+
+    if (req) {
+      ...
+    }
+  },
+});
+
+...
+{{< /highlight >}}
+
 That's it. Feel free to add more loaders, maybe also for the message domain, on your own. They give you a great abstraction on top of your models to enable batching and request-based caching.
 
 ### Exercises:

javascript-fundamentals-react-requirements.md

@@ -58,11 +58,18 @@ class App extends Component {
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
+          <p>
+            Edit <code>src/App.js</code> and save to reload.
+          </p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
         </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
       </div>
     );
   }

learn-react-before-using-redux.md

@@ -30,7 +30,7 @@ Often people learn React and Redux altogether. But it has drawbacks:
   * thus people will manage (and clutter) **all** of their state in a state container provided by Redux
   * thus people never use the local state management
 
-Because of these drawbacks, you will often get the advice to learn React first and opt-in Redux to your tech stack in a later point in time. But only opt-in Redux if you run into issues scaling your state management. These scaling issues only apply for larger applications. Often you will {{% a_blank "not need a state management library" "https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367" %}} such as Redux on top. The book [The Road to learn React](https://www.robinwieruch.de/the-road-to-learn-react/) demonstrates how an application can be build in plain React without external dependencies like Redux.
+Because of these drawbacks, you will often get the advice to learn React first and opt-in Redux to your tech stack in a later point in time. But only opt-in Redux if you run into issues scaling your state management. These scaling issues [only apply for larger applications](https://www.robinwieruch.de/react-global-state-without-redux). Often you will {{% a_blank "not need a state management library" "https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367" %}} such as Redux on top. The book [The Road to learn React](https://www.robinwieruch.de/the-road-to-learn-react/) demonstrates how an application can be build in plain React without external dependencies like Redux.
 
 However, now you decided to jump on the Redux train. So here comes my list of what you should know about React before using Redux.
 
@@ -389,4 +389,4 @@ So if you decide to make the step towards Redux or MobX, you can read up the fol
 
 <hr class="section-divider">
 
-Hopefully this article gave you clarification about what you should learn and know before using a state management library like Redux. At this time, I am writing a book about state management in React with local state, but also with Redux and MobX. You can {{% a_blank "subscribe if you don't want to miss its release" "https://www.getrevue.co/profile/rwieruch" %}}.
+Hopefully this article gave you clarification about what you should learn and know before using a state management library like Redux. If you are curious about more Redux and MobX, checkout the ebook/course called Taming the State in React.

minimal-react-webpack-babel-setup.md

@@ -1,5 +1,5 @@
 +++
-title = "The minimal React + Webpack 4 + Babel Setup"
+title = "React + Webpack 4 + Babel 7 Setup Tutorial"
 description = "This guide helps you to setup React with Webpack 4 and Babel from 0 to 1. Hot Module Replacement is a bonus. Learn how to use Webpack and Babel in React.js without using create-react-app. Setup your own boilerplate application ..."
 date = "2018-01-18T13:50:46+02:00"
 tags = ["React", "JavaScript", "Tooling"]
@@ -10,7 +10,7 @@ hashtag = "#ReactJs"
 card = "img/posts/minimal-react-webpack-babel-setup/banner_640.jpg"
 banner = "img/posts/minimal-react-webpack-babel-setup/banner.jpg"
 contribute = "minimal-react-webpack-babel-setup.md"
-headline = "The minimal React + Webpack 4 + Babel Setup"
+headline = "React + Webpack 4 + Babel 7 Setup Tutorial"
 
 summary = "Personally I did a lot of React projects in the recent time. Always I had to setup the project from scratch. Eventually I have created my own boilerplate project on GitHub. As you might know, uncountable React boilerplate projects and repositories were created that way. But the article is not my attempt to advertise yet another React boilerplate project."
 +++
@@ -33,7 +33,7 @@ Fourth, the article is not about the boilerplate project itself. The article is
 
 Last but not least, there is already a great official way introduced by Facebook to start a React project: {{% a_blank "create-react-app" "https://github.com/facebookincubator/create-react-app" %}} comes without any build configuration which I can only recommend for anyone who is getting started with React. If you are a beginner, you probably shouldn't bother with a setup of Webpack and Babel. I use create-react-app to teach plain React in my book [the Road to learn React](https://www.robinwieruch.de/the-road-to-learn-react/). You should take the time to read it before you get started with the tooling around React.
 
-That should be enough said about my motivation behind this article. Let's dive into my personal minimal setup for a React project. This tutorial is up to the recent React 16 and Webpack 4 versions. However, you should be able to make it work with Webpack 3 as well.
+That should be enough said about my motivation behind this article. Let's dive into my personal minimal setup for a React project. This tutorial is up to the recent React 16, Webpack 4 and Babel 7 versions.
 
 {{% chapter_header "Table of Contents" "toc" %}}
 
@@ -222,44 +222,41 @@ You are serving your app via Webpack now. You bundle your entry point file *src/
 
 {{% chapter_header "Babel Setup" "babel-react-setup" %}}
 
-{{% a_blank "Babel" "https://babeljs.io/" %}} enables you writing your code in {{% a_blank "ES6 (ES2015)" "https://babeljs.io/docs/learn-es2015/" %}}. With Babel the code will get transpiled back to ES5 so that every browser, without having all ES6 features implemented, can interpret it. Babel even takes it one step further. You can not only use ES6 features, but also the next generations of ES.
+{{% a_blank "Babel" "https://babeljs.io/" %}} enables you writing your code in with JavaScript which isn't supported yet in most browser. Perhaphs you have heard about {{% a_blank "JavaScript ES6 (ES2015)" "https://babeljs.io/docs/learn-es2015/" %}} and beyond. With Babel the code will get transpiled back to vanilla JavaScript so that every browser, without having all JavaScript ES6 and beyond features implemented, can interpret it. In order to get Babel working, you need to install two of its main dependencies.
 
 *From root folder:*
 
 {{< highlight javascript >}}
-npm install --save-dev babel-core babel-loader babel-preset-env
+npm install --save-dev @babel/core @babel/preset-env
 {{< /highlight >}}
 
-Additionally you might want to use some more experimental features in ES6 (e.g. {{% a_blank "object spread" "https://github.com/sebmarkbage/ecmascript-rest-spread" %}}) which can get activated via {{% a_blank "stages" "https://babeljs.io/docs/plugins/preset-stage-0/" %}}. No worries, even though it is experimental, it is already used in create-react-app by Facebook too.
-
-*From root folder:*
+Moreover, in order to hook it up to Webpack, you have to install a so called loader:
 
 {{< highlight javascript >}}
-npm install --save-dev babel-preset-stage-2
+npm install --save-dev babel-loader
 {{< /highlight >}}
 
-As last step, since you want to use React, you need one more configuration to transform the natural React *.jsx* files to *.js* files. It is for the sake of convenience.
+As last step, since you want to use React, you need one more configuration to transform the React's JSX syntax to vanilla JavaScript.
 
 *From root folder:*
 
 {{< highlight javascript >}}
-npm install --save-dev babel-preset-react
+npm install --save-dev @babel/preset-react
 {{< /highlight >}}
 
 Now, with all node packages in place, you need to adjust your *package.json* and *webpack.config.js* to respect the Babel changes. These changes include all packages you have installed.
 
 *package.json*
 
-{{< highlight javascript "hl_lines=5 6 7 8 9 10 11" >}}
+{{< highlight javascript "hl_lines=5 6 7 8 9 10" >}}
 ...
 "keywords": [],
 "author": "",
 "license": "ISC",
 "babel": {
   "presets": [
-    "env",
-    "react",
-    "stage-2"
+    "@babel/preset-env",
+    "@babel/preset-react"
   ]
 },
 "devDependencies": {
@@ -294,29 +291,30 @@ module.exports = {
 };
 {{< /highlight >}}
 
-You can start your application again. Nothing should have changed except for that you can use upcoming ECMAScript functionalities for JavaScript now. An optional step would be to extract your Babel configuration in a separate *.babelrc* configuration file.
+You can start your application again. Nothing should have changed except for that you can use upcoming ECMAScript functionalities for JavaScript now.
+
+An optional step would be to extract your Babel configuration in a separate *.babelrc* configuration file.
 
 *From root folder:*
 
 {{< highlight javascript >}}
 touch .babelrc
 {{< /highlight >}}
 
-Now you can add the configuration for Babel, which you have previously added in your *package.json*, in the *.babelrc* file. Don't forget to remove the configuration in the *package.json* afterward. It should be configured at only one place.
+Now you can add the configuration for Babel, which you have previously added in your *package.json*, in the *.babelrc* file. Don't forget to remove the configuration in the *package.json* afterward. It needs to be configured at only one place.
 
 *.babelrc*
 
 {{< highlight javascript >}}
 {
   "presets": [
-    "env",
-    "react",
-    "stage-2"
+    "@babel/preset-env",
+    "@babel/preset-react"
   ]
 }
 {{< /highlight >}}
 
-You are set up to build your first React component now.
+Babel enables you to use future JavaScript in your browser, because it transpiles it down to vanilla JavaScript. Now you are set up to build your first React component now.
 
 {{% chapter_header "React Setup in a Webpack + Babel Project" "react-setup" %}}
 

react-context-api.md

@@ -19,7 +19,7 @@ summary = "React's Context API is a powerful feature for passing props down the
 
 {{% pin_it_image "react context API" "img/posts/react-provider-pattern-context/banner.jpg" "is-src-set" %}}
 
-Note: If you are using a React version 16.3 or above, this article might be relevant to you. It explains how to use React's new context API for passing props down the component tree. Only components who are interested can consume these props. If you are using a React version prior 16.3, head over to [this article to implement your own provider pattern in React with its old context API](https://www.robinwieruch.de/react-provider-pattern-context).
+Note: If you are using a React version 16.3 or above, this article is relevant to you. It explains how to use React's context API version for React 16.3 and above for passing props down the component tree. Only components who are interested can consume these props. If you are using a React version prior 16.3, head over to [this article to implement your own provider pattern in React with its old context API](https://www.robinwieruch.de/react-provider-pattern-context).
 
 React's context API is a powerful feature. You will not often see it when using plain React, but might consider using it when your React application grows in size and depth from a component perspective. Basically, React's context API takes the clutter away of passing mandatory props, that are needed by every component, down your whole component tree. Most often components in between are not interested in these props.
 
@@ -230,4 +230,6 @@ Now you could wrap any component into the `getTheme` higher-order component and
 
 <hr class="section-divider">
 
-A running application which uses React's context API can be found in this {{% a_blank "GitHub repository" "https://github.com/rwieruch/react-context-api" %}}. In the end, React's context API is used in complex applications to glue the state layer to your view layer. When using [Redux or MobX](https://www.robinwieruch.de/redux-mobx-confusion/), the state (store) is passed to your `Provider` component as props. The `Provider` component wraps the store into React's context and thus all child components can access the store. For instance, in Redux a higher-order component called `connect` is used to access the store again.
+A running application which uses React's context API can be found in this {{% a_blank "GitHub repository" "https://github.com/rwieruch/react-context-api" %}}. In the end, React's context API is used in complex applications to glue the state layer to your view layer. When using [Redux or MobX](https://www.robinwieruch.de/redux-mobx-confusion/), the state (store) is passed to your `Provider` component. The `Provider` component wraps the store into React's context and thus all child components can access the store. For instance, in Redux a higher-order component called `connect` is used to access the store again. That's why there is no such thing as "React Context API vs Redux" or "Does React Context API replace Redux". The Context API is only a way to pass props down the component tree. It can be used as state layer, but shouldn't be abused as it. If you are looking for a more sophisticated state management library, checkout Redux or MobX.
+
+{{% read_more "How to build a GraphQL client library for React" "https://www.robinwieruch.de/react-graphql-client-library" %}}