Modern React From The Beginning: Starting With React Components & JSX

React is one of the most popular JavaScript front-end frameworks for building web applications in 2020. It is developed by Facebook and a community of individual developers and companies. React is constantly evolving and new features are added constantly.

Starting with React from scratch might be a challenge at first. There are many features and concepts which needs to be covered when starting to learn React. This might be overwhelming at first and it’s hard for new developers to get started in the right way.

This tutorial series is for you if you want to

Get started with modern React from scratch. Learn how to create your first React App. We’ll cover latest concepts like React Hooks, functional components, and many more. React is one of the most popular JavaScript front-end frameworks for building web applications in 2020.

No prior knowledge of React is required. However you should already have a basic understanding of web development with HTML, CSS and JavaScript to get going.

In the first episode of this tutorial series we’ve started to prepare the React development environment and managed to setup the first React project. Now that you have a first understanding of the initial React project setup we’re able to move on and dive deeper into React. In this second episode you’ll learn more about React components and JSX.

Let’s get started and have much fun learning React!

Episodes

Episode 1: Creating Your First React App
Episode 2: Starting With React Components & JSX
Episode 3: Working With Lists
Episode 4: Multiple Components
Episode 5: Introducing Arrow Functions And Object Destructuring

Taking A Look Into App Component

You’ve already learned that a React app is consisting of components and that you can find the implementation of the first application component in src/App.js. The default code looks like:

import React from 'react';
import logo from './logo.svg';
import './App.css';

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>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

This default App component implementation already contains some clutter. So let’s reduce the code to a very minimal App component implementation by removing the clutter:

import React from 'react';
function App() {
    return (
        <div>
            <h1>Learn React</h1> 
        </div>
    ); 
}
export default App;

This minimal implementation of a React component is starting with an import statement to import React from the react package. This is needed in every React component implementation.

App component is implementation as a functional component, which means that it is just a JavaScript function with a return statement inside.

The return statement is containing JSX code which looks similar to pure HTML but can also contain expression (we’ll learn about expressions later on). This is the code which is responsible for rendering the component’s output in the browser.

With the changes made we should now see the following output in the browser:

Adding Variables To Components

In most cases components do not only consist of a return statement delivering the JSX code which is needed to render the component. Furthermore a component can also consist of variables and functions. Let’s take a look at a simple example first:

import React from 'react';
function App() {
    const greeting = 'Hello World';

    return (
        <div>
            <h1>Learn React</h1> 
        </div>
    ); 
}
export default App;

Here our App component is extended to also contain the greeting constant which is a string. By default the string value is set to Hello World.

Using Expressions in JSX

To output the value of the greeting constant we’re able to use the expression syntax within the JSX code:

import React from 'react';
function App() {
    const greeting = 'Hello World';

    return (
        <div>
            <h1>{greeting}</h1> 
        </div>
    ); 
}
export default App;

Embedding an expression in JSX requires us to use curly braces. The output should now correspond to the following:

Within a React component we’re also able to define a JavaScript object with multiple properties and then use the values of those properties in the JSX code:

import React from 'react';
function App() {
    const greetings = {
      greeting_one: 'Hello',
      greeting_two: 'world'
    }

    return (
        <div>
            <h1>{greetings.greeting_one} {greetings.greeting_two}</h1> 
        </div>
    ); 
}
export default App;

You can also define functions in the component implementation:

import React from 'react';
function App() {
    function getGreetingMessage() {
      return 'Hello World';
    }

    return (
        <div>
            <h1>{getGreetingMessage()}</h1> 
        </div>
    ); 
}
export default App;

And then use the function inside the JSX expression syntax to embed the return value of the function in the HTML output.

#reactjs #javascript #web-development

Episodes

Taking A Look Into App Component

Adding Variables To Components

Using Expressions in JSX

youtube.com

Modern React From The Beginning: Starting With React Components & JSX