React.js, What the hell is this!!!

2 min readMay 7, 2021

React is a JavaScript library for building user interfaces. It’s used to design web apps. It is a declarative language for HTML UIs that represent dynamic data. It creates a virtual DOM and manipulates the HTML DOM in any UI changes.

Raw Code vs React Code:

with web DOM API

document.getElementById(‘title’).innerHTML = `
  <h1>
    Hello HTML
  </h1>
`;

with React’s API

ReactDOM.render(
  React.createElement(
    'h1',
    null,
    'Hello React',
  ),
  document.getElementById('title'),
);

Getting Started

To create a react app, open the terminal in a specific directory.

npx create-react-app your-app

after finished the process:

cd your-app
npm start

Folder Structure

your-app/
  README.md
  node_modules/
  package.json
  public/
    index.html    [This is the page template]
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js      [This is the javascript entry point]
    logo.svg

React supports a special type of js code. It’s called JSX.
Example:

const title = <h1>This is a Title</h1>

What is JSX

JavaScript XML(JSX) is a extension version of the JavaScript language syntax. We can write XML-like code for elements and components. JSX tags have a tag name, attributes, and children.
It’s not necessary to write JSX code in React Application. But, JSX makes your react code simpler and elegant. JSX transpiles to pure JavaScript which is understood by the browsers.