DEV Community

Cover image for Getting started with React
mrwolferinc
mrwolferinc

Posted on • Updated on

Getting started with React

React is an open-source, front-end JavaScript library for building user interfaces or UI components. Released in May 2013, React is the most loved JavaScript framework because of its extra simplicity and flexibility.
React is the most loved web framework

This tutorial will show you how to use React and build your first web application using it.

What is JSX?

Before we begin, you must know what JSX is, as React uses it to function properly.

JSX (JavaScript XML) is a JavaScript syntax extension that makes it easier to write and add HTML. A simple example is shown below.

var element = <h1>The quick brown fox jumps over the lazy dog</h1>;
Enter fullscreen mode Exit fullscreen mode

React doesn't require JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages. We aren't going to use JSX in this tutorial.

Setup

Because this tutorial is for beginners, we are going to start simple. We are only going to use two files:

  • index.html
  • index.js (or whatever you want it to be named)

Setting up the HTML file

First, we are going to set up the HTML file. All we need to do is create a basic webpage, create a <div> element inside of the <body> element, and load the React library. We are going to use a CDN, so we don't have to download the full library.

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
Enter fullscreen mode Exit fullscreen mode

The versions above are meant for development, and not for production. Minified and optimized production versions of React are also available:

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

For this tutorial, we are going to use the development version.

The HTML file should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My First React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Reference the React library here -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Reference JS file here -->
    <script src="index.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Setting up the JS file

Now we are going to set up the JavaScript file. The simplest React example looks like this:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
Enter fullscreen mode Exit fullscreen mode

Here is the same example, but without JSX:

ReactDOM.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('root')
);
Enter fullscreen mode Exit fullscreen mode

Add the example without JSX to the JavaScript file. Make sure to save your work!

Viewing the web app

Your website should look like this:

We can now view our newly created web app. Open index.html in a web browser, and you should see a heading that says "Hello, world!" on the page.
What we should see

Conclusion

Congratulations! You have just learned to create your very first web app using React! I hope you enjoyed this tutorial!

Discussion (6)

Collapse
omrisama profile image
Omri Gabay

Where is that survey from?

Collapse
mrwolferinc profile image
mrwolferinc Author

btw its not a survey its an image

Collapse
omrisama profile image
Omri Gabay

The survey, image, whatever. The poll that said "most loved web frameworks".

Thread Thread
dramaticbean profile image
DramaticBean🇵🇹

Yeah, no one "loves" frameworks, we have to work with them

Thread Thread
mrwolferinc profile image
mrwolferinc Author

true

Collapse
mrwolferinc profile image
mrwolferinc Author

What survey are you talking about