Getting Started with React (Part 1): Hello React

What Is React?

React is a JavaScript library created by Facebook for creating interactive, component-based user interfaces. Since becoming open source in 2013, React has become more and more popular, and is currently one of the most popular JavaScript libraries.

This is the first in a series of tutorials to get you into the world of React development. This tutorial will show you how to create a “Hello World” App using React, and in the process show you how to setup a simple React project. Before starting on the project, let’s first say a few things about how react works. React uses JSX (JavaScript XML), a JavaScript extension, to specify the content that should be rendered to (a specific point in) a HTML page. JSX looks very similar to HTML, and has tags with names, attributes and children just like html, however, the two are not the same. Now that you have a basic idea about how React works, let’s get started.

How to Create a “Hello World” Program with React

In your project folder, create a new file called index.html and open it in your favorite code editor.

In the opened html file, add <!DOCTYPE html>, html tag, head, title (with an appropriate title) and body tags:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello React: Part 1</title>
    </head>
    <body>
    </body>
</html>

The next step is to include React, and ReactDOM (which React uses to interact with the DOM) in your project. You can simply do that by loading both in the head section of your html file. You also need to load a tool called Babel, which will be used to transform your JSX to JavaScript that the browser can understand. See code sample below:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello React: Part 1</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.15.0/babel.min.js"></script>
    </head>
    <body>
    </body>
</html>

Now that you have the required imports, create a div in the body of your html file with id=”root” as shown in the code sample below. In the next step you will use this div to display a React element.
```
<body>
    <div id="root"> </div>
</body>
```
Finally use JSX to create a h1 element with “Hello World” as text and render the element using ReactDOM.render() within the div created in step 4. This should all be done within <script> </script> tags, and in order for babel to be able to transform the provided JSX, the script should have the type attribute type=”text/babel”. See code sample below:
```
<body>
    <div id="root"> </div>
    <script type= "text/babel">
        ReactDOM.render(
            <h1> Hello World </h1>,
            document.getElementById("root")
        )
    </script>
</body>
```
Open your index.html in your favorite browser and you should be able to see your first React project.

How to Use Expressions and Inline Styles

You now have a working React project. But, before wrapping up, let’s add a few things to make the app even better. First, let’s add some style to your h1 element. Remember how you are using JSX and not html in specifying your element? Well, because of that, adding style properties is done a little bit differently. You can add an inline color style attribute by updating your <h1>Hello World</h1> as shown below:

<script type= "text/babel">
    ReactDOM.render(
        <h1 style={{color:"blue"}}> Hello World </h1>,
        document.getElementById("root")
    )
</script>

Refreshing your html page in your browser should show you an updated page with “Hello World” colored blue as shown below:

Lastly, let’s use a JSX expression to make the app a bit more dynamic by using a variable to specify who “Hello” is said to, instead of permanently displaying “Hello World“. Create a new line beneath <script type= “text/babel”> and declare a variable called name for storing the name you want say “Hello” to. Then change the text within the h1 from “Hello World” to Hello {name}, where {name} is the JSX expression that displays the value of the variable name. See code sample below:

<script type= "text/babel">
    let name = 'Hank';
    ReactDOM.render(
        <h1 style={{color:"blue"}}> Hello {name} </h1>,
        document.getElementById("root")
    )
</script>

Refreshing your html page in your browser should show you an updated page with with “Hello“, and whatever name you stored in the name variable, for example the sample code shown above produce “Hello Hank” as shown in the picture below:

Conclusion

Congratulations!!! You’ve done it, you’ve created a “Hello World” App in React, you’ve used inline styling and expressions.

In the second part of this tutorial, we will introduce another approach to setting up a React project that uses a tool called “create-react-app“.

What Is React?

How to Create a “Hello World” Program with React

How to Use Expressions and Inline Styles

Conclusion

Related Posts