Question

我正在尝试在Ubuntu上使用React.js进行Web开发项目，但我无法弄清楚如何设置它。请注意我是初学者，之前只使用过JQuery和JQuery。我试图按照here的说明进行操作，我想我已经达到了应该配置Babel的程度。在这里，我跑了

npm install --save-dev babel-cli babel-preset-react babel-preset-es2015

echo '{ "presets": ["react", "es2015"] }' > .babelrc

echo 'console.log([1, 2, 3].map(n => n + 1))' > index.js

./node_modules/.bin/babel index.js

我得到的输出是：

"use strict";

console.log([1, 2, 3].map(function (n) {
  return n + 1;
}));

这很棒，但我希望能够像往常一样运行带有相应.js文件的html文件。事实上，当我写出像

这样的东西时

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

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

使用相应的html文件，我只是得到控制台错误（意外的令牌插入或其他东西）。显然，我没有设法安装Ecmascript / JSX或其他什么，我真的不知道我在做什么。

所以，我想我的问题是，任何人都可以帮我详细解释如何开始吗？我只想用React编写Javascript，并创建一个简单的网页。谢谢！

Answer 1

从React开始，你不需要很多东西。

您需要使用的所有反应包括react和reactdom。 多数民众赞成的。

ReactDOM.render(
  React.createElement('h1', {}, "Hi! This is the simplest way to get started with ReactJS"),
  document.getElementById('only-react')
);

<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>

<div id="only-react"></div>

这些行应该让你开始只使用React而不需要在大多数教程中找到的所有英国媒体报道软件。

Answer 2

安装React 要使用npm安装React，请运行：

npm init
npm install --save react react-dom

创建单页应用程序

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Answer 3

创建反应的-应用

IMO，为初学者启动React项目的最佳方法是使用create-react-app。它是一个零配置包，可让您快速启动React开发。它包含反应开发所需的必要包。

npm install -g create-react-app
create-react-app react-app
cd react-app
npm start

使用webpack和Babel反应环境

如果您不想要并且想要设置自己的React项目，则可以使用babel和webpack配置一个项目。我建议你看看这个来学习。这是tutorial。

对于初学者，我建议采用第一种方法。

Answer 4

您的错误来自此处：

echo '{ "presets": ["react", "es2015"] }' > .babelrc

babel从右到左应用预设：它应首先转换jsx然后转换为es2015代码。

解决方案是通过切换presets数组中的顺序来修改.babelrc文件，如下所示：

{ "presets": ["es2015", "react"] }

否则create-react-app是没有任何配置的最佳解决方案。

Answer 5

您必须全局安装babel-cli，这样您才能从任何地方访问babel命令。看起来您已经安装了babel-preset-react和babel-preset-env。

创建一个公用文件夹和src文件夹。在公用文件夹中添加index.html和index.js。

index.html

<body>
    <div id="here"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="./index.js"></script>

index.js应该为空。重点是创建一个我们要更改的文件，然后将有另一个文件，由babel生成或编译，即index.js。 index.js将是一个自动生成的文件。

在src文件夹中，我们将使用react.jsx。在src文件夹中创建app.js。为了演示，请输入以下简单代码：

src / app.js

const template = <p>this is jsx</p>;
const appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);

现在在终端中运行此命令：

babel src/app.js --out-file=public/index.js --presets=env,react --watch

现在检查public / index.js。你应该有这个：

"use strict";

var template = React.createElement(
  "p",
  null,
  "this is jsx"
);
var appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);

设置React.js和Babel

5 个答案: