React

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


Subscribe On YouTube

Episodes

Taking A Look Into App Component

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.

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:

01.png

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:

02.png

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.

What’s next

In episode 3 we’ll take a look at list and explore how you can work with data which is organized in lists in React.

Advertisement: Top 3 React Online Courses

If you want to dive deeper and become a React pro also consider taking one of the following great online courses.

React – The Complete Guide (incl Hooks, React Router, Redux)*
Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

Go To Course*

Modern React with Redux*
Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!

Go To Course*

The Complete React Developer Course (w/ Hooks and Redux)*
Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.