আমি কেবল রিএ্যাকটিজস দিয়ে শুরু করছি এবং
liট্যাগ প্রদর্শন করার জন্য একটি সাধারণ উপাদান লিখছিলাম
এবং এই ত্রুটিটি দেখতে পেয়েছিলাম:
অপ্রত্যাশিত টোকেন '<'
আমি উদাহরণটি নীচে jsbin এ রেখেছি http://jsbin.com/UWOquRA/1/edit?html,js, কনসোল, আউটপুট
আমি কী ভুল করছি তা দয়া করে আমাকে জানান।
উত্তর:
আমি এটি টাইপ = "টেক্সট / ব্যাবেল" ব্যবহার করে সমাধান করেছি
<script src="js/reactjs/main.js" type = "text/babel"></script>
আপডেট: 0.12+ প্রতিক্রিয়াতে, জেএসএক্স প্রগমা আর প্রয়োজন নেই।
আপনার ফাইলগুলির শীর্ষে জেএসএক্স প্রাগমা অন্তর্ভুক্ত করা নিশ্চিত করুন:
/** @jsx React.DOM */
এই লাইনটি ছাড়া, jsxবাইনারি এবং ইন-ব্রাউজার ট্রান্সফর্মারটি আপনার ফাইলগুলি অপরিবর্তিত রেখে দেবে।
type="text/babel"। জাভাস্ক্রিপ্টের সাহসী নতুন জগৎ
অপ্রত্যাশিত টোকেন '<' সমস্যাটি হ'ল বাবেলের প্রसेटটি অনুপস্থিত।
সমাধান: আপনাকে নিজের ওয়েবপ্যাক কনফিগারেশনটি নিম্নরূপে কনফিগার করতে হবে
{
test : /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader : 'babel',
query : {
presets:[ 'react', 'es2015' ]
}
}
এখানে .jsx উভয় .js এবং .jsx ফর্ম্যাটগুলি পরীক্ষা করে।
নীচে নোড ব্যবহার করে আপনি কেবল বাবেল নির্ভরতা ইনস্টল করতে পারেন
npm install babel-preset-react
ধন্যবাদ
npm install babel-preset-reactআমার সমস্যা সমাধান
.babelrcপ্রকল্পটিতে ফাইল থাকে এবং "presets": ["env", "react", "es2015"]এটিই হয় !!
জাভাস্ক্রিপ্টে আপনাকে জেএসএক্স কোডটি ট্রান্সপাইল / সংকলন করতে হবে বা ইন-ব্রাউজার ট্রান্সফর্ম্টার ব্যবহার করতে হবে
এ http://facebook.github.io/react/docs/getting-started.html এবং নোট নিতে <script>ট্যাগ, আপনি JSX জন্য ব্রাউজারে কাজ অন্তর্ভুক্ত সেই প্রয়োজন।
<script type="text/jsx">ট্যাগ, আপনি কি দয়া করে পেস্ট করুন একটি hastebin.org মধ্যে আপনার পুরো কোড পেস্ট করুন চান তাহলে
আমার এই ত্রুটি রয়েছে এবং এটি দুটি দিন সমাধান করতে পারিনি। সুতরাং ত্রুটির সমাধান খুব সহজ the দেহে, যেখানে আপনি নিজের সাথে সংযুক্ত হন script, যুক্ত করুন type="text/jsx"এবং এটি সমস্যার সমাধান করবে।
আপনার জসবিনের একটি কার্যকারী উদাহরণ এখানে:
এইচটিএমএল:
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="main-content"></div>
</body>
</html>
জেএসএক্স:
<script type="text/jsx">
/** @jsx React.DOM */
var LikeOrNot = React.createClass({
render: function () {
return (
<p>Like</p>
);
}
});
React.renderComponent(<LikeOrNot />, document.getElementById('main-content'));
</script>
একটি কোড থেকে এই কোডটি চালান এবং এটিতে আপনার কাজ করা উচিত।
আপনি যদি আমার মতো হন এবং নির্বোধের ভুলের প্রবণ হন তবে আপনার প্যাকেজটিও পরীক্ষা করুন son
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
সঠিক ট্যাগ পার্সিংয়ের জন্য আপনাকে এই বাবেল সংস্করণটি ব্যবহার করতে হবে: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js এবং "" টাইপ = 'পাঠ্য / বাবেল' " স্ক্রিপ্টে। এছাড়াও, আপনার কাস্টম স্ক্রিপ্টটি "বডি" ট্যাগের মধ্যে থাকা উচিত।
আপনার মাথার মধ্যে ReactJS চালানোর প্রয়োজনের চেয়ে আমরা যদি আপনার আসল সাইট কনফিগারেশন বিবেচনা করি
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
এবং আপনার জেএস ফাইলটিতে অ্যাট্রিবিউট যুক্ত করুন - টাইপ করুন = "পাঠ্য / বাবেল" পছন্দ
<script src="../js/r1HeadBabel.js" type="text/babel"></script>
তাহলে নীচের কোড উদাহরণটি কাজ করবে:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
নিম্নলিখিত কোড ব্যবহার করুন। আমি প্রতিক্রিয়া এবং প্রতিক্রিয়া ডিওএম-তে রেফারেন্স যুক্ত করেছি। আপনার জেএস কোডটি ভ্যানিলা জাভাস্ক্রিপ্টে রূপান্তর করতে ES6 / ব্যাবেল ব্যবহার করুন। নোট করুন যে রেন্ডার পদ্ধতিটি রিঅ্যাক্টডোম থেকে আসে এবং এটি নিশ্চিত করে যে রেন্ডার পদ্ধতির ডিওমে নির্দিষ্ট লক্ষ্য রয়েছে। কখনও কখনও আপনি একটি সমস্যার মুখোমুখি হতে পারেন যা রেন্ডার () পদ্ধতিটি লক্ষ্য উপাদানটি খুঁজে পায় না। এটি ঘটে কারণ DOM রেন্ডারগুলির পূর্বে প্রতিক্রিয়া কোডটি কার্যকর করা হয়। প্রতিক্রিয়া রেন্ডার () পদ্ধতিতে কল করতে এই jQuery প্রস্তুত () ব্যবহারের জন্য কাউন্টার করুন। এইভাবে আপনি ডিওএম প্রথমে রেন্ডার হওয়ার বিষয়ে নিশ্চিত হন। আপনি আপনার অ্যাপ্লিকেশন স্ক্রিপ্টে স্থগিত বৈশিষ্ট্যও ব্যবহার করতে পারেন।
এইচটিএমএল কোড:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id='main-content'></div>
<script src="CDN link to/react-15.1.0.js"></script>
<script src="CDN link to/react-dom-15.1.0.js"></script>
</body>
</html>
জেএস কোড:
var LikeOrNot = React.createClass({
render: function () {
return (
<li>Like</li>
);
}
});
ReactDOM.render(<LikeOrNot />,
document.getElementById('main-content'));
আশা করি এটি আপনার সমস্যা সমাধান করে। :-)
সাবলেট ফোল্ডারের অভ্যন্তরে .babelrc আপনার অ্যাপ্লিকেশন রুট ফোল্ডারের ভিতরে রয়েছে কিনা তা পরীক্ষা করুন। যদি কেসটি ফাইলটিকে রুটে নিয়ে যায়।
আপনি এই জাতীয় কোড ব্যবহার করতে পারেন:
import React from 'react';
import ReactDOM from 'react-dom';
var LikeOrNot = React.createClass({
displayName: 'Like',
render: function () {
return (
React.createElement("li", null, "Like")
);
}
});
ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));
এবং Add ভুলবেন না <div id='main-content'></div>মধ্যে bodyআপনারhtml
তবে আপনার প্যাকেজ.জসন ফাইলে আপনার এই নির্ভরতাগুলি ব্যবহার করা উচিত:
"dependencies": {
...
"babel-core": "^6.18.2",
"babel-preset-react": "^6.16.0",
...
}
"devDependencies": {
...
"babel": "^6.5.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"jsx-loader": "^0.13.2",
...
}
এটি আমার পক্ষে কাজ তবে আমি এই বিকল্পগুলি (ওয়েবপ্যাক.কনফিগ.জেএস এ) সহ ওয়েবপ্যাকটিও ব্যবহার করেছি:
module: {
loaders: [
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['es2015', 'react']
}
}
]
}
আমি Reactআজই শিখতে শুরু করেছি এবং একই সমস্যার মুখোমুখি হয়েছি । নীচে আমার লেখা কোডটি রয়েছে।
<script type="text/babel">
class Hello extends React.Component {
render(){
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}
ReactDOM.render(
<Hello/>
document.getElementById('react-container')
)
</script>
এবং আপনি দেখতে পাচ্ছেন যে আমি ব্যবহারের পরে একটি কমা (,) মিস করেছি <Hello/>। এবং ত্রুটি নিজেই বলছে যে আমাদের কোন লাইনে সন্ধান করা উচিত।
সুতরাং একবার আমি ReactDOM.render()ফাংশনটির জন্য দ্বিতীয় প্যারামিটারের আগে একটি কমা যুক্ত করেছি , সমস্ত ভাল কাজ শুরু করে।
এখানে আপনি এইচটিএমএল করতে পারেন way
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>
সূচী.এসএস ফাইলটি এসআরসি / ইনডেক্স.জেজেড ফাইল সহ
import React from "react";
import { render } from "react-dom";
import "./styles.scss";
const App = () => (
<div>
<h1>Hello test</h1>
</div>
);
render(<App />, document.getElementById("app"));
এই প্যাকেজটি ব্যবহার করুন.জসন আপনাকে দ্রুত আপ করবে এবং দ্রুত চলবে
{
"name": "test-app",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"dependencies": {
"react": "16.2.0",
"react-dom": "16.2.0",
"react-native": "0.57.5"
},
"devDependencies": {
"@types/react-native": "0.57.13",
"parcel-bundler": "^1.6.1"
},
"keywords": []
}
যদিও, আমার .babelrc কনফিগারেশন ফাইলটিতে আমার সমস্ত সঠিক ব্যাবেল লোডার ছিল। পার্সেল-বান্ডলার সহ এই বিল্ড স্ক্রিপ্টটি ম্যানুয়াল পৃষ্ঠা রিফ্রেশে ব্রাউজার কনসোলে অপ্রত্যাশিত টোকেন ত্রুটি <এবং মাইম ধরণের ত্রুটি তৈরি করছিল।
"scripts": {
"build": "parcel build ui/index.html --public-url ./",
"dev": "parcel watch ui/index.html"
}
বিল্ড স্ক্রিপ্ট আপডেট করা আমার জন্য সমস্যাগুলি স্থির করে।
"scripts": {
"build": "parcel build ui/index.html",
"ui": "parcel watch ui/index.html"
}