Hypertext Markup Language (HTML) is the standard language for documents that determine the structure of a web page.

HTML is a very important language in web development. Your code is either in HTML originally or compiles to it so browsers can read it.

JSX, on the other hand, means JavaScript Syntax Extension or JavaScript XML as some like to put it.

It was created as a syntactic sugar for React.createElement(). It is an extension of JavaScript that allows developers to write HTML right within JavaScript. So when you're writing JSX, technically you're writing JavaScript and HTML together.

Also, that means JavaScript's reserved keywords must be kept intact. And that is why the “for” attribute in HTML is “HTMLFor” in JSX, since "for" is one of the commonest JavaScript reserved keywords.

In terms of support by browsers, HTML is supported by all of them. JSX, on the other hand, was never really intended to be, so you need a compiler like Babel or Webpack to transpile JSX into the JavaScript that browsers understand.

The Main Differences Between HTML and JSX

You need to return a single parent element in JSX

One of the major differences between HTML and JSX is that in JSX, you must return a single parent element, or it won't compile.

A lot of devs use <div>...</div>, but a better one that many people use is “fragment”, <>...</> which makes the code more readable.

In HTML, you are free to do whatever you want as you don’t have to return a single parent element.

Here you can see that JSX is not compiling because there's no parent element.

And here JSX is compiling because there is a parent element (fragment).

You can implement JS directly in JSX

In JSX, it is possible to write JavaScript directly. You can do this by putting the JavaScript in curly braces {...}. Whereas in HTML, you need a script tag or an external JavaScript file to implement JavaScript:

const Article = () => {
  return (
    <>
      <div>
        <p>Hi campers</p>
        <p>How's coding going</p>
        <p>What is up?</p>
        {new Date().toDateString()}
        <br />
        <br />
        {2 + 5} is seven in word
        <br />
      </div>
    </>
  );
};
export default Article;

All Tags Self-close in JSX

Tags can self-close in JSX. That is, it is possible to have <div></div> as <div /> and <span></span> as <span />. You don't want to do that, but its possible.

Self-closing tags in HTML can self-close without the slash before the right angle bracket, that is <br /> could work as <br>. But in JSX, you need to include the slash. This should bring something to mind – JSX heavily relies on HTML 4 syntax.

Here you can see that JSX is not compiling because there's no forward slash before the right angle bracket of the line break tag.

And here you can see that JSX is compiling because there is a forward slash in the line break tag.

###ClassName and HTMLFor, not class and for in JSX To define class names and for attributes in JSX, you don't do it as class or for, since both are reserved keywords in JavaScript.

You actually create class components with the class keyword. So, to define class names in JSX, you do it as "className" and for attributes for labels you write "HTMLFor":

const Article = () => {
  return (
    <>
      <div className="container">
        <p>Hi campers</p>
        <p>How's coding going</p>
        <p>What is up?</p>
        {new Date().toDateString()}
        <br />
        <br />
        {2 + 5} is seven in word
        <br />
        <form>
          <label htmlFor="name">Name</label>
          <input type="text" />
        </form>
      </div>
    </>
  );
};

export default Article;

Write all HTML Attributes in camelCase in JSX

You need to write all HTML attributes and event references in camelCase while writing JSX. So, onclick becomes onClick, onmouseover becomes onMouseOver, and so on:

const Article = () => {
  const sayHI = () => {
    alert("Hi Campers");
  };

  return (
    <>
      <div className="container">
        <p>Hi campers</p>
        <p>How's coding going</p>
        <p>What is up?</p>
        {new Date().toDateString()}
        <br />
        <br />
        {2 + 5} is seven in word
        <br />
        <button onClick={sayHI}>ALert Hi</button>
      </div>
    </>
  );
};
export default Article;

Write Inline Styles as Objects in JSX

And lastly, to define inline styles for JSX, you write it as an object, with the properties in camelCase, the values in quotes, and then you pass it inline to the JSX.

This means you have to open up a style attribute and use curly braces instead of quotes. This is opposed to HTML where you're free to define millions of styles right inside the opening tag without writing them as objects and putting them in quotes:

const Article = () => {
  const inlineStyle = {
    color: "#2ecc71",
    fontSize: "26px",
  };
  return (
    <>
      <div className="container">
        <p style={inlineStyle}>Hi campers</p>
        <p>How's coding going</p>
        <p>What is up?</p>
        {new Date().toDateString()}
        <br />
        <br />
        {2 + 5} is seven in word
        <br />
        <button onClick={sayHI}>ALert Hi</button>
      </div>
    </>
  );
};
export default Article;

You can choose to write the object directly in the style attribute – that is, by opening up two curly braces and putting the properties and values inside.

But a cleaner way is to define the object outside of the JSX, and then pass it into the opening tag.

const Article = () => {
  return (
    <>
      <div className="container">
        <p style={{ color: "#2ecc71", fontSize: "26px" }}>Hi campers</p>
        <p>How's coding going</p>
        <p>What is up?</p>
        {new Date().toDateString()}
        <br />
        <br />
        {2 + 5} is seven in word
        <br />
      </div>
    </>
  );
};

export default Article;

Note that you should not use inline styling in plain HTML – you don't want to ruin your website's SEO.

That's it!

Thank you for reading. To connect with me, checkout my portfolio, or follow me on Twitter, where I spend most of my time tweeting and engaging in anything web development.

Compared to many tutorials you might have gone through before, this one is meant to be thoroughly practical from start to finish.

You will learn how to create an entire React application all within around 100 lines of code, which makes use of many of the core concepts of React: hooks, state management, forms, JSX elements, components, props, styling, and conditionals.

And best of all, you will learn all of these concepts while coding yourself, hands-on. Let's get started!

How to Bootstrap our React Project

We're going to create our React application by going to the website react.new.

What this will do is create a new code sandbox for us. We can use code sandbox to create and develop complete React applications without having to install anything on our computer.

Once you visit react.new, you will see your code editor and, on the right hand side, we see a live version of our application to which we can make changes:

Quick tip: Make sure to hit command/ctrl S. Doing so will fork our sandbox and create a special URL that we can revisit in the future.

Right now we're looking at our app component, which is the only component that's being displayed in our application. If we look at our file explorer on the left, we'll see app is being imported and rendered here within this index.js file.

// src/index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

What does all of this code do?

It simply "renders" or displays our app by injecting it into an index.html file, which is what we see on the right hand side of the page.

The code also finds and puts our app in the so-called root element (a div with the id of "root"). If you want see where that element is, you can find it within our public folder, specifically in the index.html file.

How to Use JSX

Now that we have a working React app, let's start building it and changing what we see.

Let's begin within our div by removing this h2 element, and within our h1, just calling our app "Todo List":

What we are working with here is called JSX. It looks very similar to HTML, but is in fact JavaScript. We use it to build the structure of our application, just as we would use HTML.

We can use any standard HTML elements within JSX: divs, any heading element, paragraph, spans, buttons, and so on.

It's important to note that there are some minor differences between JSX and HTML.

The attributes that we use on JSX are slightly different than in normal HTML elements. They are written in the camelcase style, which is a standard way of writing variables or properties in JavaScript.

For example, to apply a class on a JSX element, we use an attribute called className. For normal HTML, that would just be called class.

// src/App.js
import "./styles.css";

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

If we use class instead of className for JSX, we're going to get a warning saying class is an invalid DOM property:

How to Create a List of Todo Elements

Since we're making a todo application, let's create our todo list underneath our h1 header.

We could begin by making an unordered list with some list items as children elements. Each todo would be listed within an li element:

// src/App.js
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Todo List</h1>

      <ul>
          <li>Todo Item</li>
      </ul>
    </div>
  );
}

We can do something better as React developers, however. Instead, let's make a dedicated component that is responsible for displaying our todos.

How to Create New React Components

Components are the backbone of any React application.

We use components to separate different parts of our user interface. This makes them reusable wherever we need them across our app, it better organizes our code, and it makes it easier to understand our projects.

Components fulfill an important concept in programming which is called "separation of concerns." This means it is preferable for each part of our component to have its own clearly defined role and responsibilities, separate from any other component.

Just as we have an App component, we can create a component to be displayed within App. Since it is a list of todos, let's call it "TodoList":

// src/App.js
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Todo List</h1>

      <TodoList /> {/* component with single tag */}
    </div>
  );
}

React Component rules

Every component must begin with a capital letter. And once a component is declared, it can be written and used very similarly to an HTML element.

A component can consist of just one tag or two tags. If it doesn't have anything between the two tags, which are called children, it should only have as one tag as the code above displays: <TodoList />.

Additionally, if a component or element consists of just one tag, it must be self-closing. Meaning, it must end in a forward slash (like <TodoList /> and not <TodoList>).

We are attempting to display our TodoList component, but we haven't created it yet. To do that, we can create another function component like App, with the name TodoList.

At this point, we're going to get this error saying nothing was returned from render:

We need to return something, specifically some JSX. Every component we make must return JSX elements and components (which must also, ultimately, be composed of JSX).

In our case, we want to return our list of todos. Let's take our unordered list with all of our list items that we want to show. We don't really have any data just yet, so let's create some.

In particular, let's create a set of todo data, which we can include in an array. Let's add this to the App component:

// src/App.js
import "./styles.css";

export default function App() {
  const todos = [
    { id: 1, text: "Wash dishes", done: false },
    { id: 2, text: "Do laundry", done: false },
    { id: 3, text: "Take shower", done: false }
  ];

  return (
    <div>
      <h1>Todo List</h1>
      <TodoList />
    </div>
  );
}

function TodoList() {}

How to Pass Data to Components with Props

Now the question is – how do we pass all this data to and display it within our todo list?

With React components, we can do that with special properties that we add to the component called props.

Props are custom attributes we can add to React components to pass data to our components. They are the React equivalent of arguments in JavaScript.

Since our data is called todos, let's name our prop the same: "todos". We use the equals operator to set a prop's value as well as a set of curly braces. This is because our todos array is a variable (a dynamic value):

// src/App.js
import "./styles.css";

export default function App() {
  const todos = [
    { id: 1, text: "Wash dishes", done: false },
    { id: 2, text: "Do laundry", done: false },
    { id: 3, text: "Take shower", done: false }
  ];

  return (
    <div>
      <h1>Todo List</h1>
      <TodoList todos={todos} />
    </div>
  );
}

function TodoList() {}

If we wanted to make it a string, for example, we would wrap it in a set of quotes. But since this is a dynamic value that can change, we want to always include it within curly braces.

Within the TodoList component, where are our props going to be received to ultimately display our todos data? They're going to be received exactly where any function would receive their arguments.

We receive our prop data on an object which we usually call "props", but we can give it whatever name we like.

We can see that we're passing this data down by using console.log(props). If we look at our console tab, we have this property on our props object called "todos".

It has an array of three items just like we would expect:

// src/App.js
import "./styles.css";

export default function App() {
  const todos = [
    { id: 1, text: "Wash dishes", done: false },
    { id: 2, text: "Do laundry", done: false },
    { id: 3, text: "Take shower", done: false }
  ];

  return (
    <div>
      <h1>Todo List</h1>
      <TodoList todos={todos} />
    </div>
  );
}

function TodoList(props) {
  console.log(props) // {todos: Array(3)}
}

How to Map Over Array Items with the Map Function

In order to display each of these list items, we can take the array that is on props.todos.

In particular, we can use a special function that React gives us on the todos array called map.

Since we want to display this within TodoList, we once again need to use a set of curly braces to display it within our JSX. Using props.todo.map, we will map over this array just like we would a normal JavaScript array.

The React map function is slightly different than the normal JavaScript map function because it is made to return and render JSX elements.

.map() accepts an inner function and in that function, we can get access to each todo. Using an arrow function, we can return each todo within its own JSX.

Finally, we can immediately return that JSX by wrapping it in a set of parentheses:

Within our inner function, we get access to each todo's data. To display that data, we can take each todo which we know is an object. We can use a set of curly braces to output the dynamic value of whatever is on todo.text.

When we do that, we can see our three todos:

What are React Keys (and Why They Matter)?

If we look at the console tab at the bottom we will see a warning, saying each child in the list should have a "unique key prop."

The reason for this is that React needs to keep track of the order of each of the items in our list. It does so with the help of a special React prop called a key.

For a key, you generally want to use a unique identifier, a unique value that is only associated with one piece of data. In our case, to identify each todo's data we will use the unique number provided on todo.id.

So why are keys important? It is important for React to figure out how it should appropriately update our user interface. If we were to update a todo's text or done value, the key is what tells React which todo item needs to be updated.

Once we add the key prop to the element or component that we're looping over, we no longer get that warning:

How to Get Individual Props with Destructuring

Note that one additional shorthand is that instead of referencing the entire object within the TodoList, we can reference the individual properties on that object to make our code a little bit shorter by using object destructuring.

Object destructuring is not a React concept, but a standard JavaScript feature that makes accessing object properties easier by immediately declaring them as individual variables.

As of right now, we only have one prop being passed down to TodoList, so let's destructure that one prop, todos, individually.

To do so, we add a set of curly braces within our functions parameters, and just grab the property that we need from the props object. This means that we can change props.todos to just todos:

// src/App.js
import "./styles.css";

export default function App() {
  const todos = [
    { id: 1, text: "Wash dishes", done: false },
    { id: 2, text: "Do laundry", done: false },
    { id: 3, text: "Take shower", done: false }
  ];

  return (
    <div>
      <h1>Todo List</h1>
      <TodoList todos={todos} />
    </div>
  );
}

// using object destructuring on the props object
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

How to Add New Todo List Items

Now what about adding some new todos to our list?

Underneath our TodoList component, let's add a new component that's responsible for adding new todos. A logical name for this would be "AddTodo".

We can create this underneath our to do list component. Let's have AddTodo return a form element that contains a basic text input and a submit button.

// src/App.js
import "./styles.css";

export default function App() {
  const todos = [
    { id: 1, text: "Wash dishes", done: false },
    { id: 2, text: "Do laundry", done: false },
    { id: 3, text: "Take shower", done: false }
  ];

  return (
    <div>
      <h1>Todo List</h1>
      <TodoList todos={todos} />
      <AddTodo />
    </div>
  );
}

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

function AddTodo() {
  return (
    <form>
      <input placeholder="Add todo" />
      <button type="submit">Submit</button>
    </form>
  );
}

Note that any JSX element that consists of just one tag (such as our input) must end in a forward slash. If we do not include it, we're going to get a compiler error saying "unterminated JSX contents."

Now the question is: how do we type into our input, submit our form, and have a new todo added to our todos array?

How to Handle Form Submissions in React

To take care of submitting our form, we need to start working with events in React.

In our case, we want to use the "submit" event when our form is submitted by our user and for React to handle that form submission by adding a new todo.

React adds a special prop to the form element called onSubmit. onSubmit accepts a function within a set of curly braces. Let's create a new function, which we will call handleAddTodo.

Note that most functions that handle events in React are prefixed with the word "handle". It's ultimately up to you how you want to name your functions, but this is a helpful convention.

It's important to note that this function should be created within the component itself (AddTodo), not outside of it. When handleAddTodo is passed to the onSubmit prop, it will be called when our form is submitted:

// src/App.js
import "./styles.css";

// ...

function AddTodo() {
  function handleAddTodo() {}

  return (
    <form onSubmit={handleAddTodo}>
      <input placeholder="Add todo" />
      <button type="submit">Submit</button>
    </form>
  );
}

How to Prevent Default Form Behavior

When we click the submit button or hit the return key, data from the submit event is passed automatically to our function that's connected to onSubmit. We receive that event data in the parameters of handleAddTodo.

The first thing that we want to do with this event is call a method on it called .preventDefault(). This method prevents the default action whenever we submit a form:

// src/App.js
import "./styles.css";

// ...

function AddTodo() {
  function handleAddTodo(event) {
    event.preventDefault();
  }

  return (
    <form onSubmit={handleAddTodo}>
      <input placeholder="Add todo" />
      <button type="submit">Submit</button>
    </form>
  );
}

Whenever we submit a form, by default, the page is refreshed. We don't want that behavior with React – we want JavaScript to control whatever happens next.

After preventing a refresh, we want to get access to what was typed into the input to create a new todo with it. How do we do that?

How to Access Form Data on Submit

The way that we get access to all of the elements within our form is with the help of the property event.target.elements.

First of all, this will give us the event target, which is the form itself. elements is a property that will give us all of the elements within that form, including our input and our submit button.

If we were to console.log event.target.elements right now, submit our form, and look at our console, we see just an object with a couple of properties, one called "0", and one called "1".

This isn't very helpful to us, although we do see that it is our input and our button:

Instead, we want to get what was typed into our input.

To do so, we can add either an "id" or a "name" attribute to our input. Let's add the name attribute with a value of "addTodo". When we hit submit again, this will give us a new property on the elements object also called addTodo. From that reference, we can very easily get what was typed into it.

This allows us to use event.target.elements.addTodo.value to get what was typed in whatever text was typed in. When we do so, when we type text into our input, and hit submit, we see it logged to the console:

Now that we have our text, we'll put it in a variable called "text". Using this, we want to create a new todo.

We know that each todo is an object and it has to consist of the properties id, text, and done. Let's create a variable todo and that will be equal to a new object where the id will be 4, the text will be equal to the text that we're getting from the elements object, and we can set done to false.

By default, new todos that are added are not going to be done:

// src/App.js
import "./styles.css";

//...

function AddTodo() {
  function handleAddTodo(event) {
    event.preventDefault();
    const text = event.target.elements.addTodo.value;
    const todo = {
      id: 4,
      text,
      done: false
    };
  }

  return (
    <form onSubmit={handleAddTodo}>
      <input name="addTodo" placeholder="Add todo" />
      <button type="submit">Submit</button>
    </form>
  );
}

And finally, the big question is, how do we add this todo to our array, todos?

Introduction to State in React

This is where the concept of state comes in.

Right now we're dealing with static data – there is no real way to update this todos array. To be clear, there is a way to do it using JavaScript, but what we are not currently able to do is tell React, even if we were to update it, that it needs to re-render this list.

In other words, to perform an update to our data and then show us the updated data in our view. So while we could update the data, we also need React to show our users the updated data.

State is required to fix our problem.

State is a means of managing our application data and also allows React to update our UI (user interface) in response to data changes.

How to Manage State in React with the useState Hook

We can manage state in React using the useState hook. To use the useState hook, the first thing that we need to do is import React up at the top, because useState comes from the core React library.

After that, we can simply call the useState hook up at the top of our app component. Once we call useState just like a normal function, we will pass in our entire array of todos as our initial data. Our application will break for a moment since we're no we're no longer showing our todos just yet.

useState returns an array with two elements:

1. The initial value we called useState with (our array of todos) and this becomes our state variable
2. A special function that allows us to update what is stored in the state variable

We can destructure the values that are returned from useState by adding a set of array brackets to immediately get the values that are returned from it. First the state and second, the function to update the state:

We'll call our state variable todos and the setter to manage our state setTodos.

All we have to do to update our state is to pass it, whatever we want the new state to be. This setTodos function is going to be passed down to our AddTodo component, so let's add that as a prop of the same name. We'll also destructure setTodos from our props object within AddTodo.

And finally, we can call setTodos at the bottom of handleAddTodo. What's great about this function is instead of having to pass down the todos array as well, this function can give us the previous state with the help of a function that we can receive inside of it:

This may seem strange at first, but within setTodos we get access to the previous todo data. If we write an arrow function or any function for that matter, we can simply provide what we want the new state to be.

The benefit of being able to access the previous state variable's value directly within the setter function is that it prevents us from having to pass down the entire todos state variable as an additional prop to every component in which we want to update its value.

If we wanted to empty our todos state, we could just return an empty array right here. If we were to submit our form, we would see that all of our todos were removed.

Once we submit our form, state is updated, and our app is re-rendered as a result.

Re-renders in React

Note that any re-render within a parent component will cause any child components to re-render. That means whenever our todo data is updated, the TodoList component (a child of the App component) is updated with that new data.

If we go back to handleAddTodo, we can take our previous todos and use the .concat() method to add this new todo to our array in state. All we have to do is return this expression.

Let's add a new todo, such as "Balance Checkbook." Once we hit submit, we see that immediately added to our list:

Now there's one problem here: we aren't clearing out our input after our form is submitted.

This means if we wanted to add another todo we would have to manually clear it out. How do we take this input's value and clear it out?

React refs and useRef

To perform common actions such as clearing out an input's value or focusing our input we can use what's called a ref.

A ref is a feature that React provides to reference to a given DOM element.

In this case, we want a reference to this input element with the name of "addTodo."

Just like our state, we can work with refs by calling the appropriate React hook. To create a ref, we just need to call React.useRef() at the top of AddTodo. We don't have to pass it an initial value, but we can give it a default value if we needed to.

We will call this created ref inputRef. Using inputRef, we can create a reference to our input element which we can access wherever we like by using the built-in ref prop by setting ref={inputRef}:

// src/App.js
import React from "react";
import "./styles.css";

//...

function AddTodo({ setTodos }) {
  const inputRef = React.useRef();

  function handleAddTodo(event) {
    event.preventDefault();
    const text = event.target.elements.addTodo.value;
    const todo = {
      id: 4,
      text,
      done: false
    };
    setTodos((prevTodos) => {
      return prevTodos.concat(todo);
    });
  }

  return (
    <form onSubmit={handleAddTodo}>
      <input name="addTodo" placeholder="Add todo" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

What does this do? It allows us within handleAddTodo to use the property inputRef.current, which contains the input element itself. If we were to log input.ref.current, we would see our input element.

We have a direct reference to our input, which means we access any property that we like off of it. In our case, we want to take the value of the input on the value property. To clear the value from our input, we can just mutate inputRef directly by setting value to an empty string:

Whenever we hit submit, our input is cleared out without having to clear it out ourselves manually.

Essential Rules of React Hooks

Since useRef is another React hook, we're starting to see some common features among React hooks. They are often prefixed with the word "use". In fact, most all React hooks have this prefix to denote that they are hooks and should be used as such.

Additionally, React hooks are called up at the very top of function components. Hooks cannot be used within class components. And finally, hooks cannot be conditional (that is, used within an if statement).

But as you can see, there's nothing too special about React hooks. They operate very much like regular JavaScript functions.

How to Mark Todos as Done with onClick

After creating todos, we want to toggle them done – to strike through them if we've finished a given todo. How do we add this feature?

If we go back to our list item, within TodoList, we can see what that will look like by applying some inline styles. We saw how to add styles through classes. For styles that we want to apply inline to any given element, we cannot use the same syntax as we would with normal HTML.

If we tried to using the HTML syntax, we're going to get an error telling us "the style prop expects style properties within an object, not within a string":

To fix this, we will provide an object. We need to provide this object within another set of curly braces. Then, we will provide any property like we would in a normal JavaScript object to apply this strike through style.

For each of our list items, we can set the property textDecoration to "line-through":

We do not want every item to be struck through, we only want this to be applied if a given todo is done. How do we do that?

We can use a normal JavaScript conditional, in particular a ternary, to say that if a given todo's property done is true, then we want to apply the strike through value for text decoration, otherwise not.

If we change one of our todos array to have a done value of true, we see that that style rule is applied:

// src/App.js

//...

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li
          style={{
            textDecoration: todo.done ? "line-through" : ""
          }}
          key={todo.id}
        >
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

//...

How do we actually toggle that todo?

We might want our user to click or double click on our todo in order to strike through it. That means we want to see how to register and handle a new type of event – a click event.

To handle a click event with React we provide the onClick prop to a given element for which we want to register that event. In this case, it's the li element.

Once again, we need to connect it to a function to handle our click event. We're going to call this handleToggleTodo and create it within our TodoList component. In this case, our function that we use to handle the event doesn't have to receive any event data. This function will handle updating our todo's state.

We want handleToggleTodo to go through the todos array and see if the one that the user has clicked on exists in our array. If so, its done value can be toggled to the opposite boolean value.

To receive the appropriate todo data for the appropriate list item that is clicked on, we can call handleToggleTodo as an inline arrow function and pass the todo data as an argument:

// src/App.js

//...

function TodoList({ todos }) {
  function handleToggleTodo(todo) {}

  return (
    <ul>
      {todos.map((todo) => (
        <li
          onClick={() => handleToggleTodo(todo)}
          style={{
            textDecoration: todo.done ? "line-through" : ""
          }}
          key={todo.id}
        >
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

//...

To update our todos state, we'll pass down setTodos to our TodoList component. We'll pass down setTodos as a prop to TodoList, and destructure it from the props object.

Once again, we can call setTodos and get access to the previous todos by including an inner function. First, what we can do is take our entire todos array and map over it with the .map() array function.

In the inner function passed to map, we will check that the todos id we're mapping over is equal to the todo that we've clicked on. If so, we return a new object with all of the previous todo's properties, but with done toggled to its opposite boolean value:

// src/App.js

//...

function TodoList({ todos, setTodos }) {
  function handleToggleTodo(todo) {
    // confused by this code? Here's what it says:

    // if a todo's id is equal to the one we clicked on,
    // just update that todo's done value to its opposite,
    // otherwise, do nothing (return it)

    const updatedTodos = todos.map((t) =>
      t.id === todo.id
        ? {
            ...t,
            done: !t.done
          }
        : t
    );
  }

  return (
    <ul>
      {todos.map((todo) => (
        <li
          onDoubleClick={() => handleToggleTodo(todo)}
          style={{
            textDecoration: todo.done ? "line-through" : ""
          }}
          key={todo.id}
        >
          {todo.text}
          <DeleteTodo todo={todo} setTodos={setTodos} />
        </li>
      ))}
    </ul>
  );
}

//...

Otherwise, if that todo that we're iterating over is not the one that we clicked on, we just want to return it (without changing it). This updated array is what we'll pass to setTodos to update our state.

If we click on a todo, we toggle it done. If we click on it again, it's toggled back to undone:

For this to work appropriately, to see that a past todo's id is equal to the todo that we're clicking on, we need to make sure that each todo's id is unique.

Instead of setting each new todo to have an id of 4, we can just use Math.random() to make a semi-random value and ensure there are no list items with the same id.

Finally, as an alternative to onClick, we can use another event prop, onDoubleClick, in the event that users accidentally click a given todo. Now if a user double clicks a list item, only then do we toggle it done.

How to Handle Deleting Todos

The final bit of functionality that we're looking for is to be able to delete a given todo.

We can add that functionality within TodoList by adding another nested component. Underneath our todo text, we'll add a new component: DeleteTodo. Let's declare this new component above where we declared AddTodo.

What will this component consist of? In it, we will return a span, which will function like a button for us. A user can click on this and delete a given todo.

If you want a non-button element to operate like a button, we need to make its "role" property set to "button".

To our span, let's add some style rules – we can give it a color of red, make it bold, and separate it from the todo text by setting marginLeft: 10. What's neat about the style object is that we don't have to say 10 pixels as a string – we can use the value 10 or include any integer that we like.

Here is the code for our DeleteTodo component so far:

To delete a todo, we want to be able to click on it and show a confirmation dialog. If the user confirms they want to delete it, only then is the todo removed.

Since we're mapping over each todo item, including DeleteTodo, we can pass down a prop called just todo with each todo's data on it.

In DeleteTodo, on our span element, we want to add an onClick to handle deleting our todo. To handle this, we will call a new function: handleDeleteTodo.

Using this function, we first want to show a confirmation dialog. We can do so by saying window.confirm() with the message, "Do you want to delete this"? window.confirm is going to return a value of true or false based on whether the user has confirmed the dialog or not. We'll put the result of this action in a variable called confirmed:

// src/App.js
// ...

function TodoList({ todos, setTodos }) {
  // ...

  return (
    <ul>
      {todos.map((todo) => (
        <li
          onDoubleClick={() => handleToggleTodo(todo)}
          style={{
            textDecoration: todo.done ? "line-through" : ""
          }}
          key={todo.id}
        >
          {todo.text}
          {/* pass todo data down as a prop to DeleteTodo */}
          <DeleteTodo todo={todo} />
        </li>
      ))}
    </ul>
  );
}

function DeleteTodo({ todo, setTodos }) {
  function handleDeleteTodo() {
    const confirmed = window.confirm("Do you want to delete this?");
    if (confirmed) {
      // take care of deleting the todo
    }
  }

  return (
    <span
      onClick={handleDeleteTodo}
      role="button"
      style={{
        color: "red",
        fontWeight: "bold",
        marginLeft: 10,
        cursor: "pointer"
      }}
    >
      x
    </span>
  );
}

//...

If confirmed is true, only then do we want to delete the todo.

To do that, we need to use setTodos once again. We'll pass it down one more level from TodoList to the DeleteTodo component and destructure it from the props object.

Then, within handleDeleteTodo, we can call it and use the inner function to get the previous todos. To remove the todo that a user has clicked on, we can filter through this array to make sure that we are removing the one that the user selected.

To do so, we make sure all the todos in our array do not have an id equal to the one we are attempting to delete:

// src/App.js

// ...

function DeleteTodo({ todo, setTodos }) {
  function handleDeleteTodo() {
    const confirmed = window.confirm("Do you want to delete this?");
    if (confirmed) {
      setTodos((prevTodos) => {
        return prevTodos.filter((t) => t.id !== todo.id);
      });
    }
  }

  return (
    <span
      onClick={handleDeleteTodo}
      role="button"
      style={{
        color: "red",
        fontWeight: "bold",
        marginLeft: 10,
        cursor: "pointer"
      }}
    >
      x
    </span>
  );
}

// ...

Now if we attempt to delete one of our todos, we see our confirmation dialog, we hit "ok", and immediately it's removed from our list.

If we delete all of our todos, we no longer see anything. If we want to tell our user there are no todos in the list when the array is empty, let's head up to our TodoList component.

If we have an empty todos array, we can add a conditional above our return and check if our array's length is equal to 0. If so, we will display a paragraph element with the text "No todos left":

// ...

function TodoList({ todos, setTodos }) {
  function handleToggleTodo(todo) {
    const updatedTodos = todos.map((t) =>
      t.id === todo.id
        ? {
            ...t,
            done: !t.done
          }
        : t
    );
    setTodos(updatedTodos);
  }

  if (!todos.length) {
    return <p>No todos left!</p>;
  }

  return (
    <ul>
      {todos.map((todo) => (
        <li
          onDoubleClick={() => handleToggleTodo(todo)}
          style={{
            textDecoration: todo.done ? "line-through" : ""
          }}
          key={todo.id}
        >
          {todo.text}
          <DeleteTodo todo={todo} setTodos={setTodos} />
        </li>
      ))}
    </ul>
  );
}

// ...

Congratulations!

You now have a working todo app that has full CRUD functionality that can create, read, update, and delete todos.

You've been able to see how many of the major React concepts work firsthand and you're now in a great position to start building your own React applications.

If you would like to take a look at our final app code, you can see it here.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

In this guide, I've put together seven of the top ways that you can start writing cleaner React code today to make building React projects and reviewing your code much easier.

In general, learning how to write cleaner React code will make you a more valuable and overall happier React developer, so let's jump right in!

1. Make use of JSX shorthands

How do you pass a value of true to a given prop?

In the example below, we're using the prop showTitle to display the title of our app within a Navbar component.

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar showTitle={true} />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>My Special App</h1>}
    </div>
  )
}

Do we need to explicitly set showTitle to the Boolean true? We don't! A quick shorthand to remember is that any prop provided on a component has a default value of true.

So if we add the prop showTitle on Navbar, our title element will be shown:

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar showTitle />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>My Special App</h1>} // title shown!
    </div>
  )
}

Another useful shorthand to remember involves passing string props. When you're passing a prop value that's a string, you don't need to wrap it in curly braces.

If we are setting the title of our Navbar, with the title prop, we can just include its value in double quotes:

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

2. Move unrelated code into a separate component

Arguably the easiest and most important way to write cleaner React code is to get good at abstracting our code into separate React components.

Let's look at the example below. What is our code doing?

Our app is displaying a Navbar component. We are iterating over an array of posts with .map() and displaying their title on the page.

// src/App.js

export default function App() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <main>
      <Navbar title="My Special App" />
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            {post.title}
          </li>
        ))}
      </ul>
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

How can we make this cleaner?

Why don't we abstract the code that we're looping over – our posts – and display them in a separate component, which we'll call FeaturedPosts.

Let's do that and take a look at the result:

// src/App.js

export default function App() {
 return (
    <main>
      <Navbar title="My Special App" />
      <FeaturedPosts />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

As you can see, we can now just look at our App component. By reading the names of the components within it, Navbar and FeaturedPosts, we see exactly what our app is displaying.

3. Create separate files for each component

Going off of our previous example, we are including all of our components within a single file, the app.js file.

Similar to how we abstract code into separate components to make our app more readable, to make our application files more readable, we can put each component that we have into a separate file.

This, again, helps us separate concerns in our application. This means that each file is responsible for just one component and there's no confusion where a component comes from if we want to reuse it across our app:

// src/App.js
import Navbar from './components/Navbar.js';
import FeaturedPosts from './components/FeaturedPosts.js';

export default function App() {
  return (
    <main>
      <Navbar title="My Special App" />
      <FeaturedPosts />
    </main>
  );
}

// src/components/Navbar.js

export default function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

// src/components/FeaturedPosts.js

export default function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Additionally, by including each individual component within its own file, we avoid one file becoming too bloated. We could easily see our app.js file becoming very large if we wanted to add all of our components into that file.

4. Move shared functionality into React hooks

Taking a look at our FeaturedPosts component, let's say instead of displaying static posts data, we want to fetch our post data from an API.

We might do so with the fetch API. You can see the result below for that:

// src/components/FeaturedPosts.js

import React from 'react';

export default function FeaturedPosts() {
  const [posts, setPosts] = React.useState([]);      

  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

However, what if we wanted to perform this request for data across multiple components?

Let's say in addition to a FeaturedPosts component we wanted to create a component called just Posts with the same data. We would have to copy the logic that we used to fetch our data and paste it within that component as well.

To avoid having to do that, why don't we just use a new React hook which we could call useFetchPosts:

// src/hooks/useFetchPosts.js

import React from 'react';

export default function useFetchPosts() {
  const [posts, setPosts] = React.useState([]);      

  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return posts;
}

Once we've created this hook in a dedicated 'hooks' folder we can reuse it in whichever components we like, including our FeaturedPosts component:

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

5. Remove as much JavaScript from your JSX as possible

Another very helpful, but often neglected way to clean up our components is to remove as much JavaScript from our JSX as possible.

Let's take a look at the example below:

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={event => {
          console.log(event.target, 'clicked!');
        }} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

We're trying to handle a click event on one of our posts. You can see that our JSX becomes much harder to read. Given that our function is included as an inline function, it obscures the purpose of this component, as well as its related functions.

What can we do to fix this? We can extract the inline function, connected to the onClick into a separate handler, which we can give a an appropriate name like handlePostClick.

Once we do, our JSX becomes readable once again:

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  function handlePostClick(event) {
    console.log(event.target, 'clicked!');   
  }

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={handlePostClick} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

6. Format inline styles for less bloated code

A common pattern for React developers is to write inline styles in their JSX. But once again, this makes our code harder to read and harder to write additional JSX:

// src/App.js

export default function App() {
  return (
    <main style={{ textAlign: 'center' }}>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div style={{ marginTop: '20px' }}>
      <h1 style={{ fontWeight: 'bold' }}>{title}</h1>
    </div>
  )
}

We want to apply this concept of separation of concerns to our JSX styles by moving our inline styles into a CSS stylesheet, which we can import into whatever component we like.

An alternative way to rewrite your inline styles is by organizing them into objects. You can see what such a pattern would look like below:

// src/App.js

export default function App() {
  const styles = {
    main: { textAlign: "center" }
  };

  return (
    <main style={styles.main}>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  const styles = {
    div: { marginTop: "20px" },
    h1: { fontWeight: "bold" }
  };

  return (
    <div style={styles.div}>
      <h1 style={styles.h1}>{title}</h1>
    </div>
  );
}

7. Reduce prop drilling with React context

Another essential pattern to employ for your React projects (especially if you have common properties that you want to reuse across your components, and you find yourself writing lots of duplicate props) is to use React Context.

For example, if we wanted to share user data across multiple components, instead of multiple repeat props (a pattern called props drilling), we could use the context feature that's built into the React library.

In our case, if we wanted to reuse user data across our Navbar and FeaturedPosts components, all we would need to do is wrap our entire app in a provider component.

Next, we can pass the user data down on the value prop and consume that context in our individual components with the help of the useContext hook:

// src/App.js

import React from "react";

const UserContext = React.createContext();

export default function App() {
  const user = { name: "Reed" };

  return (
    <UserContext.Provider value={user}>
      <main>
        <Navbar title="My Special App" />
        <FeaturedPosts />
      </main>
    </UserContext.Provider>
  );
}

// src/components/Navbar.js

function Navbar({ title }) {
  const user = React.useContext(UserContext);

  return (
    <div>
      <h1>{title}</h1>
      {user && <a href="/logout">Logout</a>}
    </div>
  );
}

// src/components/FeaturedPosts.js

function FeaturedPosts() {
  const posts = useFetchPosts();
  const user = React.useContext(UserContext);

  if (user) return null;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Conclusion

I hope you find this guide useful when you're trying to improve your own React code to make it cleaner, easier to read, and ultimately more enjoyable to create your React projects.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

In this article, we're going to see how to use the JavaScript library React as a way to add convenience and reusability to our websites.

React is a powerful tool for any developer who knows HTML and wants to build more organized and dynamic websites, faster.

Let's get started!

Why should I use React instead of HTML?

React arrived in 2013 as a better way to build web apps with JavaScript. It's often referred to as a library for building UIs, short for "user interfaces".

What makes React such a desirable library to learn is that it doesn't replace HTML.

It takes advantage of HTML's popularity and strength as the most popular programming language, by letting you use a very similar syntax to HTML to build interfaces and add dynamic features to it using JavaScript.

How to build a user interface with HTML

In light of React's versatility, we can recreate any site or user interface that we see on the web.

For this lesson, let's remake part of an app that you likely use every day—Google Search.

This may seem ambitious if you are brand new to React, but it requires a knowledge of only two simple concepts: HTML and basic JavaScript functions.

What's the way to build out a user interface without knowing React or even JavaScript?

By using HTML elements as part of a simple HTML document.

Here's how we would show the first three results that come up when you search for "reactjs" in Google.

<!DOCTYPE html>
<html>
  <head>
    <title>reactjs Search Results</title>
  </head>

  <body>
    <section>
      <div>
        <a href="https://reactjs.org"
          >React - A JavaScript Library for Building User Interfaces</a
        >
        <div>
          <h3>reactjs.org</h3>
        </div>
        <div>
          React makes it painless to create interactive UIs.
        </div>
      </div>
      <div>
        <a href="https://en.wikipedia.org/wiki/React_(web_framework)"
          >React (web framework) - Wikipedia</a
        >
        <div>
          <h3>https://en.wikipedia.org › wiki › React_(web_framework)</h3>
        </div>
        <div>
          React is a JavaScript library for building user interfaces.
        </div>
      </div>
      <div>
        <a href="https://twitter.com/reactjs?lang=en"
          >React (@reactjs) | Twitter</a
        >
        <div>
          <h3>https://twitter.com › reactjs</h3>
        </div>
        <div>
          The latest Tweets from React (@reactjs).
        </div>
      </div>
    </section>
  </body>
</html>

Using static HTML alone would be fine if we only needed to show a few links.

But how could we display 100s or 1000s of links this way, all with different data, as a search engine might need to do?

What's a better, that is, a simpler and more extensible way of writing this?

HTML alone is not going to be the answer. We'll need a way of making our site more dynamic to display as many links as we need.

When it comes to adding behavior to a site, we need JavaScript. And since our goal is to build great apps with JavaScript, we know to use React.

How to upgrade any HTML site to a React app

Let's turn our static HTML into a dynamic React app.

Sounds difficult? It's simpler than you think.

We can build a React app out of a single HTML document. All we have to do is bring React in with the following external scripts.*

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

The first is for building our React app, and the second is for displaying, or rendering the React app in the browser.

The first is React, the second ReactDOM.

The third script is to bring in a tool called Babel. We'll touch on what that does in a bit.

Here's what our code looks like at this point:

<!DOCTYPE html>
<html>
  <head>
    <title>reactjs Search Results</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <!-- our script must have type="text/babel" for Babel to work -->
    <script type="text/babel">
      // React code will go here
    </script>
  </body>
</html>

... and it's almost a React app.

Note that we have a script where we can write our React code, but no HTML.

Let's fix that.

How to create and render our React app

Every React app must have what's known as an entry point.

The entry point is an HTML element where we insert our React application into the page.

The conventional entry point is a div with the id of root (<div id="root"></div>).

We'll add that, then use the render() function from ReactDOM to do the work of rendering the app.

The first is the app itself, meaning our HTML from before, and the second must reference our entry point. We can create that reference by saying document.getElementById('root').

So now we have everything we need to run our React app:

<!DOCTYPE html>
<html>

  <head>
    <title>reactjs Search Results</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root">

    </div>
    <!-- our script must have type="text/babel" for Babel to work -->
    <script type="text/babel">
      ReactDOM.render(
      <section>
      <div>
        <a href="https://reactjs.org"
          >React - A JavaScript Library for Building User Interfaces</a
        >
        <div>
          <h3>reactjs.org</h3>
        </div>
        <div>
          React makes it painless to create interactive UIs.
        </div>
      </div>
      <div>
        <a href="https://en.wikipedia.org/wiki/React_(web_framework)">React (web framework) - Wikipedia</a>
        <div>
          <h3>https://en.wikipedia.org › wiki › React_(web_framework)</h3>
        </div>
        <div>
          React is a JavaScript library for building user interfaces.
        </div>
      </div>
      <div>
        <a href="https://twitter.com/reactjs?lang=en">React (@reactjs) | Twitter</a>
        <div>
          <h3>https://twitter.com › reactjs</h3>
        </div>
        <div>
          The latest Tweets from React (@reactjs).
        </div>
      </div>
    </section>, document.getElementById('root'))
    </script>
  </body>

</html>

And if we look at our result, it works like before. Perfect!

Now let's use React to improve our site by dynamically displaying our links.

How to make HTML reusable with React components

If we examine our HTML structure, each link consists of the same parts. Each has a URL, a title, a shorter URL, and an excerpt. For each link, we have to repeat the same HTML elements again and again.

In programming, if you're having to repeat yourself a great deal, it's likely a sign that your code can be simplified and shortened in some way. As programmers, we always strive to repeat ourselves as little as possible.

We try to write code that is DRY, where you "don't repeat yourself."

React is, at core, JavaScript plus some features to help us build apps.

And since we're working with JavaScript, what is a JavaScript feature that allows us to create or output something as many times as we like?

A function.

Let's create one here, and we'll call it Link.

function Link() {
  // create link HTML output
}

The reason being that we want this function to return or output a link's HTML every time we call it.

To do that, let's return our first link's HTML:

function Link() {
  return (
    <div>
      <a href="https://reactjs.org">
        React - A JavaScript Library for Building User Interfaces
      </a>
      <div>
        <h3>reactjs.org</h3>
      </div>
      <div>React makes it painless to create interactive UIs.</div>
    </div>
  );
}

So now let's use it to display each link it returns.

To do so, instead of calling it like Link(), in React, we can write it like it was an HTML element <Link />.

If you've seen this for the first time it might bend your brain a little bit.

Here we are using HTML syntax, but we are calling a JavaScript function! You'll get comfortable with it as you see this more often.

(Also, did you notice that we didn't have to use an opening and closing tag, like it was a normal HTML element? More about that in a minute.)

How does React convert HTML-looking syntax into JavaScript?

It does so with the help of a special tool called Babel, the third script we added. You can see how it works in action here:

What's happening?

Babel, a JavaScript tool called a compiler, converts ("compiles") this code that looks like HTML into valid JavaScript.

What is this HTML-like syntax? JSX

This HTML, which is in fact JavaScript, is called JSX, which stands for "JavaScript XML."

XML, if you're not familiar, is a slightly stricter way of writing HTML.

Stricter means that we need to use a closing forward slash for elements with one tag. For example: <input> in HTML as valid JSX is <input />.

So to reiterate, JSX is not valid JavaScript code.

Meaning, you couldn't put JSX in a browser and expect it to work. We need both a compiler, like Babel, to convert it into valid JavaScript, and then React to use that created JavaScript.

So now to use our custom Link element, we remove all three of the links' HTML and replace them with three Links, like so:

<!DOCTYPE html>
<html>
  <head>
    <title>reactjs Search Results</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      ReactDOM.render(
        <section>
          <Link />
          <Link />
          <Link />
        </section>,
        document.getElementById("root")
      );
    </script>
  </body>
</html>

And if we look at our result, we do indeed have three links.

This is the power of React: it takes the reusability of JavaScript functions, but allows us to use them like they were HTML.

We refer to these custom elements made with JavaScript as components.

So we've gained a great deal of readability here by using components. We don't have any confusion about what we're looking at if we've named our components well. No need to read through a ton of HTML elements to see what the app displays.

We see immediately that we have three custom links.

The anatomy of a function component

Now that we know how components operate, let's take a second look at our Link function component:

Our code may look pretty straightforward, but there are a few subtle things you should take note of here:

function Link() {
  return (
    <div>
      <a href="https://reactjs.org">
        React - A JavaScript Library for Building User Interfaces
      </a>
      <div>
        <h3>reactjs.org</h3>
      </div>
      <div>React makes it painless to create interactive UIs.</div>
    </div>
  );
}

The function component name is capitalized: Link instead of link. This is a required naming convention for React components. We use a capitalized name to distinguish components from normal functions. Note that functions which return JSX are not the same as normal JavaScript functions.

Notice how the JSX we are returning has a set of parentheses around it. As you are first writing your React code, it's easy to forget these parentheses, which will result in an error. Wrap your JSX in parentheses if it span more than one line.

Finally, our Link function returns some JSX. Every React component must return either JSX elements or other React components. And yes, React components can return other components.

So since React components can return other React components, we can make an App component.

This App component will contain our entire set or tree of components and will show of what our app consists.

And with an App component, this makes our render method much easier to read:

<!DOCTYPE html>
<html>

  <head>
   ...
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      function Link() {
        return (
          <div>
            <a href="https://reactjs.org">
              React - A JavaScript Library for Building User Interfaces
            </a>
            <div>
              <h3>reactjs.org</h3>
            </div>
            <div>React makes it painless to create interactive UIs.</div>
          </div>
        );
      }

      function App() {
        return (
          <section>
            <Link />
            <Link />
            <Link />
          </section>
        );
      }

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>

</html>

We see from this code that React components have a hierarchy or order like HTML elements. As a result, we can refer to different parts of our component tree as either parents or children.

In this case, for example, to each rendered Link component, App is the parent. To App, all three Links are its children.

Note that whenever we render or return JSX, there can only be one parent component. But a parent component can have as many child components (as well as elements) as needed.

When we look at the output of our code, you've likely noticed the following problem:

We have three instances of the same link! That's because we are using the same data for each link we create. Yet we know each link has different data—a different title, URL, short URL, and excerpt.

So how do we pass in unique data to our components?

How to pass dynamic data to components: Props

If we wanted to pass some title text to a normal JavaScript function we would do so like this:

Link("Our link title here");

But how to we do pass data to function components?

Normal HTML elements accept data in the form of attributes. But unlike HTML attributes, attributes aren't recognized on React components. The data doesn't stay on the component itself. Where do they go?

As arguments to the function component. Again, this is something we're familiar with since we know the basics of functions.

We know that functions output data using return and accept data with arguments.

If we had an HTML element, say a div with an attribute called "title", this code would be invalid. HTML doesn't have a title attributes for any of its elements:

<div title="Our link title here"></div>

But if we created this title "attribute" on our Link component:

<link title="Our link title here" />

This is valid. And since we wrote title like an attribute on our component, it is passed to the Link function as an argument called "title".

In code we can think of it like this:

const linkData = { title: "Our link title here" };

Link(linkData);

Notice that the linkData argument is an object.

React collects and organizes the data passed to a given component as a single object.

The name for data passed to a component, such as title, is props.

All prop values exist within the function component itself on a props object.

And since our goal is to use our title prop within our Link component, we can write the following:

function Link(props) {
  return <a>{props.title}</a>;
}

We use the curly braces {} syntax to insert the title prop from props.title wherever we want. And the same applies to any other prop passed down to a component.

These curly braces allow us to insert or interpolate dynamic values wherever we need.

Now we have everything we need to fix our links. For each of the Link components, we need to pass down their title, URL, short URL, and excerpt as individual props:

<!DOCTYPE html>
<html>
  <head>
    <title>reactjs Search Results</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      function Link(props) {
        return (
          <div>
            <a href={props.url}>{props.title}</a>
            <div>
              <h3>{props.shortUrl}</h3>
            </div>
            <div>{props.excerpt}</div>
          </div>
        );
      }

      function App() {
        return (
          <section>
            <Link
              title="React - A JavaScript Library for Building User Interfaces"
              url="https://reactjs.org"
              // props consisting of two or more words must be written in camelcase
              shortUrl="reactjs.org"
              excerpt="React makes it painless to create interactive UIs."
            />
            <Link
              title="React (web framework) - Wikipedia"
              url="https://en.wikipedia.org/wiki/React_(web_framework)"
              shortUrl="en.wikipedia.org › wiki › React_(web_framework)"
              excerpt="React is a JavaScript library for building user interfaces."
            />
            <Link
              title="React (@reactjs) | Twitter"
              url="https://twitter.com/reactjs"
              shortUrl="twitter.com › reactjs"
              excerpt="The latest Tweets from React (@reactjs)."
            />
          </section>
        );
      }

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

Looking at our output, we still get the same result.

But there was a bit of a trade-off here. Through props, we were able to make our Link component much more readable.

Now we can make any Link based off of whatever (valid) prop data we give it.

But now you can see that our App component got a lot bigger by providing the prop values immediately on each Link.

Isn't there a way that we can move all this data somewhere else?

How to separate the data from the interface

Let's move our data out of the component tree and put it somewhere more convenient, but still use the data as needed.

To do that we'll make an array of objects with the link data to pass down to the Link components through props.

This allows us to put our data wherever we want, in another JavaScript file even. The benefit is that it doesn't clutter up our components anymore.

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      const linkData = [
        {
          title: "React - A JavaScript Library for Building User Interfaces",
          url: "https://reactjs.org",
          shortUrl: "reactjs.org",
          excerpt: "React makes it painless to create interactive UIs."
        },
        {
          title: "React (web framework) - Wikipedia",
          url: "https://en.wikipedia.org/wiki/React_(web_framework)",
          shortUrl: "en.wikipedia.org › wiki › React_(web_framework)",
          excerpt: "React is a JavaScript library for building user interfaces."
        },
        {
          title: "React (@reactjs) | Twitter",
          url: "https://twitter.com/reactjs",
          shortUrl: "twitter.com › reactjs",
          excerpt: "The latest Tweets from React (@reactjs)."
        }
      ];

      function Link(props) {
        return (
          <div>
            <a href={props.url}>{props.title}</a>
            <div>
              <h3>{props.shortUrl}</h3>
            </div>
            <div>{props.excerpt}</div>
          </div>
        );
      }

      function App() {
        return (
          <section>
            <Link title="" url="" shortUrl="" excerpt="" />
            <Link title="" url="" shortUrl="" excerpt="" />
            <Link title="" url="" shortUrl="" excerpt="" />
          </section>
        );
      }

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

Now how do we display each Link with its data using the linkData array?

If you've worked with arrays before, to get each element we loop or iterate over the array. Here, for each loop, we can pass the props data down to the Link component again.

This pattern is a very common one in React. So much so that there is a special array method that we can use to perform this iteration, called .map(). It is not the same as the map method in regular JavaScript—it is for working with JSX and components alone.

<!DOCTYPE html>
<html>

  <head>
    ...
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      const linkData = [
        {
          title: "React - A JavaScript Library for Building User Interfaces",
          url: "https://reactjs.org",
          shortUrl: "reactjs.org",
          excerpt: "React makes it painless to create interactive UIs."
        },
        {
          title: "React (web framework) - Wikipedia",
          url: "https://en.wikipedia.org/wiki/React_(web_framework)",
          shortUrl: "en.wikipedia.org › wiki › React_(web_framework)",
          excerpt: "React is a JavaScript library for building user interfaces."
        },
        {
          title: "React (@reactjs) | Twitter",
          url: "https://twitter.com/reactjs",
          shortUrl: "twitter.com › reactjs",
          excerpt: "The latest Tweets from React (@reactjs)."
        }
      ];

      function Link(props) {
        return (
          <div>
            <a href={props.url}>{props.title}</a>
            <div>
              <h3>{props.shortUrl}</h3>
            </div>
            <div>{props.excerpt}</div>
          </div>
        );
      }

      function App() {
        return (
          <section>
            {linkData.map(function(link) {
              return (
                <Link
                  key={link.url}
                  title={link.title}
                  url={link.url}
                  shortUrl={link.shortUrl}
                  excerpt={link.excerpt}
                />
              );
            })}
          </section>
        );
      }

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>

</html>

By moving our data out of the UI and displaying each link using .map(), we have a far simpler React app that can accept as many links as we choose.

Finally, note in our code that where we are mapping over our linkData, the entire expression is surrounded by our curly braces. Be aware that JSX allows us to insert any valid JavaScript expression between curly braces.

How to build apps the "React" way

What was the point of covering these various patterns?

Not only to cover the basics of JSX and how React combines HTML and JavaScript, but also to show you how React developers think.

How do you think like a React developer? By knowing how to break down your UI into reusable components.

When a React developer plans out an application they want to make, they start by identifying all individual parts of the app and seeing what parts can be made into reusable components.

We do that by seeing if each part has the same visual (HTML) structures and accept the same or very similar sets of data (through props).

Now to come full circle, let's take a new look at the starting UI that we wanted to recreate at the beginning.

If we were to look at this like a React developer, it might look something like this:

The better you get with using components, the faster you'll be able to build your own websites and applications with ease.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

In this article, we'll explore:

• What is JSX in React and how to use it
• How JSX is transformed to React.createElement
• What is a JSX expression and what we can write inside it
• Common issues in JSX

And much more. So let's get started.

What is JSX?

JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together.

Take a look at the below code:

const jsx = <h1>This is JSX</h1>

This is simple JSX code in React. But the browser does not understand this JSX because it's not valid JavaScript code. This is because we're assigning an HTML tag to a variable that is not a string but just HTML code.

So to convert it to browser understandable JavaScript code, we use a tool like Babel which is a JavaScript compiler/transpiler.

You can set up your own babel configuration using Webpack as I show in this article. Or you can use create-react-app which internally uses Babel for the JSX to JavaScript conversion.

We can use the above JSX in our React code like this:

class JSXDemo extends React.Component {
    render() {
        return <h1>This is JSX</h1>;
    }
}

ReactDOM.render(<JSXDemo />, document.getElementById('root'));

Here, we're returning the JSX from the JSXDemo component and rendering that on the screen using the ReactDOM.render method.

Here's a Code Sandbox Demo.

When the Babel executes the above JSX, it converts it to the following code:

class JSXDemo extends React.Component {
    render() {
        return React.createElement("h1", null, "This is JSX");
    }
}

Here's a Code Sandbox Demo.

As you can see in the above Code Sandbox, the code still correctly prints the contents to the screen using React.createElement.

This was the old way of writing code in React – but it's tedious to write the React.createElement every time, even for adding a simple div.

So React introduced the JSX way of writing code which makes code easy to write and understand.

Knowing how to convert JSX to React.createElement is very important as a React developer (it's also a popular interview question).

What is the React.createElement Function?

Every JSX is converted to the React.createElement function call that the browser understands.

The React.createElement has the following syntax:

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

Let’s look at the parameters of the createElement function.

• type can be an HTML tag like h1, div or it can be a React component
• props are the attributes you want the element to have
• children contain other HTML tags or can be a component

The React.createElement call will also be converted to the object representation like this:

{   
 type: 'h1',   
 props: {     
   children: 'This is JSX'   
 }
}

You can see this object representation if you assign the JSX to some local variable and log it as shown below:

class JSXDemo extends React.Component {
    render() {
        const jsx = <h1>This is JSX</h1>;
        console.log(jsx);
        return jsx;
    }
}

ReactDOM.render(<JSXDemo />, document.getElementById('root'));

Here's a Code Sandbox Demo.

You will see the log printed as shown below:

Now, take a look at the below code:

class JSXDemo extends React.Component {
  render() {
    const jsx = <h1 id="jsx">This is JSX</h1>;
    console.log(jsx);
    return jsx;
  }
}

ReactDOM.render(<JSXDemo />, document.getElementById("root"));

Here, we've used the JSX like this:

<h1 id="jsx">This is JSX</h1>

So React, will convert this JSX to the below code:

React.createElement("h1", { id: "jsx" }, "This is JSX");

If there are any attributes added to the HTML tag as in our case, they will be passed as the second parameter for the React.createElement call. The object representation will look like this:

{ 
  type: 'h1', 
  props: { 
   id: 'jsx',
   children: 'This is JSX'
  } 
}

Here's a Code Sandbox Demo.

You will see the log printed as shown below:

Now, let's add some complexity to the JSX to see how it's converted to the React.createElement call.

class JSXDemo extends React.Component {
  handleOnClick = () => {
    console.log("clicked");
  };
  render() {
    return (
      <button id="btn" onClick={this.handleOnClick}>
        Click Here
      </button>
    );
  }
}

ReactDOM.render(<JSXDemo />, document.getElementById("root"));

Here, we've added an onClick handler to the button.

For the above code, the React.createElement call will look like this:

React.createElement("button", {
  id: "btn", 
  onClick: function() {}
}, "Click Here")

Here's a Code Sandbox Demo.

The object representation will look like this:

So from all the above examples, it's clear that JSX is converted to a React.createElement call and it's then converted to its object representation.

If you want to see the JSX to React.createElement conversion code, you can navigate to this application which I created in this article. There you can write JSX code on left and see the converted code on the right side as shown below:

How to Return Complex JSX

Take a look at the below code:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
      <p>This is first JSX Element!</p>
      <p>This is another JSX Element</p>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's a Code Sandbox demo.

Here, we're returning two paragraphs from the App component. But if you run the code, you will get this error:

We're getting an error because React requires adjacent elements to be wrapped in a parent tag.

As we have seen, <p>This is first JSX Element!</p> will be converted to React.createElement("p", null, "This is first JSX Element!") and <p>This is another JSX Element</p> will be converted to React.createElement("p", null, "This is another JSX Element").

The converted code will look like this now:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
            React.createElement("p", null, "This is first JSX Element!"); React.createElement("p", null, "This is another JSX Element");
        );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here we are returning two things from the App component which will not work because there is no parent element to wrap both of them.

To make it work, the obvious solution is to wrap both of them in some parent element, most probably a div like this:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <div>
      <p>This is first JSX Element!</p>
      <p>This is another JSX Element</p>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's a Code Sandbox Demo.

But there are also other ways of making it work.

First, you can try returning it as an array as shown below:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    [<p>This is first JSX Element!</p>,<p>This is another JSX Element</p>]
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's a Code Sandbox Demo.

This will get the job done, but as you can see in the browser console, you will get a warning saying Warning: Each child in a list should have a unique "key" prop.

Because in React, every element in the array (when displayed using JSX) needs to have a unique key added to it.

We can fix it by adding a unique key for the adjacent elements:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    [<p key="first">This is first JSX Element!</p>,<p key="second">This is another JSX Element</p>]
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's a Code Sandbox Demo.

The other way to fix it is by using the React.Fragment component:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <React.Fragment>
      <p>This is first JSX Element!</p>
      <p>This is another JSX Element</p>
    </React.Fragment>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's a Code Sandbox Demo.

React.Fragment was added in React version 16.2 because we always have to wrap multiple adjacent elements in some tag (like div) inside every JSX returned by a component. But that adds unnecessary div tags.

This is fine most of the time but there are certain cases where it's not fine.

For example, if we're using Flexbox, then there is a special parent-child relationship in Flexbox's structure. And adding divs in the middle makes it hard to keep the desired layout.

So using React.Fragment fixes this issue.

Fragments let you group a list of children without adding extra nodes to the DOM.

How to Add Comments to JSX Code

If you have a line of code like this:

<p>This is some text</p>

and you want to add a comment for that code, then you have to wrap that code in JSX expresssion syntax inside the /* and */ comment symbols like this:

{/* <p>This is some text</p> */}

Tip: Instead of manually typing the comment, you can use Cmd + / (Mac) or Ctrl + / shortcut keys to add or remove the comment.

How to Add JavaScript Code in JSX

Up to this point, we have only used HTML tags as a part of JSX. But JSX becomes more useful when we actually add JavaScript code inside it.

To add JavaScript code inside JSX, we need to write it in curly brackets like this:

const App = () => {
 const number = 10;
 return (
  <div>
   <p>Number: {number}</p>
  </div>
 );
};

Here's a Code Sandbox Demo.

Inside the curly brackets we can only write an expression that evaluates to some value.

So, often this syntax of using curly brackets is known as JSX Expression Syntax.

Following are the valid things you can have in a JSX Expression:

• A string like "hello"
• A number like 10
• An array like [1, 2, 4, 5]
• An object property that will evaluate to some value
• A function call that returns some value which may be JSX
• A map method that always returns a new array
• JSX itself

Following are the invalid things and cannot be used in a JSX Expression:

• A for loop or while loop or any other loop
• A variable declaration
• A function declaration
• An if condition
• An object

We can write arrays in JSX Expressions because <p>{[1, 2, 3, 4]}</p> is finally converted to <p>{1}{2}{3}{4}</p> when rendering (which can be rendered without any issue).

In the case of an object, it’s not clear how the object should be displayed. For example, should it be comma-separated key-value pairs or should it be displayed as JSON? So you will get an error if you try to display the object in a JSX expression. But we can use object properties instead.

Also note that undefined, null, and boolean are not displayed on the UI when used inside JSX.

So if you have a boolean value and you want to display it on the UI you need to wrap it in ES6 template literal syntax like this:

const App = () => {
  const isAdmin = true;
  return (
    <div>
      <p>isAdmin is {`${isAdmin}`} </p>
    </div>
  );
};

Here's a Code Sandbox Demo.

Conditional Operators in JSX Expressions

We can’t write if conditions in JSX expressions, which you might think of as an issue. But React allows us to write conditional operators, like ternary operators as well as the logical short circuit && operator like this:

<p>{a > b ? "Greater" : "Smaller"}</p>
<p>{shouldShow && "Shown"}</p>

Here's a Code Sandbox Demo describing various ways of writing JSX expressions.

How to Nest JSX Expressions

You can even do nesting of JSX expressions like this:

const App = () => {
  const number = 10;
  return (
    <div>
      {number > 0 ? (
        <p>Number {number} is positive</p>
      ) : (
        <p>Number {number} is Negative</p>
      )}
    </div>
  );
};

Here's a Code Sandbox Demo.

How to Add a Class in JSX

We can add attributes to the JSX elements, for example id and class, the same as in HTML.

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  const id = "some-id";
  return (
    <div>
      <h1 id={id}>This is a heading</h1>
      <h2 className="active">This is another heading</h2>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's a Code Sandbox Demo.

Note that in React, we need to use className instead of class.

This is because if you use class instead of className, you will get a warning in the console as shown below:

Here's a Code Sandbox Demo.

To understand why the warning is being shown, print the object representation of it and you will see the following:

Here's a Code Sandbox Demo.

As you can see, the props object has the class property with a value active. But in JavaScript, class is a reserved keyword so accessing props.class will result in an error.

This is why React decided to use className instead of class.

This use of className instead of class is a frequently asked question in React interviews.

Note that in React, all the attribute names are written in camelCase.

You can find all the changed and unchanged attributes list here.

Conclusion

In this article, we have seen how to use JSX in React. Here are some major takeaways:

• Every JSX tag is converted to React.createElement call and its object representation.
• JSX Expressions, which are written inside curly brackets, allow only things that evaluate to some value like string, number, array map method and so on.
• In React, we have to use className instead of class for adding classes to the HTML element
• All attribute names in React are written in camelCase.
• undefined, null, and boolean are not displayed on the UI when used inside JSX.

Thanks for reading!

Check out my free Introduction to React Router course.

Also, check out my Mastering Modern JavaScript book to learn all the latest ES6+ features in detail to become better at JavaScript and React.

Subscribe to my weekly newsletter to join 1000+ other subscribers to get amazing tips, tricks, articles and discount deals directly in your inbox.

React is one of the most popular JavaScript libraries for building user interfaces.

If you want to become a front-end developer or find a web development job, you would probably benefit from learning React in-depth.

In this post, you're going to learn some of the basics of React like creating a component, the JSX syntax, and Props. If you have no or little experience with React, this post is for you.

For starters, here's how you can install React.

What is JSX?

The first thing you'll realize after installing your first React project is that a JavaScript function returns some HTML code:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

This is a special and valid syntax extension for React which is called JSX (JavaScript XML). Normally in frontend-related projects, we keep HTML, CSS, and JavaScript code in separate files. However in React, this works a bit differently.

In React projects, we don't create separate HTML files, because JSX allows us to write HTML and JavaScript combined together in the same file, like in the example above. You can, however, separate your CSS in another file.

In the beginning, JSX might seem a little bit weird. But don't worry, you'll get used to it.

JSX is very practical, because we can also execute any JavaScript code (logic, functions, variables, and so on) inside the HTML directly by using curly braces { }, like this:

function App() {
  const text = 'Hello World';

  return (
    <div className="App">
      <p> {text} </p>
    </div>
  );
}

Also, you can assign HTML tags to JavaScript variables:

const message = <h1>React is cool!</h1>;

Or you can return HTML inside JavaScript logic (such as if-else cases):

render() {
    if(true) {
        return <p>YES</p>;
    } else {
        return <p>NO</p>;
    }
}

I won't go into further details of JSX, but make sure that you consider the following rules while writing JSX:

• HTML and component tags must always be closed < />
• Some attributes like “class” become “className” (because class refers to JavaScript classes), “tabindex” becomes “tabIndex” and should be written camelCase
• We can’t return more than one HTML element at once, so make sure to wrap them inside a parent tag:

return (
  <div>
    <p>Hello</p>
    <p>World</p>
  </div>
);

• or as an alternative, you can wrap them with empty tags:

return (
  <>
    <p>Hello</p>
    <p>World</p>
  </>
);

You can also watch my React for Beginners tutorial for more info:

What are Functional & Class Components?

After getting used to the JSX syntax, the next thing to understand is the component-based structure of React.

If you revisit the example code at the top of this post, you'll see that the JSX code is being returned by a function. But the App( ) function is not an ordinary function – it is actually a component. So what is a component?

What is a Component?

A component is an independent, reusable code block which divides the UI into smaller pieces. For example, if we were building the UI of Twitter with React:

The components of Twitter's News Feed

Rather than building the whole UI under one single file, we can and we should divide all the sections (marked with red) into smaller independent pieces. In other words, these are components.

React has two types of components: functional and class. Let's look at each now in more detail.

Functional Components

The first and recommended component type in React is functional components. A functional component is basically a JavaScript/ES6 function that returns a React element (JSX). According to React's official docs, the function below is a valid functional component:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Alternatively, you can also create a functional component with the arrow function definition:

const Welcome = (props) => { 
  return <h1>Hello, {props.name}</h1>; 
}

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. — reactjs.org

To be able to use a component later, you need to first export it so you can import it somewhere else:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

After importing it, you can call the component like in this example:

import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome />
    </div>
  );
}

So a Functional Component in React:

• is a JavaScript/ES6 function
• must return a React element (JSX)
• always starts with a capital letter (naming convention)
• takes props as a parameter if necessary

What are Class Components?

The second type of component is the class component. Class components are ES6 classes that return JSX. Below, you see our same Welcome function, this time as a class component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Different from functional components, class components must have an additional render( ) method for returning JSX.

Why Use Class Components?

We used to use class components because of "state". In the older versions of React (version < 16.8), it was not possible to use state inside functional components.

Therefore, we needed functional components for rendering UI only, whereas we'd use class components for data management and some additional operations (like life-cycle methods).

This has changed with the introduction of React Hooks, and now we can also use states in functional components as well. (I will be covering state and hooks in my following posts, so don't mind them for now).

A Class Component:

• is an ES6 class, will be a component once it ‘extends’ a React component.
• takes Props (in the constructor) if needed
• must have a render( ) method for returning JSX

What are Props in React?

Another important concept of components is how they communicate. React has a special object called a prop (stands for property) which we use to transport data from one component to another.

But be careful – props only transport data in a one-way flow (only from parent to child components). It is not possible with props to pass data from child to parent, or to components at the same level.

Let's revisit the App( ) function above to see how to pass data with props.

First, we need to define a prop on the Welcome Component and assign a value to it:

import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome name="John"/>
      <Welcome name="Mary"/>
      <Welcome name="Alex"/>
    </div>
  );
}

Props are custom values and they also make components more dynamic. Since the Welcome component is the child here, we need to define props on its parent (App), so we can pass the values and get the result simply by accessing the prop "name":

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

React Props Are Really Useful

So React developers use props to pass data and they're useful for this job. But what about managing data? Props are used for passing data, not for manipulating it. I'm going to cover managing data with React in my future posts here on freeCodeCamp.

In the meantime, if you want to learn more about React & Web development, feel free to subscribe to my YouTube channel.

Thank you for reading!