React Native学习遇import语法错误，寻求技术指导

你这段是Web端React代码，并非React Native代码，不能直接用node命令运行。Node.js默认采用CommonJS模块规范，你的代码使用了ES模块的import语法，同时React代码需要经过编译处理JSX、打包才能在浏览器运行，直接用node执行必然报错。

以下是两种解决方式：

方法一：用Create React App快速搭建环境（推荐） #

如果是跟着书中Web React章节学习，直接用官方脚手架创建项目：

npx create-react-app hello-jsx

进入项目目录，把你写的代码替换src/App.js里的内容，然后运行：

npm start

脚手架会自动配置好编译、打包、模块相关的所有设置，你直接在浏览器就能看到运行效果。

方法二：手动配置模块类型与编译（适合理解原理） #

若想手动配置，需完成两步：

1. 标记项目为ES模块：在项目根目录创建package.json（无则新建），添加"type": "module"字段：

   {
     "type": "module"
   }
   

2. 编译JSX与React代码：Node.js本身不识别JSX，需要用Babel编译。先安装依赖：

   npm install @babel/core @babel/cli @babel/preset-react @babel/preset-env
   

   创建.babelrc配置文件：

   {
     "presets": ["@babel/preset-env", "@babel/preset-react"]
   }
   

   执行编译命令：

   npx babel src/index.js --out-file dist/index.js
   

   注：编译后还需创建HTML文件引入编译后的JS，或用打包工具将React、ReactDOM打包进去，否则浏览器无法识别这些模块。

额外提醒 #

你提到是React Native新手，但当前代码属于Web React范畴。React Native的代码结构和运行逻辑不同，它不需要HTML，需用react-native run-ios或react-native run-android命令运行，入口文件通常为App.js或index.js（与Web端结构不同）。如果是学习React Native章节，建议切换到对应项目结构。

内容的提问来源于stack exchange，提问作者Andrew