设置 React.js 和 Babel [英] Setup React.js and Babel

问题描述

我正在尝试在 Ubuntu 上将 React.js 用于 Web 开发项目，但我不知道如何设置它.请注意，我是初学者，之前只在 JQuery 中使用过 Javascript.我尝试按照此处的说明进行操作，我想我已经做到了我应该配置 Babel 的地方.在这里，我在终端中运行

I'm trying to use React.js on Ubuntu for a web dev project, but I can't figure out how to set it up. Please note that I am a beginner, and have only used Javascript with JQuery before. I tried to follow the instructions here, and I think I made it up to the point where I'm supposed to configure Babel. Here, in the terminal I ran

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 文件.事实上，当我写一些像

This is great and all, but I want to be able to run an html file with a corresponding .js file, as I would normally. As it is, when I write something like

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

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

使用相应的 html 文件，我只会收到控制台错误(意外的令牌插入或其他内容).显然，我还没有设法安装 Ecmascript/JSX 或其他任何东西，我真的不知道我在做什么.

with a corresponding html file, I just get console errors (Unexpected Token insert or something). Obviously, I haven't managed to install Ecmascript/JSX or whatever, and I don't really know what I'm doing.

所以，我想我的问题是，谁能帮我详细解释一下如何开始?我只想能够用 React 编写 Javascript，并创建一个简单的网页.谢谢！

So, I guess my question is, can anyone help me with a detailed explanation of how to get started? I just want to be able to write Javascript with React, and create a simple webpage. Thank you!

推荐答案

开始使用 React 不需要很多东西.

You dont need lots of stuff to start with React.

你需要使用 react 的只是包括 react 和 reactdom.就是这样.

All you need to use react is include react and reactdom. Thats' it.

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

These lines should get you started with just React without all the bloatware you will find in most of the tutorials.

这篇关于设置 React.js 和 Babel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！