solution • React JSX templates - martindubenet/wed-dev-design GitHub Wiki
[ React TypeScript coding ][ React JSX templates ][ React MUI tools ][ Gatsby.React on Netlify ]
- Components
- Independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, « Class » components and « Function » components.
- Helmet
- Refers to the HTML
<head>section that contains<meta>datas for SEO but also global<link type="stylesheet">files and component relative CSS<style>loaded in the page. - JSX
- Acronyme for « JavaScript XML ». JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. This is a commonly used as file extension for React templates.
- Props
- Props are arguments passed into React components. Props are passed to components via HTML attributes. props stands for properties.
- Any HTML element can be used within JSX,
- JSX requires all (HTML) tags to be closed either by a dedicated closing tag
<*>…</*>OR by a self-closing orphan tag<* … />. - HTML tag attributes MUST be « camelCase » and CAN NOT contain JavaScript reserved words.
- HTML
class="…"className="…"in JSX, - HTML
onclick=(…)onClick={…}in JSX.
- HTML
- In JSX, JavaScript expressions can be evaluated when within curly brackets
{…}but JavaScript statements (likeif) are invalid. - Style attributes must be in object notation and values wrapped in signgle-quotes instead of a plain string within double-quotes of the HTML
- HTML :
<div style="margin: 10px; padding: 5px">…</div> - JSX :
<div style={{margin: '10px'; padding: '5px'}}>…</div>
- HTML :
This is simply a normal JavaScript function
Function FunctionalComponentExample() {
return <p>This string is a functional component</p>;
}Arrow function example as functional component
const Phrase = () => <p>This string is an arrow functional component</p>;Since it is a bad practice write CSS inside an Object, we avoid using HTML’s inline style attributes on components.
Instead using a styled-component is the preferable practice since this allow us to rely on props flexibility commonly refereed to as « CSS-in-JS ». In these case props allow us to set parameters for our component to follow style guides from designers.