article

Wednesday, August 11, 2021

React.js how to install get started, classes render html and JSX

React.js how to install get started, classes render html and JSX

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

1. C:\reactdev>npm install -g create-react-app
2. C:\reactdev>create-react-app myreactdev
3. C:\reactdev>cd myreactdev
4. C:\reactdev\myreactdev>npm start
5. http://localhost:3000/
reactdev\myreactdev\src\index.js
////C:\reactdev\myreactdev\src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
//Render HTML
const myelement = (
    <table>
      <tr>
        <th>Name</th>
      </tr>
      <tr>
        <td>John</td>
      </tr>
      <tr>
        <td>Elsa</td>
      </tr>
    </table>
  );
  
  ReactDOM.render(myelement, document.getElementById('root'));
reactdev\myreactdev\src\index.js
//C:\reactdev\myreactdev\src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
//JavaScript XML
const myelement = <input type="text" />;

ReactDOM.render(myelement, document.getElementById('root'));
reactdev\myreactdev\public\index.html
//C:\reactdev\myreactdev\public\index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>
</body>
</html>

Related Post