jsx

这是《玩转 React》系列的第三篇，看到本篇的标题，了解过 React 的同学可能已经大致猜到我要讲什么了，本篇中要讲的内容对于刚接触 React 的同学来说，可能有些难以接受，但希望你能坚持学下去，这是 Facebook 的前端大神们为前端开发做出的革命性创新。 React 第一印象 废话不多说，先看一段代码： class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render(<HelloMessage name="John" />, mountNode); 这是从 React 官网首页粘贴过来的一段示例代码，简单解释一下，这段代码实现了一个名为 HelloMessage 的组件，它接收一个 name 属性，可以在页面上展示出 Hello xxx。 ReactDOM.render 是用来将某个组件渲染到页面的某个 DOM 节点上。 在之后的文章中，我们会详细讲解如何创建 React 组件以及如何开发一个完整的 React 项目。现在，我更想跟大家探讨的是，你看了上述这段代码，算是对 React 有了第一印象，内心是怎样的感受？ 我相信，很多人第一次看到这样的代码时的感受都是：“我擦，这是什么玩意儿

JSX语法 如要要使用 JSX 语法，必须先运行 cnpm i babel-preset-react -D ，然后再 .babelrc 中添加 语法配置； babelrc配置 { "presets": ["env", "stage-0", "react"], "plugins": ["transform-runtime"] } webpack中配置 module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[name]_[local]-[hash:5]'] }, // 通过 为 css-loader 添加 modules 参数，启用 CSS 的模块化 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000' }, { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ } ] } JSX语法的本质：还是以 React.createElement 的形式来实现的，并没有直接把

‘React’ must be in scope when using JSX react/react-in-jsx-scope报错： 在头部引入 import React from 'react’即可 来源： CSDN 作者： 一笔执念,一生等待 链接： https://blog.csdn.net/qq_43320162/article/details/103749323