{"id":1135,"date":"2023-12-24T13:25:59","date_gmt":"2023-12-24T12:25:59","guid":{"rendered":"https:\/\/r-raimann.de\/WordPress\/?p=1135"},"modified":"2024-07-13T19:47:48","modified_gmt":"2024-07-13T18:47:48","slug":"front-end-using-react","status":"publish","type":"post","link":"https:\/\/r-raimann.de\/WordPress\/front-end-using-react\/","title":{"rendered":"Front-end using React"},"content":{"rendered":"\n

A Java-Script based framework for front-ends of web application<\/p>\n\n\n\n

Starting new app<\/h2>\n\n\n\n

Install node und npm<\/p>\n\n\n\n

cd <base-dir>\nnpx create-react-app <app-name>\ncd <base-dir>\\<app-name>\n\ngit init <repo-name> .<\/code><\/pre>\n\n\n\n
Starting development server<\/p>\n\n\n\n
npm start

edge --> http:\/\/localhost: 3000<\/code><\/pre>\n\n\n\n
Possibly needed<\/p>\n\n\n\n
npm install prop-types\nnpm install react-router-dom\nnpm install sass<\/code><\/pre>\n\n\n\n
Example App<\/h2>\n\n\n\n
Index.js<\/p>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport { App } from '.\/components\/App';\n\nconst nameObj = {\n  preName: 'Ralf<\/em><\/strong>',\n  lastName: 'Raimann<\/em><\/strong>'\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <React.StrictMode>\n    <App\n        title=\"App-Title<\/em><\/strong>\"\n        name=\"App-Name<\/em><\/strong>\"\n        nameObj={nameObj}\n        namedChild={<p>This is named<\/p><\/em><\/strong>}\n        >\n      <p>Child of the app component<\/p><\/em><\/strong>\n    <\/App>\n  <\/React.StrictMode>\n);\n<\/code><\/pre>\n\n\n\n
App.jsx<\/p>\n\n\n\n
export function App(props) {\n  return (\n    <div title={props.title}<\/em><\/strong>>\n      <h1>{props.name}<\/em><\/strong><\/h1>\n      <h2>Children<\/h2>\n      <div>{props.children}<\/em><\/strong><\/div>\n      {props.namedChild}<\/em><\/strong>\n      <div>nameObj: {props.nameObj.preName} {props.nameObj.lastName}<\/em><\/strong> <\/div>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n
Rendered HTML<\/p>\n\n\n\n
<div title=\"App-Title<\/em><\/strong>\">\n  <h1>App-Name<\/em><\/strong><\/h1>\n  <h2>Children<\/h2>\n  <div>\n\t<p>Child of the app component<\/p><\/em><\/strong>\t\n  <\/div>\n  <p>This is named<\/p><\/em><\/strong>\n  <div>nameObj: Ralf Raimann <\/em><\/strong><\/div>\n<\/div>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
A Java-Script based framework for front-ends of web application Starting new app Install node und npm Starting development server Possibly<\/p>\n","protected":false},"author":1,"featured_media":1136,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[37,232],"tags":[245,244,247,246,243],"class_list":["post-1135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-latest","category-web-frontend","tag-front-end","tag-frontend","tag-java-script","tag-react","tag-web"],"_links":{"self":[{"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/posts\/1135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/comments?post=1135"}],"version-history":[{"count":6,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/posts\/1135\/revisions"}],"predecessor-version":[{"id":1212,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/posts\/1135\/revisions\/1212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/media\/1136"}],"wp:attachment":[{"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/media?parent=1135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/categories?post=1135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/r-raimann.de\/WordPress\/wp-json\/wp\/v2\/tags?post=1135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}