This is a draft cheat sheet. It is a work in progress and is not finished yet.
React
React |
Client-Side SPA Javascript Library |
JSX |
not supported by navigators, uses Babel.It Allows HTML to be asiggned to a Javascript (JSX) variable |
Components |
used to split one big chunk of UI Code into multiple small "components". Components can be reused many times. |
Components: Functional
`
const CompName = (props <= / this is a table of props /) => {
/ Partie Logique /
var name = "ahmed";
return(
// Code JSX
<h1> 2 Quid mr friend {name}</h1>
)}
`
|
|
|
ES6 Iterable Methods
map |
array_name.map((value,index) => {
console.log("current value is:" + value
}) |
filter |
array_name.filter((value,index) => {
return value.age >= 18
}) |
find |
array_name.find((value,index) => {
return value.user_id === 101
}) |
reduce |
array_name.reduce((accumulator,value,index) => {
return accumulator + value;
},0 <= / Valeur_Initiale /) |
Import/Export
if only 1 component |
export default Component; |
if many |
export { Comp1, Comp2...} |
imp: if only 1 comp |
import comp from "./comp.js" |
imp: if many |
import { comp1, comp2 }
from "./comps.js" |
|
|
JSX: Syntax General
assigning |
var title = <h1>open na noor</h1>
|
with variables |
var title = <h1>my name is { user.name }</h1>
|
embdedded balises/comp. |
var header = <div>
<h1>Welcome {name}</h1>
<p>copyright</p>
</div>
|
styling |
var btn = <button style={{"textColor:"red"}}>
click here
</button>
|
|
