React Grimoire
  • ⁉️Introduction
  • 🧑‍🎓🧑🎓 React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • 🪝React Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • 📓React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • 🔭Concepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • 🏁What is "Rendering"?
      • 🏁React Lifecycle
      • 🏁Reconciliation & Virtual DOM in React
      • 🏁Fiber
    • ⏰Concepts to always have in mind
  • 🧩React ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • 🏁Conditional React props with TypeScript
    • 🏁Build tool choice for MVP projects
    • A CSS methodology comparison
      • 🏁Post CSS processor :Sass
      • 🏁CSS in js :Styled-components
      • 🏁Utility Classes: Tailwind
  • ⁉️Testing
    • In Progress
  • 🎭Performance
    • in Progress
  • 🚀Deployment
    • In Progress
  • 🖼️Design system
    • 🏁What's a design system anyway ?​?
  • 🔗Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page
  • Custom components
  • Conditional Rendering
  • if-statement
  • Logical operator &&
  • Conditional ternary operator (... ? ... : ...)
  • React Fragments
  • How to use Fragments?
  • Syntax
  • References and articles :

Was this helpful?

Edit on GitHub
  1. 🧑🎓 React Fundamentals

Components

A piece of the puzzle

PreviousReact Props and stylingNextHandling Events With React

Last updated 3 years ago

Was this helpful?

Custom components

You frequently want to share code, just like in regular JavaScript, which you do by using functions. If you want to distribute JSX, you can do so as well. These functions are referred to as "components" in React and have some unique properties that's defined or called props.

To be more specific, components are functions that tell React how to render one type of element. Each function takes a props object, and returns a new element that will be rendered in place of the original.

...
  <script type="text/babel">
 
    function message(props) {
    // take it as a habit to dustruct props
    const {name,ocupation} = props
    
      return (
        <div>
          {greeting}, {subject}
        </div>
      )
    }
    const props = { name:"Mayssa", ocupation:"best linguist researher" }
    const customCompnent = message(props)
    const element = <div>{customCompnent}</div>
   
    ReactDOM.render(element, document.getElementById('root'))
  </script>
...

So what type of props can a component receive?

Like HTML elements, they can certainly receive strings and numbers. Custom components can also receive objects, arrays, functions — or even other elements!

If we want to write JavaScript inside of JSX we need to wrap it with curly braces {} .we call that Interpolation

Taking template literals as an example :

const name = "Mayssa" 
const message =`Hello I'm ${name}`

Anything inside `` will be considered in string context but if we wrap it by ${} we can write JavaScript inside it and that's the JavaScript context . that's literally Interpolation in action .

Same thing inside JSX but we just ditch the $ and use curly braces and babel will understand that we are writing JavaScript there.

Bear in mind that you can't do statements inside of the curly braces as babel can't interpret them so the best why to do it is to wrap it inside a function

Expression: Something which evaluates to a value. Example: (1 + 5) / 2 Statement: A line of code which does something. Example: if Somthing does something

Imperative languages (C, Java, etc.) emphasize statements for program structure and have expressions as an afterthought. Expressions are prioritized in functional languages.

Because pure functional languages have such powerful expressions, statements can be omitted entirely.

...
  <script type="text/babel">
 
    const condition =true
    const element = <div>
    {  
    // this is wrong  ⛔ ⛔ ⛔ ⛔ ⛔ ⛔ ⛔ 
    if(condition){console.log("this will throw an error")}
    }
    </div>
    ReactDOM.render(element, document.getElementById('root'))
  </script>
...

But you can use ternary operator because like you thought, it returns an expression

...
  <script type="text/babel">
 
    const condition =true
    const element = (
      <div>
        {
        condition
          ? "I'll be rendered hoooray"
          : "I'll will not be rendered"
        }
      </div>
    );
    
    ReactDOM.render(element, document.getElementById('root'))
  </script>
...

Now let's return to our initial code

...
  <script type="text/babel">
 
    function message(props) {
    // take it as a habit to dustruct props
    const {name,ocupation,children} = props
    
      return (
        <div>
          {name}, {ocupation} {children}
        </div>
      )
    }
    const props = { name:"Mayssa", ocupation:"best linguist researher", children:"Im here" }
    const customCompnent = message(props)
    const element = <div>{customCompnent}</div>
   
    ReactDOM.render(element, document.getElementById('root'))
  </script>
...

Remember React.createElement():

React.createElement(
  type,
  {...props},
  [...children]
)

As we said, the type argument for React.createElement() can accept various things one of which is a React Element .

In our case, we want to create a React Element representing the message function.

const messageElement = React.createElement(message,props);

That will work just fine as react instead of creating a DOM node. It creates an element that is saved in memory and that will call our message function when we render it on the page.

If you can recall we can convert React.createElement() to JSX. Then our code will look something like this:

...
  <script type="text/babel">
 
    function message(props) {
    // take it as a habit to dustruct props
    const {name,ocupation,children} = props
    
      return (
        <div>
          {name}, {ocupation} {children}
        </div>
      )
    }
    
    const props = { name:"Mayssa", ocupation:"best linguist researher" }
   
    const element = (
      <div>
        <message name="Mayssa" ocupation="best linguist researher">
          Hey I'm here
        </message>
      </div>
    );     
    
    ReactDOM.render(element, document.getElementById('root'))
  </script>
...

Babel compiler will not recognize message as a React Element. Instead, it will try to find it as a HTML Tags without a result so it will throw an error.

If you want learn more about HTML tags :

So we need to let babel know that's a React Element, and for that, all our React component's name will need to start with Uppercase letter.

...
  <script type="text/babel">
 
    function message(props) {
    // take it as a habit to dustruct props
    const {name,ocupation,children} = props
    
      return (
        <div>
          {name}, {ocupation} {children}
        </div>
      )
    }
    
   
    const element = (
      <div>
        <Message name="Mayssa" ocupation="best linguist researher">
          Hey I'm here
        </Message>
      </div>
    );   
    ReactDOM.render(element, document.getElementById('root'))
  </script>
...

We can even nest those element inside each others:

...
  <script type="text/babel">
 
    function message(props) {
    // take it as a habit to dustruct props
    const {name,ocupation,children} = props
    
      return (
        <div>
          {name}, {ocupation} {children}
        </div>
      )
    }
    
    const props = { name:"Mayssa", ocupation:"best linguist researher" }
   
   const element = (
      <div>
        <Message name="Mayssa" ocupation="best linguist researher">
          Hey I'm here
        </Message>
        <Message name="Maissen" ocupation="Suikoden Guru">
          <Message name="Maissen child" ocupation="Suikoden hater">
            Hey I'm here
          </Message>
        </Message>
      </div>
    );
    
    ReactDOM.render(element, document.getElementById('root'))
  </script>
...

From here on, i'll will be dealing with JSX in the next chapters as it's easier to write and is more readable especially if we have a complex tree of components.

But always bear in mind that anything that we will do with JSX we can do with React raw APIs.

Conditional Rendering

You can decide to conditionally evaluate one JSX expression over another using different techniques.

if-statement

You can use the if...else statement .

const formatName =
  ({ firstName, lastName }: Person) => `${firstName} ${lastName}`;
  
interface Person {
  firstName: string;
  lastName: string;
}
  
interface HelloWorldProps {
  person?: Person;
}
  
const HelloWorld = (props: HelloWorldProps) => {
  if (props.person) {
    return <div>Hello {formatName(props.person)}</div>;
  } else {
    return <div>Hello World</div>;
  }
};

Logical operator &&

In some cases, rather than using the if keyword , it is more convenient and more concise to use an on-the-fly condition (Inline If) with the && operator.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

Conditional ternary operator (... ? ... : ...)

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length === 0 ? (
        <h2>
          Sorry no new messages :(
        </h2>) : (
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
        )
      }
    </div>
  );
}

React Fragments

When using React, it's a common pattern to return multiple elements by wrapping them with a container element like div. This works fine, but by doing so, we're adding an extra node to the DOM. As your app grows, these extra nodes contribute to slow performance. Below is an example without fragments:

const Paper = () => {
  return (
    <div>
      <Header />
      <Main />
    </div>
  );
};

const Home = () => {
  return (
    <Layout>
      <Paper />
      <Sidebar />
    </Layout>
  );
};

As you see in the dashboard component, we wrap the child elements with a div and then call the Paper component in the Home component. Now, let's see what it looks like in the browser.

<Layout>
    <div>
        <Header />
        <Main />
    </div>
    <Sidebar />
</Layout>

As you can see in the example, we have an unused div that doesn't contribute to anything in the layout. This is redundant.

How to use Fragments?

To solve this problem, Fragments were introduced in React. Fragments are used to group a list of children without adding extra nodes to the DOM. Let's look at an example where we use Fragments:

const Paper = () => {
  return (
    <React.Fragment>
      <Header />
      <Main />
    </React.Fragment>
  );
};

const Home = () => {
  return (
    <React.Fragment>
      <Paper />
      <Sidebar />
    </React.Fragment>
  );
};

Now, if we look at the browser we'll see that no additional elements have been added to the DOM.

<Layout>
    <Header/>
    <Main/>
    <Sidebar/>
<Layout>

Syntax

Fragments can be used using two types of syntax. The first one is using React.Fragment which we've used multiple times above. The other one is a new shorter syntax, using empty brackets, that does the same thing.

// Using React.Fragment tags  that support Keys or attributes
return (
  <React.Fragment>
    <Paper />
    <Sidebar />
  </React.Fragment>
);

// Using empty brackets
return (
  <>
    <Paper />
    <Sidebar />
  </>
);

Both of these types of syntax work the same. Although, the newer syntax doesn't support keys or attributes.

References and articles :

OPTIONAL

For an explanation of the important differences in composability (chainability) of expressions vs statements, my favorite reference is John Backus's Turing award paper, .

🧑‍🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
🎓
Can programming be liberated from the von Neumann style?
Fragments – React
Conditional (ternary) operator - JavaScript | MDN
HTML Cheat SheetMaissen's Grimoire
Your First Componentreactjs
Logo
Conditional Renderingreactjs
Coding Workshops for Women
Logo
Logo
Logo
Logo