javascript - 如何正确地将 React 组件存储在单独的文件中并导入 React？-6ren

javascript - 如何正确地将 React 组件存储在单独的文件中并导入 React？

转载作者：搜寻专家更新时间：2023-11-01 04:50:02

25

4

我已经完成了一些 React 教程的介绍，并且正在尝试将我目前的一些知识付诸实践。我已经在 <script type='text/babel'> 中成功创建了一些组件并使用 babel 的 browser.js在浏览器中将其转换为 JS 客户端。

但是，我现在正在尝试将我的组件分解成单独的文件，转译它们，然后将转译后的 JS 提供给客户端，而不是在客户端完成转译。

我对如何将 ReactJS 正确导入我的组件 JSX 文件感到困惑。我之前没有构建过大型的JS应用，所以我不熟悉将库导入其他模块的方法。

这是我的组件 JSX 文件之一:

var SidebarFilter = React.createClass({
  render: function() {
    return (
        <div className="btn-group">
          Some markup removed for brevity. 
        </div>
    );
  }
});

在我的主 html 文件中，如果我有:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

在我的任何 <script> 之前我的组件的标签，一切正常。但是如果组件放在react/reactdom脚本标签上面，就不行了。

我见过 javascript 有一个 import还有require ，但我不确定有什么区别，什么时候使用哪个更好，以及两者是否需要任何额外的构建，或者它们是否在浏览器中正确使用。

谢谢!

最佳答案

如果您只是学习 React，那么您可以在 html 中使用脚本标签。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

如果你想开发一个可以部署到生产环境的应用程序，你需要遵循以下步骤。毫无疑问，互联网上有更好的教程，但它会给你一些想法。

1.需要Browserfiy或Webpack:

在浏览器中，您不能像编写 node.js 代码时那样require 或import 模块。在 Browserify/Webpack 的帮助下，您可以编写使用 require/import 的代码，就像在节点环境中使用它一样。考虑到它的受欢迎程度，我假设您将使用 webpack。

<强>2。安装依赖(es6)

这些是您在项目 (package.json) 中需要的最小依赖项，以使其正常运行

  "devDependencies": {
        "babel-cli": "^6.3.17",
        "babel-core": "^6.3.21",
        "babel-eslint": "^5.0.0-beta6",
        "babel-loader": "^6.2.0",
        "babel-preset-es2015": "^6.3.13",
        "babel-preset-react": "^6.3.13",
        "babel-preset-stage-3": "^6.3.13",
        "css-loader": "^0.23.0",
        "eslint": "^1.10.3",
        "eslint-loader": "^1.1.1",
        "eslint-plugin-react": "^3.12.0",
        "style-loader": "^0.13.0",
        "webpack": "^1.12.9",
        "webpack-dev-server": "^1.14.0"
      },
      "dependencies": {
        "react": "^15.0.0-rc.1",
    "react-dom": "^15.0.0-rc.1"

3.编写你的 webpack-config.js 文件

示例 webpack 配置文件应该是这样的。不要问我关于它的每一点，而是看看 webpack 教程，因为我无法在这里解释所有内容。请记住一个事实 Webpack 是一个模块打包器，可以为浏览器打包 javascript 和其他资源。

var path    = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: {
    main: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/index.js'
    ]
  },
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: 'http://localhost:8080/public/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
   loaders: [
      {
        test      : /\.jsx?$/,
        include   : path.join(__dirname, 'src'),
        loader    : 'react-hot!babel'
      },
      {
        test      : /\.scss$/,
        include   : path.join(__dirname, 'sass'),
        loaders   : ["style", "css?sourceMap", "sass?sourceMap"]
      },
      {
          test    : /\.(png|jpg|svg)$/,
          include : path.join(__dirname, 'img'),
          loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
     } // inline base64 URLs for <=30k images, direct URLs for the rest
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

4.为您的应用程序设置入口点和路由

src->index.jssrc->routes.js

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Router,browserHistory} from 'react-router';
import routes from './routes';

ReactDOM.render(
    <Router routes={routes} history={browserHistory}/>
  , document.querySelector('.init')
);

路由.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/app';
import Home from './components/home';


module.exports = (
       <Route path="/" component={App}>
           <IndexRoute component={Home}/>
       </Route>
)

5.在您的项目根目录中设置 index.html

<!DOCTYPE html>
<html>
  <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Welcome to ReactJs</title>
  </head>
  <body>
    <div class="init"></div>
  </body>
  <script src="./public/bundle.js"></script>
</html>

6.运行

形成你的项目根类型

webpack-dev-server --progress --colors

导入和要求

import 和 require 在功能上非常相似。唯一的区别是 import 是 es6 可用的新语法糖，而 require 是 es5 使用的。

关于javascript - 如何正确地将 React 组件存储在单独的文件中并导入 React？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36073576/

25

4

0

文章推荐： javascript - 如何更改 SVG 路径颜色？

文章推荐： javascript - jQuery 替换多次出现的子字符串/文本

文章推荐： javascript - jQuery 验证和禁用输入字段

java - 如何使用method.inserAt();正确地
我在 Web 应用程序中尝试了一些字节码操作，到目前为止，效果很好。现在我需要在代码中的某些特定位置注入(inject)一些字节代码。我用 switch 语句和 method.inserAt(); 尝
javascript - 我怎样才能(正确地)求和并计算百分比？
我正在尝试对数组中的对象值求和，然后计算每个值相对于总数的百分比。这里是数组: [ { "ratiototale": [ [ { "0":
c# - 我如何对这个(正确地)抛出异常的异步方法进行单元测试？
我在接口(interface)中有以下方法.. Task> SearchAsync(TU searchOptions); 效果很好。现在我正在尝试进行单元测试以测试何时出现问题 - 代码会抛出异常。
jquery - 如何(正确地)在基础中包含 Reveal？
我似乎无法让 reveal 开始工作，我已经严格遵守所有内容，添加 modernizr，添加插件，添加 css(reveal 显然包含在 foundation 中)，在开始时初始化 foundatio
c - 如何从 golang 正确地 IOCTL
我正在尝试移植 raspberrypi's userspace 的位从 C 到 golang 的代码，我遇到了一个涉及 ioctl() 的程序。我在执行 C 代码时遇到了问题 #define MAJ
java - 我如何(正确地)在纯 Java 中以高帧率渲染
我一直在尝试用纯 Java 制作一个简单的游戏，但在绘图时遇到了问题。我正在尝试保持相对较高的帧速率，但是 JFrame.repaint() 不能被“强制”并且只是在下一个可用机会重绘帧的请求这一事实
python - 从字符串**正确地**创建一个 lambda 函数
给定一个字符串 "2*(i+j) = 20 我想返回 ((lambda x: x >= 20), ['i']) 我可以然后直接提供给 constraint。最佳答案您正在寻找 eval 的替代方法
javascript - 在 Javascript 中编程 OOP - 正确地
我对改进我的 javascript 代码以使其成为正确的 OOP 很感兴趣....目前我倾向于做这样的事情: jQuery(document).ready(function () { Page
javascript - 有没有办法让两个 jQuery 动画同时(正确地)运行？
我有一个调用两个动画 Action 的事件监听器。不幸的是，它们的开始有少量错开(例如，函数中的第一个首先开始)。有谁知道正确同步它们的方法吗？这是我的代码: $("#nav ul li a").
delphi - 如何*正确地*找出 Delphi XE2 上的目录是否存在？
我只需要检查目录是否存在!但是，如果目录是“E:\Test”，其中 E: 是 CD/DVD 驱动器，并且上面没有插入磁盘，我会看到以下 Delphi 和 Windows 问题。第一种方法: func
c# - 我如何(正确地)从 EWS 继承类，例如约会？
同样的问题: https://stackoverflow.com/questions/11294207/exchange-web-services-argumentexception-using-my
javascript - 如何 - 正确地 - 委托(delegate)类原型(prototype)
如果您跳转到 this question 中的第一个答案你会看到他使用 Employee.prototype = new Person(); 将 Person.prototype 继承到 Employ
java - 您如何从数组列表中提取项目并对它们进行计数，以便在 Java 中根据元素及其总计数(正确地)创建映射？
我需要知道如何正确地遍历元素的 ArrayList 并计算元素在列表中出现的次数，而无需事先知道该元素。我尝试了几种方法并且有一种目前有效，但我觉得它很丑陋且不合适。为了更深入地解释，我有一个 ja
python - 如何(正确地)在 AWS Lambda 函数中使用外部凭证？
我有一个用 Python 编写的(非常基本但工作完美的)AWS lambda 函数，但是它具有嵌入式凭证以连接到:1)外部网络服务2) DynamoDB 表。该函数的作用相当基本:它针对服务发布登录
twisted - 你如何*正确地*从 Tornado 查询 Redis？
我很好奇 Tornado 推荐的查询 Redis(或任何数据库)的方法是什么。我见过一些像 https://gist.github.com/357306 这样的例子但他们似乎都在使用对 redis
gradle - 如何使用 Bintray 用户存储库(正确地)作为 gradle 的依赖项？
这更像是一个“我做得对吗”的问题。快速背景故事:我已经构建了一个 gradle 插件(在一个独立的 gradle/groovy 项目中)。我在另一个 java 项目中使用它。客户项目通过以下方式引用
node.js - 为什么我不能用 sinon 正确地 stub twilio 库？
在我的代码中，我有: function handleMessage() { const twilio = require('twilio')(process.env.TWILIO_ACCOUNT_
linux - 如何使用 oob 正确地 nandwrite 一个 nanddump 的转储？
我正在努力在 Linux 中刷新嵌入式设备的先前 ROM 转储。我以前的转储包含 oob 数据。我是用nandwrite -n -N -o/dev/mtd0 backup.bin写的，然后再做一次RO
go - 如何使用 go 服务(正确地)一个 react-router？
我正在尝试使用 go 为 react-router 提供服务，我已经做到了，但我遇到了麻烦，我认为我做的方式不正确，或者不完整。我正在使用 Mux。我遇到的麻烦是当我按下时在我的应用程序中，它正确
javascript - 如何使用 bluebird 正确地 promise JSON.parse 方法
我正在尝试 promise JSON.parse 方法，但不幸的是没有任何运气。这是我的尝试: Promise.promisify(JSON.parse, JSON)(data).then((resu

首页

博学

6Ren·AI

商城

javascript - 如何正确地将 React 组件存储在单独的文件中并导入 React？