প্রতিক্রিয়া জেএস: "আনকাচড সিনট্যাক্স এরিয়ার: অপ্রত্যাশিত টোকেন <"

Question

আমি রিঅ্যাকটিজেএসে একটি সাইট তৈরি শুরু করার চেষ্টা করছি। যাইহোক, আমি যখন আমার জেএসকে একটি পৃথক ফাইলে রাখার চেষ্টা করেছি, তখন আমি এই ত্রুটিটি পেতে শুরু করেছি: "আনচাক্ট সিনট্যাক্স এরিয়ার: অপ্রত্যাশিত টোকেন <"।

আমি /** @jsx React.DOM */জেএস ফাইলের শীর্ষে যুক্ত করার চেষ্টা করেছি , তবে এটি কিছুই ঠিক করে নি। নীচে এইচটিএমএল এবং জেএস ফাইল রয়েছে। ভুল হতে চলেছে যে কোনও ধারণা?

এইচটিএমএল

<html>
  <head>
    <title>Page</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
    <script src="./lander.js"> </script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
        React.render(
            <Lander />,
            document.getElementById('content')
        );
    </script>
  </body>
</html>

জাতীয়

/**
 * @jsx React.DOM
 */
var Lander = React.createClass({
    render: function () {
        var info = "Lorem ipsum dolor sit amet... ";
        return(
            <div>
                <div className="info">{info}</div>
            </div>
        );
    }
});

সম্পাদনা: আমি বুঝতে পেরেছি যে type="text/jsx"স্ক্রিপ্ট ট্যাগে আমার ল্যান্ডার কোডটি অন্তর্ভুক্ত করা দরকার। তবে এটি যুক্ত করা এবং পুনরায় লোড করার পরে আমি এই সতর্কতাটি পেয়েছি get

"আপনি ইন-ব্রাউজার জেএসএক্স ট্রান্সফর্মার ব্যবহার করছেন production উত্পাদনের জন্য আপনার জেএসএক্সকে পূর্বনির্ধারিত করতে ভুলবেন না - http://facebook.github.io/react/docs/tooling-integration.html#jsx "

এই ত্রুটিটি অনুসরণ করে:

"এক্সএমএলএইচটিপিআরকোয়েস্ট ফাইলটি লোড করতে পারে না: ///User/.../lander.js। ক্রস অরিজিন অনুরোধগুলি কেবল প্রোটোকল স্কিমগুলির জন্য সমর্থিত: http, ডেটা, ক্রোম-এক্সটেনশন, https, ক্রোম-এক্সটেনশন-রিসোর্স" "

মনে হচ্ছে ব্রাউজার জেএসএক্স রূপান্তরকর্মের কাজটি পেতে আমার আরও কিছু করা দরকার, তবে আমি নিশ্চিত না যে এটি কী।

সম্পাদনা: OOOOH এমএএমপি বা কিছু ব্যবহার করে আমার এটি হোস্ট করা দরকার?

Comments

আপনি কীভাবে আপনার "জেএস" ফাইলটি অন্তর্ভুক্ত করছেন?

— কোয়ান্টিন

আপনাকে অতিরিক্তভাবে নিম্নলিখিত স্ক্রিপ্ট কোড যুক্ত করতে হবে। <স্ক্রিপ্ট src = " unpkg.com/@babel/standalone/babel.min.js " > </script >

— স্টিভেন

2019 আপডেট : type="text/babel"যেখানে আমি আমার জেএস ফাইল এবং বাবেল স্ক্রিপ্ট আমদানি করছি সেখানে স্ক্রিপ্ট ট্যাগে যুক্ত করা যা উপরের মন্তব্যে @ স্টিভেন আমার জন্য কাজ করেছে।

— সিকনাপস

Answer 1

আপডেট - পরিবর্তে এটি ব্যবহার করুন:

<script type="text/babel" src="./lander.js"></script>

---

যোগ type="text/jsx"এর একটি অ্যাট্রিবিউট হিসাবে scriptজাভাস্ক্রিপ্ট যে ফাইলটি JSX ট্রান্সফরমার দ্বারা রুপান্তরিত করা আবশ্যক, যে ভালো অন্তর্ভুক্ত করা ব্যবহৃত ট্যাগ:

<script type="text/jsx" src="./lander.js"></script>

তারপর আপনি যেমন আলোচনা করা হয়েছে, স্থানীয় হোস্ট তাই যোগের কাজ যে সব পৃষ্ঠার হোস্ট করার জন্য MAMP অথবা অন্য কোনো পরিষেবা ব্যবহার করতে পারে এখানে ।

সবাইকে সাহায্য করার জন্য ধন্যবাদ!

Comments

python -m SimpleHTTPServer 8080সাধারণত ব্যবহৃত হয় কারণ আপনাকে অ্যাপাচের মতো অবিরাম সার্ভারটি ইনস্টল করতে, চালাতে এবং কনফিগার করতে হবে না।

— ব্রিগেন্ড

পুরোপুরি কাজ করে, আমি কেবল text/jsxবৈশিষ্ট্যটির মানটি যুক্ত করেছি

— উইলিয়াম

Answer 2

জেএসটি ট্রান্সফর্মটি অবচিত করা হয়েছে , দয়া করে পরিবর্তে ব্যাবেল ব্যবহার করুন।

<script type="text/babel" src="./lander.js"></script>

Answer 3

যোগ type="text/babel"স্ক্রিপ্ট ট্যাগ, এই মত একটি বৈশিষ্ট্য হিসাবে:

<script type="text/babel" src="./lander.js"></script>

Answer 4

যোগ type="text/babel"স্ক্রিপ্ট যে .jsx ফাইল অন্তর্ভুক্ত করতে এবং এই যোগ করার জন্য: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

Comments

সংস্করণ 6 এর জন্য: এখানে<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> উল্লিখিত হিসাবে

— ব্যবহারকারী 3405291

Answer 5

যদি আপনার মত কিছু আছে

Uncaught SyntaxError: embedded: Unexpected token

আপনি সম্ভবত কোনও জায়গায় কমাটি মিস করেছেন:

  var CommentForm = React.createClass({
  getInitialState: function() {
      return {author: '', text: ''};

  }, // <---- DON'T FORGET THE COMMA

  render: function() {
      return (
      <form className="commentForm">
          <input type="text" placeholder="Nombre" />
          <input type="text" placeholder="Qué opina" />
          <input type="submit" value="Publicar" />
      </form>
      )
  }
  });

Comments

তাত্ক্ষণিক সমাধান।)

— জুলটান

Answer 6

আপনার কোডটি সঠিক। জেএসএক্স কোডটি জেএসে সংকলন করা দরকার:

http://facebook.github.io/react/jsx-compiler.html

Comments

চেষ্টা করে দেখুন, এখন আমি কেবল "আনকাচড সিনট্যাক্স এরর: অপ্রত্যাশিত টোকেন ইলিজেল" পেয়ে যাচ্ছি

— ক্যাট

আপনি ক্রোম ব্যবহার করছেন? এটি কি আপনাকে একটি নির্দিষ্ট নম্বর এবং একটি নির্দিষ্ট লাইন নম্বর দেয়?

— stewart715

আমার খারাপ, লাইন ব্রেকগুলি এড়িয়ে চলা ছাড়া করতে পারে না যাতে আপনার সাথে তাদের একত্রিত হওয়া দরকার +... আপডেট করা উচিত এখনি work

— stewart715

এখন আমি এটি পেয়ে যাচ্ছি: "আনকাচড ত্রুটি: ইনভারেন্টেন্ট লঙ্ঘন: রিঅ্যাক্টকম্পোজাইট কম্পোনেন্ট.রেন্ডার (): একটি বৈধ রিঅ্যাক্ট কম্পোনেন্ট অবশ্যই ফিরতে হবে You আপনি অপরিজ্ঞাত, কোনও অ্যারে বা অন্য কোনও অবৈধ অবজেক্ট ফিরে আসতে পারেন।" মনে হয় একটি স্ট্রিং মত নয় একটি বৈধ উপাদান প্রতিক্রিয়া

— Kat

আহ আমি জানি এখানে কী চলছে ... আপনার জাএসএক্স রিএ্যাক্ট কোডটি জাভাস্ক্রিপ্টে সংকলন করা দরকার ... আপনি এটি করছেন বা সরাসরি ব্রাউজারে চলছে?

— stewart715

Answer 7

আপনি যদি এরকম কোনও ত্রুটি পেয়ে থাকেন:

সিনট্যাক্স এরর: এম্বেড করা: অপ্রত্যাশিত টোকেন (107: 9) 105

এটি হতে পারে আপনি একটি কোঁকড়ানো বন্ধনী অনুপস্থিত

Answer 8

ওয়েবপ্যাক যুক্ত করার চেষ্টা করুন, এটি আমার প্রকল্পে একই সমস্যাটি সমাধান করেছে। বিশেষত "প্রিসেট" অংশ।

module: {
    loaders: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel',
            query  :{
                presets:['react','es2015']
            }
        },

Answer 9

আপনার সাথে আমারও একই সমস্যা আছে এবং আমার সার্ভারে আমার কিছু পরিবর্তন হয়েছে

আপনি এটি চেষ্টা করতে পারেন

const root = require("path").join(__dirname, "./build");
app.use(express.static(root));
app.get("*", (req, res) => {
  res.sendFile("index.html", { root });
});

Comments

মূল প্রশ্নটি এক্সপ্রেস.জেএস ব্যবহার করে নি; আপনি ব্যাখ্যা করতে পারেন যে এটি কীভাবে সমস্যার সমাধান করে?

— জোনাথন রোজা