plan-and-done-for-may-06-2018

Source

What will I learn today?

FreeCodeCamp React projects: Markdown online parser - start coding.

Done

Online markdown editor app

The user story and the desired result.

Challenges

  1. Estimated size of the bundle over 50kB gzipped.
  2. How to make browsersync work with react application?
  3. Can't make work webpack hot reload with gulp.
  4. How to render escaped HTML inside component?

Solutions

  1. Explanation from Dan Abramov. Google for solution alternatives.

  2. I've found this receipt. Here is an example of config

  3. The problem looks like:

    react-hot-loader\index.js' is not a loader (must have normal or pitch function)

    To solve it we need to move react-hot-loader from webpack.config.js to .babelrc as described in Dan's post (check step 3.2.a).

    Second problem with dependencies of eslint and depricated rule jsx-a11y/href-no-hash. Solved it including to rules into .eslintrc - "jsx-a11y/href-no-hash": 2, "jsx-a11y/anchor-is-valid": 2;

    Third problem is the working server doesn't produce bundle.js. But as I've got it's not a bug but a feature - webpack doesn't generate output when it runs in with devServer.

    Fourth problem is server does rebuild, but after checking for update and finding the updated module doesn't hot reload react components saying:

    App is up to date.

    Solved it after a couple of hours by reading different issues (#581 and #100 gave me a clue) and finally using manual of react-hot-reload. I've exported all my components as hot.

  4. I've got escaped HTML result of a markdown converter function. When I tried to put the result into an output component on the page I got raw HTML on the page. The way to convert it into renderable HTML is to use weird function dangerouslySetInnerHTML as described on SO page . Here is a bit about the function name and sense begind it.