安裝React.js和Babel

我想在Ubuntu上使用React.js進行web開發項目，但我無法弄清楚如何設置它。請注意，我是一名初學者，並且以前只使用JavaScript和JQuery。我試圖按照說明here，我想我已經達到了我應該配置Babel的地步。這裏，在終端我跑安裝React.js和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，並創建一個簡單的網頁。謝謝！

來源

2017-03-28 AWhite

如果你想要一個完整的反應設置與npm，你需要像** webpack **來建立你的代碼（和可選地注入到一個HTML文件）。但是既然你說你自己是初學者，下面@ hunzaboy的答案可能是最快上手的方法。 – stinodes

安裝陣營要安裝與npm反應，運行：

npm init 
npm install --save react react-dom

創建一個單頁應用

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

來源

2017-03-28 04:26:55

你不需要很多的東西下手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>

這些線應該讓你開始與剛反應過來沒有你在大多數的教程找到英國媒體報道。

來源

2017-03-28 04:30:28 Aslam

感謝您的快速回復！所以我複製粘貼你的代碼，並在前兩個代碼後添加了一行代碼，然後在scripts.js中放入了javascript。當我嘗試運行它時，出現Uncaught錯誤：不變衝突：_registerComponent（...）：目標容器不是DOM元素。有任何想法嗎？雖然它似乎到達那裏！ - 沒關係，我想通了。謝謝！ – AWhite

創建反應的應用程序內

IMO，對於初學者是使用create-react-app啓動React項目的最佳途徑。這是一個零配置軟件包，可以讓您快速啓動您的React開發。它包含反應開發所需的必要軟件包。

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

陣營環境中使用的WebPack和巴貝爾

如果您不希望，並希望建立自己陣營的項目，你可以配置一個與babel和webpack。我建議你檢查一下以瞭解。這是tutorial。

對於初學者，我會推薦第一種方法。來

來源

2017-03-28 04:46:59 DroidNoob

你的錯誤在這裏：

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

巴貝爾從右到左應用預設：它應該transpile JSX第一則ES2015代碼。

的解決方案是由預置陣列這樣在切換順序修改.babelrc文件：

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

否則創建反應的應用程式是開始沒有任何配置的最佳解決方案。

來源

2017-03-28 10:56:00

安裝React.js和Babel

回答

相關問題