707 React JSX

by steen_hansen

HTML

<!DOCTYPE html>
<meta charset="utf-8" />
<title>707 React JSX</title>





<div id='js-div' style="width:50%">
  <a href='https://github.com/steenhansen/type-czech' target="_blank" class='git-hub'>GitHub Package</a>
  <div id='js-code'>the javascript</div>
  <br>

























</div>





<div id="the-explanation" style="width:50%">
        <div class='an-explantion'>707- React JSX</div>
   
        <div id='explanation-text'>
   
          
          <div id="react-root"></div>

             <br>

<pre>
  const <span class="text-4">isNodeJs</span> = ()=> { try {return process.versions.node} catch{return false} }

  function <span class="text-3">getJsxAsArray</span>(jsx_item, the_list) {
    let the_type = jsx_item['type']
    the_list.push(the_type)
    let the_children = jsx_item['props'].children
    if (Array.isArray(the_children)) {
      the_list.push(the_children[1])
    }else{
      getJsxAsArray(the_children, the_list)
    }
    return the_list
  }

//  const elem_arr = ['li', 'label', 'learn javascript']
//  const elem_arr = ['li', 'label', '<span class="text-2">GROK REACT</span>']
//  const elem_arr = ['li', 'label', 'use type-czech']

</pre>
              
Used in type-czech-phone-recipes project
 <ul style="list-style: none">
                    <li><a href="https://github.com/steenhansen/type-czech-phone-recipes">GitHub</a></li>
                    <li ><a href="https://phone-recipes.herokuapp.com/">Recipe Website</a></li>
                    <li><a href="https://github.com/steenhansen/type-czech-phone-recipes/blob/main/component-stories/CookRecipes.jsx">File with JSX function CookRecipes()</a></li>
                </ul>

                <br>

        </div>







          <div id="console-log">
                    <div class='a-title'>Console Output</div>
         
                    <div id='log-text'></div>
                    <br>
          </div>











    <!--            -----------------TYPE 1------------------------      ...