101-various

 

1) Import Export more than two entities:

https://stackoverflow.com/questions/46039976/exporting-multiple-modules-in-react-js




1.1) in CarNs.jsx

export function Garage....

export class CarN

1.2) in App.jsx

import { CarNs, Garage } from './components/CarNs.jsx';

1.3) Render multiple entities : class and function together

in App.jsx :

root.render(
<>
<CarNs color="red"/>
<Garage />
</>
);

2/Other programming

2.1/embed JavaScript expressions

Because of JSX, you can also embed JavaScript expressions inside an element by using curly brackets {}:

const lowercaseClass = 'text-lowercase';

const text = 'Hello World!';

const App = <h1 className={lowercaseClass}>{text}</h1>;

This is what makes React elements different from HTML elements. You can't embed JavaScript directly by using curly braces in HTML.

2.2/Fragment

<> or  <Fragment> The empty tag is a React feature called a Fragment. By using a Fragment, your component won't render an extra element to the screen.

2.3/Conditional statements

2.3.1/ if (if true) with &&

return(

<div className="App">

{age>=18  &&  <h1>over age </h1>}

</div>

);

2.3.2/ if else with ? :

2.3.2.1/ example 1 

return(

<div className="App">

{age>=18 ? <h1>over age </h1> :<h1>under age</h1>}

</div>

);

2.3.2.2/ example 2 - if else in styling

making text color green if...

function App() {

const isGreen = true;

return (

<h1 style={{ color: isGreen ? "green" : "red" }}>This text has color</h1>

);

}

export default App;

2.4/Variable and its declarations

const age = 19;

2.5/ Looping - map

functions App(){

const planets = [

{ name: "Mars", isGasPlanet: false },

{ name: "Earth", isGasPlanet: false },

{ name: "Jupiter", isGasPlanet: true},

{ name: "Venus", isGasPlanet: false },

{ name: "Neptune", isGasPlanet: true},

{ name: "Uranus", isGasPlanet: true},

];

return (<div className="App">

{planets.map((planet)=>planet.isGasPlanet && <h1>{planet.name}</h1>

)

}

</div>

);

}

export default App;

2.5.1/map (using it with array)

import

function App() {

const planets

3/ React with PHP

https://www.dhiwise.com/post/the-synergy-between-php-and-react-in-modern-web-applications  

https://reactphp.org/

.