Babel enables debugging of the the original source code by including source maps with the compiled JavaScript. JavaScript interpreters will run the compiled code, but map it to the source code in the debugger so that you can debug the source code instead of the (generally quite ugly) compiled output.

References:
https://blog.bitsrc.io/writing-your-own-custom-hooks-4fbcf77e112e
https://usehooks.com/

Your main home page image link is broken and doesn't have a Alt either.

Your main home page image link is broken and doesn't have a Alt either.

I'm wondering if a section on routing options would be in scope for this project. Seems like it would fit well before the "Data Management" section in the table of contents.

I am accustomed to read in dark mode. This made my eye sensitive to light mode! :)

Would it be possible to highlight the parts in the code that are being focussed on in the section?
A few times there is a lot of code including styles around the one or two lines of code that is being talked about. For example, in Rendering with ternary -

{subtitle ? (
          <h2 style={styles.subtitle}>{subtitle}</h2>
        ) : (
          <h3 style={styles.empty}>No subtitle</h3>
        )}

this is the part that should attract the reader's focus, but it blends in with 50 other lines of code.

For mobile: add overflow: auto and image maxWidth: 100% so page doesn't overflow (the dev tools setup with ghetto code blocks)

Mention PureComponent and sfc in React Top-Level API

Actually explain Input handling example

Are you planning to update the guide to latest?

Like many beginner-oriented tutorials, it doesn't mention the difference between development and production builds. Unfortunately, this leads to people shipping development builds to production.

If the guide only used Create React App, this would not be a large problem since CRA strictly divides development (npm start) and production (npm run build) environments. However this is a section that tries to explain Webpack/Babel alone. I'm worried that people learning using that section will get the impression that the result is production-ready. (It's not.)

I think that if the guide chooses to explain Webpack rather than use CRA, it also needs to explain development/production configs, and show examples of both. It is important to teach people to think about these as two separate environments, and that one must never deploy a development bundle to production.

http://www.react.express/components

it says brower instead of browser. First paragraph.

We often get issues in CRA repo from people who didn't believe CRA "just works" and tried to install Webpack or Babel on top of the generated project. To prevent issues like this, I think it would be nice to add extra notes on Babel and Webpack pages that they are not required for learning React, and you can use create-react-app alone if you don't want to learn them yet.

I've seen these notices on Environment page but they're easy to miss or forget.

The question mark is misleading and directs away from the if else statements that should be focused on.
Would recommend changing the ? to if else

the look and feel of react-express is very similar to something created using GitBook. Given the huge size, it is absolutely critical to have a search box there (like redux.js.org)

Would love if you can make react.express a PWA.

I'm in an rural area of the world that has spotty internet, having offline access would be amazing!

Hi, really enjoyed your guide, helped me get up and running quickly, however when leaving the site react.express open in safari it quickly consumes all of my available system memory. Rather concerning. Specifically noticed on the conditional rendering section.

Hi there,

I have followed the steps under Webpack section but they don't work.
✅ mode: "development"; ❌ mode: env
2) bundle.js is not created
3)

"devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }

4. When I go to the browser, "Cannot GET /" is showed.
5. So, you wrote npm run dev when it should be npm run start, isn't it?

Best regards.

Hi, first, thanks for the guide, it helps a lot.
Second, while reading through it i stumbled over some points which are outdated or probably would be helpful.
Can't say if you want to update them, but for the time being i will report it.

Link: https://www.react.express/environment/setup_and_tools/webpack

Section "Scripts" command "--env development" gets passed as boolean not as string (See Scripts & Configuration).
Section "Configuration" webpack-dev-server needs to define "allowedHosts" when not developing via localhost (See Configuration).
Section "Essential files" File "index.html" has to be moved to "/public/index.html".
Section "Running the development server" command "npm run dev" has to be replaced with "npm run start".

Scripts:

{
  ...
  "scripts": {
    "start": "webpack-dev-server --env mode=development",
    "build": "webpack --env mode=production"
  },
  ...
}

Configuration:

module.exports = (env) => {
  return {
    mode: env.mode,
    entry: './index.js',
    output: {
      filename: 'bundle.js',
    },
    devServer: {
      allowedHosts: [
        '.yourdomain.com'
      ]
    },
  }
}

Essential files:

I am really happy about this site, that's why I suggest to for this to be SSL certified so that all info transmission is secured. It's all for the greater good :) Well I can suggest https://letsencrypt.org/

There is a myth that React requires using inline styles, and IMO this guide might confirm this idea for people who aren't experienced with React.

Would it be better to use plain CSS for learning? I understand the advantages of using a single file in examples, but it can hurt perception of React's flexibility.

In addition, inline styles implemented naïvely as objects have performance issues.

The ReactTopLevelAPI page mentions stateless components but does not show how to write one. Add and example. Something like https://reactjs.org/docs/legacy-context.html#referencing-context-in-stateless-functional-components

On the Event Handling page, please add some insight on React's use of SyntheticEvent.

I recommend mentioning React DevTools early on so that people can get comfortable with React component hierarchy and gain awareness of whether they're running development or production build.

Just wondering if there's any reason http://www.react.express/ isn't running over https?

Firstly, sorry about my poor English.

I got an error like next, running on node 8.0.0 just clone this repository and yarn

It seems like that could not parse jsx syntax.

Can you help me?

 ERROR in ../~/react-disqus-thread/lib/components/DisqusThread.js
    Module parse failed: D:\mis\react-express\node_modules\react-disqus-thread\lib\components\DisqusThread.js Unexpected token (100:6)
    You may need an appropriate loader to handle this file type.
    |   render() {
    |     return (
    |       <div>
    |         <div id="disqus_thread"/>
    |       </div>
     @ ../~/react-disqus-thread/lib/main.js 1:17-53
     @ ./components/Disqus.js
     @ ./components/index.js
     @ ./pages/Animated.js
     @ ./pages lazy ^\.\/.*$
     @ ./index.js
     @ multi ./index.js