Front-end using React

A Java-Script based framework for front-ends of web application

Starting new app

Install node und npm

cd <base-dir>
npx create-react-app <app-name>
cd <base-dir>\<app-name>

git init <repo-name> .

Starting development server

npm start

edge --> http://localhost: 3000

Possibly needed

npm install prop-types
npm install react-router-dom
npm install sass

Example App

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './components/App';

const nameObj = {
  preName: 'Ralf',
  lastName: 'Raimann'
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App
        title="App-Title"
        name="App-Name"
        nameObj={nameObj}
        namedChild={<p>This is named</p>}
        >
      <p>Child of the app component</p>
    </App>
  </React.StrictMode>
);

App.jsx

export function App(props) {
  return (
    <div title={props.title}>
      <h1>{props.name}</h1>
      <h2>Children</h2>
      <div>{props.children}</div>
      {props.namedChild}
      <div>nameObj: {props.nameObj.preName} {props.nameObj.lastName} </div>
    </div>
  );
}

Rendered HTML

<div title="App-Title">
  <h1>App-Name</h1>
  <h2>Children</h2>
  <div>
	<p>Child of the app component</p>	
  </div>
  <p>This is named</p>
  <div>nameObj: Ralf Raimann </div>
</div>