atlaschiew / react-study Goto Github PK

There is none when it comes to file extensions. Your bundler/transpiler/whatever takes care of resolving what type of file contents there is.

There are however some other considerations when deciding what to put into a .js or a .jsx file type. Since JSX isn't standard JavaScript one could argue that anything that is not "plain" JavaScript should go into its own extensions ie., .jsx for JSX and .ts for TypeScript for example.

The main purpose of sourcemaps is to aid debugging. Basically, if there's an error in the generated code file, the map can tell you the original source file location. That's it.

webpack's ts-loader would compile Typescript to ES6, then babel-loader would transpile ES6 to ES5. However, since the Typescript compiler can target ES5 directly, we chose to remove Babel from the build process so that we were just using ts-loader. This was simpler and also improved the speed of our builds.

ts-loader uses tsc , the TypeScript compiler, and relies on your tsconfig.json configuration.

simply add window.yourReachMadefunction = () => { ... } to window namespace.

This is answer from chatGPT

In React, componentDidMount is a lifecycle method that is called once, immediately after a component is mounted (inserted into the DOM).

If you are observing componentDidMount being triggered twice, it is likely because the component is being rendered twice. There are several reasons why this might be happening:

1. Initial render and re-render: The first time a component is rendered, it triggers componentDidMount. However, if the component is re-rendered due to a state or props change, it will trigger componentDidMount again.

2. Render methods in higher-order components: If your component is wrapped in a higher-order component that has its own render method, this can cause your component to be rendered twice.

3. DevTools and strict mode: If you are using the React DevTools, it can sometimes trigger a "double-render" in strict mode, which will cause componentDidMount to be called twice.

ENVIRONMENT:
development on ubuntu
browser on window

install mkcert

# login root
$ apt-get update -y
$ cd ~
$ wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64
$ mv mkcert-v1.4.3-linux-amd64 /usr/bin/mkcert
$ chmod +x /usr/bin/mkcert
$ mkcert --version

es-module 模块化
以前javascript是没有模块体系的，后来js社区提出了三种模块化方案，主要是CommonJS，AMD，CMD三大规范。比如nodejs的模块系统require、webpack等都是以CommonJS规范来实现的；requirejs是基于AMD规范来实现的，seajs是基于CMD规范实现的。

但这些都不是最好的方式，于是es6提出了官方的es-module模块化方案，成为浏览器和服务器通用的模块解决方案。

es-module主要由两个命令构成：export和import，即导出和导入。

使用es-module时，可以说一个js文件就是一个模块，文件内的变量、函数、类需要export，然后才能在另一个模块中使用import来引用。

react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself.

react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to see what everything it does for you.

with create-react-app you have following features out of the box.

• React, JSX, ES6, and Flow syntax support.
• Language extras beyond ES6 like the object spread operator.
• Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
• A fast interactive unit test runner with built-in support for coverage reporting.
• A live development server that warns about common mistakes.
• A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
• An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
• Hassle-free updates for the above tools with a single dependency.

browser does not understand this JSX because it's not valid JavaScript code. This is because we're assigning an HTML tag to a variable that is not a string but just HTML code.

So to convert it to browser understandable JavaScript code, we use a tool like Babel which is a JavaScript compiler/transpiler.

You can set up your own babel configuration using Webpack as I show in this article. Or you can use create-react-app which internally uses Babel for the JSX to JavaScript conversion.