React Tips — The Basics

React is one of the most popular libraries for creating front end apps. It can also be used to create mobile apps with React Native.

In this article, we’ll go back to the basics and look at basic things that we should be aware of that can let us create React apps easier.

JSX Code are Expressions

When writing React code, we have to remember that JSX code is just JavaScript expressions. This means that they can be used anywhere that JavaScript expressions can be used like assigning them to variables, nesting them, using them as properties of objects, returning them in functions, etc.

For instance, we can do common operations with them as follows:

import React from "react";
const title = <h1>Hello</h1>;

export default function App() {
  return <div className="App">{title}</div>;
}

In the code above, we have the title constant that’s assigned to an h1 element. We then put it inside the App component.

If we remember this, then we won’t have any difficulty with incorporating JSX code in our React app.

JSX Can Be Nested

We can nest JSX elements within each other. For instance, we can nest multiple components within another component as follows:

import React from "react";

export default function App() {
  return (
    <div>
      <p>foo</p>
      <p>bar</p>
    </div>
  );
}

In the code above, we have the div element that wraps around 2 p elements.

We can access child components by the special children prop in our own component. For instance, we can write the following code to do that:

import React from "react";

const Foo = ({ children }) => {
  return <div>{children}</div>;
};

export default function App() {
  return (
    <Foo>
      <p>foo</p>
      <p>bar</p>
    </Foo>
  );
}

In the code above, we have the Foo component that takes the children prop which is rendered in the component by returning it inside a div.

Then in App , we put in 2 p elements inside Foo and lets us display them within the Foo component. This way, we can nest items in our own components with ease.

HTML and JSX are Different

HTML and JSX are different. JSX is a JavaScript code that looks like HTML. As we saw above, the JSX code is just JavaScript in a different form. They shouldn’t be confused with HTML even though they look kind of the same.

Differences include all tags have to be closed and the class attribute in HTML is called className in JSX.

For instance, in HTML, we have tags like img that that don’t close in HTML. We can add an image in HTML by writing the following code:

<img src='https://images.unsplash.com/photo-1565598478542-4dfb41f0e9e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80' alt='work'>

On the other hand, in JSX, we have to close the tag. Therefore, we write the following:

import React from "react";

export default function App() {
  return (
    <img
      src="https://images.unsplash.com/photo-1565598478542-4dfb41f0e9e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
      alt="work"
    />
  );
}

In the code above, we have a slash at the end of the img tag. This is required rather than optional.

To add the class attribute to an element, we can write the following code in HTML:

<div class='foo'>
  foo
</div>

We added the foo class with the class attribute.

In JSX, we have to write the following code:

import React from "react";

export default function App() {
  return <div className="foo">foo</div>;
}

The className prop lets us set the class attribute of the div element rather than class . This is because class is a reserved word in JavaScript, so it can’t be used as a prop name.

Also, in JavaScript, the className property is the property of a DOM element object that’s used to set the class attribute value.

Therefore, we must remember that the prop to set the class attribute is className in React and JSX.

Components and Props

A React app has components that take props. Props are data that are passed down from a parent to a child.

Props can be any kind of data. They can be objects, primitive values, functions, etc.

If we pass in a function as a prop value, then we can call functions that’s in the parent in the child component.

For instance, we can pass in several props as follows:

import React from "react";

const Button = ({ displayAlert, text }) => {
  return <button onClick={displayAlert}>{text}</button>;
};

export default function App() {
  const displayAlert = () => alert("alert");
  return <Button text="click me" displayAlert={displayAlert} />;
}

In the code above, we passed in a function displayAlert into the Button component, which is a child component for App , then we called it in Button when the button is clicked.

We also pass in the text prop with the value 'click me' to display the text on the button.

Conclusion

JSX is just JavaScript expressions. Therefore, we can put expressions anywhere by writing it just like any other expression.

HTML and JSX are different. They look similar but JSX is JavaScript and HTML is HTML.

Finally, React apps are composed of components which take props. Props are data that are passed in from a parent component to a child and can be any JavaScript data type.