Reactjs: Beklenmeyen simge '<' Hatası

Question 1

Reactjs ile yeni başlıyorum ve
lietiketi görüntülemek için basit bir bileşen yazıyordum ve bu hatayla karşılaştım:

Beklenmeyen simge '<'

Örneği jsbin'de http://jsbin.com/UWOquRA/1/edit?html,js,console,output altına koydum

Lütfen neyi yanlış yaptığımı bana bildirin.

Question 2

Type = "text / babel" kullanarak çözdüm

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

Question 3

GÜNCELLEME: React 0.12+ sürümünde JSX pragma artık gerekli değildir.

JSX pragma'yı dosyalarınızın en üstüne eklediğinizden emin olun:

/** @jsx React.DOM */

Bu satır olmadan, jsxikili ve tarayıcı içi dönüştürücü dosyalarınızı değiştirmeden bırakacaktır.

Question 4

Beklenmeyen simgesi '<' sorunu babel ön ayarının eksik olmasından kaynaklanıyor.

Çözüm: Web paketi yapılandırmanızı aşağıdaki gibi yapılandırmanız gerekir

{
  test   : /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,
  loader : 'babel',
  query  : {
    presets:[ 'react', 'es2015' ]
  }
}

burada .jsx hem .js hem de .jsx biçimlerini kontrol eder.

babel bağımlılığını aşağıdaki gibi düğümü kullanarak kolayca kurabilirsiniz

npm install babel-preset-react

teşekkür ederim

Question 5

benim durumumda type özniteliğini komut dosyası etiketime ekleyemedim.

<script type="text/jsx">

Question 6

Bu JSX kodunu javascript'e aktarmanız / derlemeniz veya tarayıcı içi dönüştürücüyü kullanmanız gerekir

Bak http://facebook.github.io/react/docs/getting-started.html ve dikkat <script>etiketleri, sen JSX için tarayıcıda çalışmalarına dahil olanlar gerekir.

Question 7

Bu hatayı yaşıyorum ve bunu iki gün çözemedim, bu yüzden hatanın düzeltilmesi çok basit. Vücudunuzu bağladığınız yere scriptekleyin type="text/jsx"ve bu sorunu çözecektir.

Question 8

İşte jsbin'inizden çalışan bir örnek:

HTML:

<!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>

jsx:

<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>

Bu kodu tek bir dosyadan çalıştırın ve çalışmanız gerekir.

Question 9

Benim gibiyseniz ve aptalca hatalara yatkınsanız, ayrıca babel ön ayarınızı içeriyorsa package.json dosyanızı da kontrol edin:

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },

Question 10

Doğru etiket ayrıştırması için şu babel sürümünü kullanmanız gerekir: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js ve "type = 'text / babel'" niteliği senaryoda. Ayrıca, özel komut dosyanız "body" etiketlerinin içinde olmalıdır.

Question 11

Gerçek site yapılandırmanızı düşünürsek, ReactJS'yi kafanızda çalıştırmanız gerekenden

<!-- Babel ECMAScript 6 injunction -->  
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

ve js dosyanıza - type = "text / babel" gibi bir özellik ekleyin

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

aşağıdaki kod örneği çalışacaktır:

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

Question 12

Aşağıdaki kodu kullanın. React ve React DOM'a referans ekledim. JS kodunuzu vanilya JavaScript'e dönüştürmek için ES6 / Babel kullanın. Render yönteminin ReactDOM'dan geldiğini unutmayın ve işleme yönteminin DOM'da belirtilen bir hedefe sahip olduğundan emin olun. Bazen render () yönteminin hedef öğeyi bulamamasıyla ilgili bir sorunla karşılaşabilirsiniz. Bunun nedeni, reaksiyon kodunun DOM oluşturulmadan önce yürütülmesidir. Buna karşı koymak için React'in render () yöntemini çağırmak için jQuery ready () kullanın. Bu şekilde, önce DOM'un oluşturulacağından emin olursunuz. Ayrıca, uygulama komut dosyanızda erteleme özelliğini de kullanabilirsiniz.

HTML Kodu:

<!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>

JS kodu:

var LikeOrNot = React.createClass({
    render: function () {
      return (
        <li>Like</li>
      );
    }
});

ReactDOM.render(<LikeOrNot />,
                document.getElementById('main-content'));

Umarım bu sorununuzu çözer. :-)

Question 13

.Babelrc'nin bir alt klasörün içinde değil, uygulama kök klasörünüzün içinde olup olmadığını kontrol edin. durum buysa, dosyayı köke taşıyın.

Question 14

Kodu şu şekilde kullanabilirsiniz:

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'));

Ve eklenti unutma <div id='main-content'></div>içine bodyde seninhtml

Ancak package.json dosyanızda şu bağımlılıkları kullanmalısınız:

  "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",
...
}

Benim için çalışıyor ancak bu seçeneklerle webpack'i de kullandım (webpack.config.js'ye):

  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }

Question 15

Benim durumumda, babelön ayarların yanı sıra şunu da eklemek zorunda kaldım .eslintrc:

{
  "extends": "react-app",
  ...
}

Question 16

ReactBugün öğrenmeye yeni başladım ve aynı problemle karşı karşıyaydım. Aşağıda yazdığım kod var.

<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>

Ve gördüğünüz gibi kullandıktan sonra virgül (,) atlamıştım <Hello/>. Ve hatanın kendisi hangi satıra bakmamız gerektiğini söylemektir.

Bu yüzden, ReactDOM.render()fonksiyon için ikinci parametrenin önüne bir virgül eklediğimde , hepsi iyi çalışmaya başladı.

Question 17

bunu yapmanın başka bir yolu html

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
     <div id="app"></div>

    <script src="src/index.js"></script>
</body>

</html>

src / index.js yollu index.js dosyası

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"));

bu paketi kullanın ..json sizi hızlı bir şekilde hazırlayacak ve çalıştıracaktır

{
  "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": []
}

Question 18

Yine de, .babelrc yapılandırma dosyamda tüm uygun babel yükleyicileri vardı. Paket paketleyicili bu derleme komut dosyası , manuel sayfa yenilemede benim için tarayıcı konsolunda beklenmeyen simge hatası <ve mime türü hataları üretiyordu.

"scripts": {
    "build": "parcel build ui/index.html --public-url ./",
    "dev": "parcel watch ui/index.html"
 }

Derleme komut dosyasını güncellemek sorunları benim için çözdü.

"scripts": {
    "build": "parcel build ui/index.html",
    "ui": "parcel watch ui/index.html"
 }