React

React is an open-source front-end JavaScript library from Facebook / Meta.

Documentation

Getting started

This creates a small React project

sudo apt-get install npm
npm init react-app my-react-demo
cd my-react-demo/
npm start
[$[Get Code]]

Everything starts with an HTML can can be almost empty, just needs one div element with a unique id to be replaced by React

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
[$[Get Code]]

This replaces the element in the HTML with the id "root" with whatever the App does

src/index.js or src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();
[$[Get Code]]

src/App.js or src/App.jsx

import './App.css';

function App() {
  return (
      <div className="App">
          Hello World
      </div>
  );
}

export default App;
[$[Get Code]]

This is a small example that shows a calendar view and you can select a start and end date

Good to know

  • React elements are the lowest units you use, they are mapped directly to HTML elements. Start their names with lowercase. React components use other components and elements. Start their names with Uppercase names
  • Class components are hardly used anymore. Use Function components instead.
  • For single page applications it is critical for React to be able to change only the parts of the page that needs to be changed. This is done by the reconsiler. When you have lists of something, always add an unique id to each element so react can understand what is new and what is not

Tools