ReactJS simple app එක render වෙන්නෙ නෑ

kulith6

Active member
  • Oct 11, 2012
    434
    180
    43
    ReactJS simple app එක render වෙන්නෙ නෑ

    සිංහලු මම ReactJS වලට අලුත් මම lynda ගෙ tutorial එකක් try කරා එකෙ තියන මේ simple app එක මගෙ pc එකේ run වෙන්නෙ නැ. tutorial එකේ අව්ලක් නැතුව වැඩ. දන්න අයෙක් help එකක් දෙන්න පීස්.

    index.html
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <script src="https://fb/.me/react-15.1.0.js"></script>
      <script src="https://fb/.me/react-dom-15.1.0.js"></script>
      <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-
      core/5.8.38/browser-polyfill.min.js"></script>
      <meta charset="UTF-8">
      <title>Hello World with React</title>
    </head>
    <body>
      <div id="react-container"></div>
      <script type="text/babel" src="script.js"></script>
    </body>
    </html>

    script.js
    Code:
    const { render } = ReactDOM;
    
    render(
        <h1 id='title'
            className='header'
            style={{backgroundColor: 'orange', color: 'white', fontFamily: 
            'verdana'}}>
        Hello World
        </h1>,
        document.getElementById('react-container')
    );

    file structure
    Code:
    reactapp
        -index.html
        -script.js

    මේකෙ use කරලා තියෙන්නෙ ReactJS old version එකක්. එක අව්ලක් නැද්ද ? මම මේක plunker එකේ try කලා එතකොට script.js එකේ errors වගයක් පෙන්නනව


    ozjpDeR.png
     
    Last edited:

    sp3co

    Well-known member
  • Sep 22, 2016
    1,495
    425
    83
    Katubedda
    aula mokakda kiyala mata hithaganna ba... math react walata tikak aluth

    uba puluwannam react official doc eke tutorial eka follow karapan...eka aluthma version ekata nisa eaken anith tutorial walata wada hodata igena ganna puluwan...
     
    • Like
    Reactions: kulith6

    kulith6

    Active member
  • Oct 11, 2012
    434
    180
    43
    aula mokakda kiyala mata hithaganna ba... math react walata tikak aluth

    uba puluwannam react official doc eke tutorial eka follow karapan...eka aluthma version ekata nisa eaken anith tutorial walata wada hodata igena ganna puluwan...

    try කරල බලන්නම් syntax පරණ හින්ද වෙන්නැති. thnx for the reply rep+
     
    Last edited:

    sp3co

    Well-known member
  • Sep 22, 2016
    1,495
    425
    83
    Katubedda
    try කරල බලන්නම් syntax පරණ හින්ද වෙන්නැති. thnx for the reply rep+

    eaka neme scn eka..uba oya JSX syntax tiyana code eka kelinma browser eke run karana nisai ohoma wenne.. JSX kelinma browser eke run karanna ba.. eaka babel wage compiler ekakin JS walata compile karala thama run karanna puluwan..eakai oya aula
     

    kulith6

    Active member
  • Oct 11, 2012
    434
    180
    43
    eaka neme scn eka..uba oya JSX syntax tiyana code eka kelinma browser eke run karana nisai ohoma wenne.. JSX kelinma browser eke run karanna ba.. eaka babel wage compiler ekakin JS walata compile karala thama run karanna puluwan..eakai oya aula

    ඔව් උබ හරි. මේ example එකේ babel library එක link කරලා තියනව html එකෙ head බලපන්. script.js එක link කරනකොට type="text/babel" දැම්මම jsx compile වෙනව කියල තමි tutorial එකේ තිබ්බේ.
     

    TNHM

    Well-known member
  • Jan 3, 2017
    5,350
    15,591
    113
    ඔව් උබ හරි. මේ example එකේ babel library එක link කරලා තියනව html එකෙ head බලපන්. script.js එක link කරනකොට type="text/babel" දැම්මම jsx compile වෙනව කියල තමි tutorial එකේ තිබ්බේ.

    JSX කොම්පයිල් වෙන්නේ රන් ටයිම් එකේදී නෙමෙයි. ඒකනිසා බේබල් වෙබ්පක් දාගන්න. උබේ ෆෝල්ඩර් එක වැරදි ඇති JS eka add wena
     

    kulith6

    Active member
  • Oct 11, 2012
    434
    180
    43
    EMINƎM;22843533 said:
    src="js/script.js"
    ube js folder eke athule newene script.js eka tynne :oo:

    thread එක දාන්න කලින් folder එක අයින්කලා. එක නෙවෙඉ අව්ල
     

    kulith6

    Active member
  • Oct 11, 2012
    434
    180
    43
    JSX කොම්පයිල් වෙන්නේ රන් ටයිම් එකේදී නෙමෙයි. ඒකනිසා බේබල් වෙබ්පක් දාගන්න. උබේ ෆෝල්ඩර් එක වැරදි ඇති JS eka add wena

    ඔව් එතන තමයි අවල ඇත්තෙ. මොකද මේක jsx නැතුව js වලින් දැම්මොත් වැඩ කරනව

    Code:
    const title = createElement(
    	'h1',
    	{id: 'title', className: 'header'},
    	'Hello World'
    )
    
    render(
    	title,
    	document.getElementById('react-container')
    )


    එත් tutorial එකේ ගැනිගේ එක වැඩ අව්ලක් නැතුව. එකි webpack දම්මේත් නැ. ඒ example එකම තමයි මේ තියෙන්නෙ.
     

    thilina.rp

    Well-known member
  • Dec 10, 2014
    5,653
    769
    113
    ඔව් එතන තමයි අවල ඇත්තෙ. මොකද මේක jsx නැතුව js වලින් දැම්මොත් වැඩ කරනව

    Code:
    const title = createElement(
    	'h1',
    	{id: 'title', className: 'header'},
    	'Hello World'
    )
    
    render(
    	title,
    	document.getElementById('react-container')
    )


    එත් tutorial එකේ ගැනිගේ එක වැඩ අව්ලක් නැතුව. එකි webpack දම්මේත් නැ. ඒ example එකම තමයි මේ තියෙන්නෙ.

    පොඩ්ඩක් බලපන් ඕක පරණ tutorial එකක් වෙන්න ඇති ඔර්ගිනල් doc එකේ බලපන් react වල ...
     
    • Like
    Reactions: kulith6

    kulith6

    Active member
  • Oct 11, 2012
    434
    180
    43
    අව්ල තියෙන්න ඇත්තෙ ReactJS or Babel reference files වල conflict එකක්. tutorial එකේ වැඩ කලාට දැන් update වෙලා මොකක්හරි conflict එකක් හැදෙන්න ඇති.

    references changed from
    Code:
    <script src="https://fb/.me/react-15.1.0.js"></script>
    <script src="https://fb/.me/react-dom-15.1.0.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser-polyfill.min.js"></script>

    to

    Code:
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

    දැන් වැඩ අව්ලක් නැ. rply කරපු bump කරපු හැමෝටම thnx+