设置React.js和Babel

时间:2017-03-28 04:20:22

标签: javascript reactjs

我正在尝试在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,并创建一个简单的网页。谢谢!

5 个答案:

答案 0 :(得分:1)

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

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

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而不需要在大多数教程中找到的所有英国媒体报道软件。

答案 1 :(得分:0)

安装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

答案 2 :(得分:0)

创建反应的-应用

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项目,则可以使用babelwebpack配置一个项目。我建议你看看这个来学习。这是tutorial

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

答案 3 :(得分:0)

您的错误来自此处:

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

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

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

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

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

答案 4 :(得分:0)

您必须全局安装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);