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

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

如果您只是在学习反应，那么使用script标签的方法就可以在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>

如果要开发可以部署到生产环境的应用程序，则需要执行以下步骤。毫无疑问，可以通过Internet获得更好的教程，但是它将为您提供一些想法。

1.需要Browserfiy或Webpack：

在浏览器中不能

require

或

import

模块，你通常会做而写Node.js的代码。借助 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.js src-> routes.js

index.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'));

routes.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 ></div>  </body>  <script src="./public/bundle.js"></script></html>

6，跑步

形成您的项目根类型

webpack-dev-server --progress --colors

进口并要求

import

并且

require

在功能上非常相似。唯一的区别是，

import

与es5一起

require

使用时，es6 可以使用新的语法糖。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/5475360.html

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

发表评论

评论列表（0条）