程序员经验分享-hwhale

React 组件未渲染到index.html

2024-03-29

我真的是 ReactJS 的初学者。组件没有渲染，我浪费了很多时间来搜索但没有成功。 我正在跟进从这个系列。我已经从这里配置了 webpack-dev-serverlink https://stackoverflow.com/questions/39912717/webpack-dev-server-is-setting-wrong-path-for-root-localhost8080。 根据教程检查下面的文件层次结构。

请让我知道问题所在。

索引.html

<!DOCTYPE html>
<html>
<head>
<title>React</title>
</head>

<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

App.js

import React from 'react';  
class AppFirst extends React.Component{
    render(){
        return(
            <div>
                <h1>Hello ReactJs</h1>
            </div>
        );
    }
}
var appElement = <AppFirst />;
Raect.render(appElement, document.getElementById("app"));

包.json

    {
  "name": "react-for-everyone",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "./node_modules/.bin/webpack-dev-server --content-base"
  },
  "author": "",
  "license": "ISC",
  "devDependencies":{
      "babel-core": "^6.1.*",
      "babel-loader": "^6.2.*",
      "babel-preset-es2015": "^6.16.*",
      "babel-preset-react": "^6.16.*",
      "webpack": "^1.13.*",
      "webpack-dev-server": "^1.16.*"
  },
  "dependencies":{
      "react": "^15.3.*",
      "react-dom": "^15.3.*"
  }
}

webpack-config.js

    module.exports ={
    entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/App.js'
    ],
    output: {
        path: path.resolve(__dirname, "react-for-everyone"),
        filename: 'app.js',
        publicPath: 'http://localhost:8080'
    },
    devServer: {
        contentBase: "./react-for-everyone",
    },
    module:{

        loaders:[{
            test: "/\.jsx?$/",
            exclude: /node_modules/,
            loader: "babel",
            query: {
                preset: ['es2015', 'react']
            }
        }]
    }
};

React.render()当前版本不再使用。 React 已将库从 0.14 版本中分离出来。你需要使用ReactDOM.render()除了你的错字之外React.render()

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class AppFirst extends React.Component{
        render(){
            return(
                <div>
                    <h1>Hello ReactJs</h1>
                </div>
            );
        }
    }
    var appElement = <AppFirst />;
    ReactDOM.render(appElement, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

在你的 webpack 中你已经添加了引号test: "/\.jsx?$/"你不应该拥有它们。test: /\.jsx?$/。它应该是正则表达式而不是字符串

您需要做的其他更正。

  1. 将 webpack-config.js 重命名为 webpack.config.js

  2. 在 webpack 加载器中你需要定义presets并不是preset

  3. 在 package.json 中包含路径npm install -S path和 webpack 作为var path = require('path');

  4. 更改目录结构index.html包含在 src 中

  5. 你最终的 webpack 看起来像这样

webpack.config.js

 var path = require('path');

 module.exports ={
    context: path.join(__dirname, "src"),
    entry: [
    './App.js'
    ],
    output: {
        path: __dirname + "/src",
        filename: 'bundle.js',
    },
    module:{

        loaders:[{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
};

  1. 更改您的脚本package.json to "dev": "./node_modules/.bin/webpack-dev-server --content-base src"

  2. 最后做完之后npm run dev open http://localhost:8080/index.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

React 组件未渲染到index.html 的相关文章

随机推荐

  • OpenCV 中 minEnclosureCircle 的意外结果

    我最近使用了 OpenCV 2 4 2 的函数 minEnendingCircle 因为我需要测量一团点的直径 一段时间后 我意识到结果不正确 因此我决定编写一个小例程来计算一组非常小的点的直径 我测试了该函数 1个单点 连续2 4分 仅由

  • 保留一个新对象而无需获取关联

    我在广告实体中有以下映射 class Ad Id Column name id unique true nullable false GeneratedValue strategy GenerationType SEQUENCE gener

  • 实现 ActiveRecord before_find

    我正在使用缓存在表中的关键字构建搜索 在表中查找用户输入的关键字之前 它会被标准化 例如 删除了一些标点符号 如 并对大小写进行了标准化 然后使用规范化的关键字来查找获取搜索结果 我目前正在使用 before filter 处理控制器中的标

  • 导入 React-Router-Dom 后 React App 变为空白

    导入前react router一切正常 现在它构建成功但显示空白页面 这是我的代码 App js import ReactDOM from react dom client import BrowserRouter Routes Route

  • 如何调查 imp.load_module 上的 python2 段错误

    我正在尝试安装和使用dolfin https aur archlinux org packages dolfin bzr 在 Arch Linux 上 使用 Python 2 7 3 找出导致分段的原因的最佳方法是什么 诸如此类的故障 py

  • 无法获取在Firebase存储中上传的图像的实际下载网址[重复]

    这个问题在这里已经有答案了 我正在尝试获取上传到 firebase 数据库的图像的下载网址 但任务Uri imageURL storageReference getDownloadUrl 没有给出存储在 firebase 存储中的图像的实际

  • 实体框架 4 Single() vs First() vs FirstOrDefault()

    我花了很长时间寻找查询单个项目的不同方法的比较 以及何时使用每种方法 有谁有一个比较所有这些的链接 或者一个关于为什么你会使用其中一个而不是另一个的快速解释 还有更多我不知道的运营商吗 谢谢 以下是不同方法的概述 Find 当您想通过主键获

  • 如何对 Flask 应用程序进行守护进程？

    我有一个使用 Flask 用 Python 编写的小应用程序 现在我正在 nohup 下运行它 但我想将它守护进程化 这样做的正确方法是什么 部署 Flask 项目有多种方式 http flask pocoo org docs deploy

  • 在 Mac OS X Lion 上设置环境变量

    当有人说 编辑你的 plist 文件 或 你的 profile 或 bash profile 等时 这让我很困惑 我不知道这些文件在哪里 如果必须这样做的话如何创建它们等等 也不知道为什么似乎有这么多不同的文件 为什么 它们做不同的事情吗

  • 实现 PushKit 并测试开发行为

    我想在我的应用程序 Voip 应用程序 中实现 PushKit 服务 但我有以下疑问 我看到我只能生成生产 voip 证书 如果我尝试在开发设备上测试 voip 推送通知服务 它可以工作吗 这是我的实施测试 通过这 3 行代码 我可以在 d

  • 将 Shapes.Path 项目绑定到 ItemsControl

    我一直在试图弄清楚如何绑定ObservableCollection

  • 超越比较忽略所有文件中不重要的差异

    我正在使用Beyond Compare 3 3 4 我想比较大量文件并忽略不重要的差异 In Session gt Session Settings gt Comparison tab 需要打开文件 部分有一个 比较内容 基于规则的比较 当

  • IE 11 中的 VueJS - 的模板包装器不工作，但在 Edge 和 Chrome 中工作

    这是在 IE 11 中使用 Vue 2 5 16 假设datasetapp data 中的数组 以下内容在 Chrome 中运行良好 并且代码已简化 tbody tbody

  • 如何在 iOS 应用程序中创建自定义委托

    在 iPhone 中 每个 UIContrrol 都有预定义的委托方法 但是我们如何创建自己的自定义委托方法 在你的头文件中 之前 interface insert protocol YourDelegate

  • 按数组中的多个属性对对象进行分组，然后对它们的值求和

    按多个属性对数组中的元素进行分组 https codereview stackexchange com questions 37028 grouping elements in array by multiple properties是与我

  • React-Native-Table-Component 冻结可滚动表中的第一列和第一行

    期望状态 我正在使用react native table component 这是一个在 React Native 中渲染表格的基本组件 我需要冻结表中的第一列和第一行 以便滚动时它们保持在视图中 具体来说 我需要在水平滚动时第一列保持固定

  • gradle 1.10 内部 Maven 存储库在 intellij 13 中永远索引

    我有两个项目 一个 Maven 和一个 Gradle 该公司还有一个内部 Maven 存储库 我正在尝试设置 Gradle 以使用内部存储库 使用 Intellij 13 当我将像这样的存储库添加到 build gradle 中的 Grad

  • Maven 依赖项：树未显示所有传递依赖项

    我无法理解该人的行为依赖 树输出 当在更高的模块上运行插件时 我丢失了它所依赖的模块的重要信息 但是当我在较低的模块上运行插件时 我可以看到依赖项 这是一个显示问题的示例 名称已更改 mvn pl foo bar application d

  • 非 Windows 世界中的 COM？

    希望这个问题不会太含糊 通读 COM 规范和 Don Box 的 Essential COM 书 有很多关于 COM 解决的问题 的讨论 它们听起来都很重要 相关且重要 current https stackoverflow com que

  • React 组件未渲染到index.html

    我真的是 ReactJS 的初学者 组件没有渲染 我浪费了很多时间来搜索但没有成功 我正在跟进从这个系列 我已经从这里配置了 webpack dev serverlink https stackoverflow com questions

热门标签