Yêu cầu mô-đun reactjs không có Browserify, Webpack hoặc Babel

Question

Tôi đang cố gắng thiết lập ứng dụng HTML TypeScript trong studio trực quan. Tôi muốn sử dụng reactjs v0.14.7

Tôi muốn tránh sử dụng các công cụ như Browserify.

Tuy nhiên, cách sử dụng mô-đun react-dom sau đó?

Hãy quên đi bản in một lúc. Tôi cần phải có ES5 tinh khiết và chạy đầu tiên.

hiện nay, tôi có điều này:

<script src="Scripts/react/react.js"></script> 
<script src="Scripts/react/react-dom.js"></script> 
<script> 
    var Button = React.createClass({ 
     render: function() { 
      return (React.createElement("div", { className: "btn btn-default" }, 'hello world')); 
     } 
    }); 
    ReactDOM.render(React.createElement('Button'), document.getElementById('container')); 
</script> 

Tuy nhiên, trình duyệt phàn nàn, đối tượng ReactDOM không tồn tại.

Tôi đã thử:

<script src="Scripts/require.js"></script> 
<script src="Scripts/react/react.js"></script> 
<script src="Scripts/react/react-dom.js"></script> 
<script> 
    var React = require('react'); 
    var ReactDOM = require('react-dom'); 
    .... 
</script> 

tuy nhiên, nó không làm việc với require.js: Tên Module "phản ứng" đã không được nạp nào cho bối cảnh: _. Sử dụng yêu cầu ([])

Ai đó có thể mang thêm chút ánh sáng vào điều này không? Cách sử dụng phản ứng không có bất kỳ công cụ phía máy chủ nào như gói, chuyển đổi, v.v.

Câu trả lời như "sử dụng npm" sẽ không được chấp nhận làm câu trả lời.

Answer 1

RequireJS và require là những điều rất khác nhau - hơn thế nữa.

Nếu bạn muốn sử dụng React mà không cần một công cụ như Browserify hoặc Webpack, thì bạn không nhất thiết cần một bộ nạp mô-đun. Các phiên bản được lưu trữ của React và ReactDOM sẽ hiển thị các biến toàn cầu mà bạn có thể sử dụng ra khỏi hộp.

<script src="https://fb.me/react-0.14.7.js"></script> 
<script src="https://fb.me/react-dom-0.14.7.js"></script> 
<script> 
console.log(React, ReactDOM); 
</script> 

Chỉ cần tải xuống những tệp này nếu bạn muốn làm việc với chúng cục bộ.

SystemJS

Tất cả điều đó ra đường, có vẻ như SystemJS và JSPM có thể là chính xác những gì bạn đang tìm kiếm.

Sử dụng lần đầu jspm để cài đặt gói của bạn.

jspm install systemjs react react-dom 

Sau đó liên kết và định cấu hình SystemJS.

<script src='jspm_packages/system.js'></script> 
<script> 
    System.import('app.js'); 
</script> 

Bây giờ bên trong app.js bạn có thể viết mã kiểu CommonJS.

var React = require('react'); 
var ReactDOM = require('react-dom'); 

SystemJS sẽ xử lý việc tải phần còn lại của tập lệnh. Nếu bạn muốn tạo dựng sản phẩm, thì nó đơn giản như chạy jspm bundle app.

CommonJS

Các cuộc gọi đến require mà bạn nhìn thấy trong Phản ứng hướng dẫn và ví dụ khác là dành cho một định dạng module gọi CommonJS.

Bạn sử dụng require('react') để tham chiếu đến giá trị được xuất bởi mô-đun React (được cài đặt vào node_modules với npm). Điều này có nghĩa là bạn cần một bước xây dựng trước trình duyệt như Browserify hoặc Webpack, có thể đóng ghim tất cả các mô-đun bạn cần cùng nhau và xuất ra một tệp tập lệnh lớn.

RequireJS

Confusingly, CommonJS và RequireJS sử dụng hàm có cùng tên để chỉ định phụ thuộc. Bạn đang cố gắng sử dụng hàm RequireJS require như thể bạn đang làm việc với các mô-đun CommonJS.

Nếu bạn muốn nhập Phản ứng với RequireJS thay vào đó, sau đó bạn cần một cái gì đó như thế này:

<script src="js/require.js"></script> 
<script> 
    require.config({ 
    'baseUrl' : 'Scripts/', 
    }); 
    require(["react-0.14.7", "react-dom-0.14.7"], 
    function(React, ReactDOM) { 
    console.log(React, ReactDOM); 
    }); 
</script> 

Khi mã của bạn thực hiện, RequireJS sẽ đi ra và thêm thẻ kịch bản cho các module bạn đã chỉ định. Sau đó, khi các tập lệnh này đã được tải, nó sẽ chuyển các giá trị mà chúng xuất vào hàm gọi lại để bạn sử dụng.

Answer 2

Hãy xem tại dự án này

https://github.com/ORESoftware/hr4r2

nó đang làm những gì bạn muốn làm - nó đang sử dụng RequireJS + + Phản ứng nguyên cảo. Và nó đang thực hiện việc hiển thị trên máy chủ và là một SPA.

Dự án này hiện không sử dụng Webpack hoặc Babel.

Answer 3

Đây là một ví dụ của Dan Abramov, người sáng tạo cho REACT, trong đó ông tạo ra một ứng dụng phản ứng mà không cần sử dụng webpack, babel hoặc browserify.

http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010 

Trong tập tin HTML của bạn trong thẻ cơ thể bạn ghi

<div id="root"> 
    <!-- This div's content will be managed by React. --> 
</div> 

Và Trong loại thẻ script của bạn này

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

PS Chắc chắn bạn bao gồm những 2 Libraries Tại Lên trên

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js 
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js 

Hy vọng điều đó sẽ hữu ích.