Javascript React Js环境设置_Javascript_Node.js_Reactjs

Javascript React Js环境设置

javascript node.js reactjs

Javascript React Js环境设置,javascript,node.js,reactjs,Javascript,Node.js,Reactjs,我是react js新手，我正在尝试为它设置环境，我遵循了中提到的步骤但是在做了上面提到的所有事情之后，我得到了一个错误： “webpack dev server”未被识别为内部或外部命令、可操作程序或批处理文件运行：然后再试一次。出现错误是因为在package.json文件内的devdependences中找不到webpack dev server，这是因为您没有将webpack dev server安装为全局包，所以可以直接执行建议在本地安装，这样可以避免此问题您可以找到使其运行的

我是react js新手，我正在尝试为它设置环境，我遵循了中提到的步骤

但是在做了上面提到的所有事情之后，我得到了一个错误：

“webpack dev server”未被识别为内部或外部命令、可操作程序或批处理文件

运行：

然后再试一次。出现错误是因为在package.json文件内的devdependences中找不到webpack dev server，这是因为您没有将

webpack dev server安装为全局包，所以可以直接执行
建议在本地安装，这样可以避免此问题
您可以找到使其运行的步骤
祝你好运
如果你想使用babel、webpack等开发应用程序，你需要遵循以下步骤。毫无疑问，在互联网上有更好的教程，但它会给你一些想法
1.网页包：
在浏览器中，您不能像编写node.js代码时通常那样要求
或导入
模块。借助模块绑定器（可能是网页包），您可以编写使用require/import
的代码，就像在节点环境中使用它一样。考虑到它的受欢迎程度，我假设你会使用webpack

2。安装依赖项（es6）
这些是项目（package.json
）运行所需的最小依赖项。您可以直接将以下文本复制粘贴到名为“package.json”的新文件中。在空项目目录中运行以下命令集：
安装节点包管理器
npm init
[按照命令提示填写项目的元数据，如姓名、作者等]

安装全局软件包
npm安装-g babel babel cli
[这将把transpiler（babel）安装到您的全球环境中]

安装模块绑定器
npm安装网页包webpack dev server——保存


安装巴贝尔插件
npm安装巴贝尔核心巴贝尔装载机巴贝尔预设反应巴贝尔预设-es2015


设置此命令后，package.json将开始如下所示：
  {
  "name": "reactjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "No Command Written Yet"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

3.编写您的webpack-config.js文件
示例webpack
config文件应该是这样的。不要问我每一点，而是看看webpack教程，因为我不能在这里解释所有内容。记住这个事实
Webpack
是一个模块绑定器，它为浏览器绑定javascript
和其他资产
    var config = {
   entry: './main.js',

   output: {
      path:'/',
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports=config
4.为应用程序设置入口点
src->index.js
index.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <App />
  , document.querySelector('.init')
);

与
[这将更改您将运行的脚本，以执行webpack捆绑的应用程序]
现在，无论何时您想要运行项目，只要进入项目根目录并调用：
npm运行开发人员

好了，玩得开心 可能重复我洗耳恭听，告诉我你能给我一些参考/链接来安装安装程序吗。我想从头开始。
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <App />
  , document.querySelector('.init')
);

<!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>

"scripts": {
    "test": "No Command Written Yet"
  },

"scripts": {
        "dev": "webpack-dev-server --hot"
      },