Getting Started With React
Tags: beginners, javascript, javascriptlibrary, react
Published: 2019-10-31 02:01:01

---
title: Getting Started With React
published: true
date: 2019-10-28 09:00:00 UTC
tags: beginner,JavaScript,Javascript library,React
canonical_url: https://JorMee.hashnode.dev/getting-started-with-react-ck2axmv2n00py3is1z7od7v4c
---

This is where we write our first codes in our react track (_**kinda**_).

But before we proceed, it is important that we all have an understanding of the following
+ Basic understanding of **HTML and CSS**
+ Basic Knowledge of **JavaScript (ES6+ syntax and features)**.
+ Basic knowledge of the **DOM and DOM manipulation**.
+ You should also have **Node.js and npm** installed globally on your computer.

If you haven't, you can [download Node.js and npm here](https://nodejs.org/en/). _Make sure you download the latest stable version_.

#### Adding react to a project
There are a few different ways of using the react library for your project(s), depending on why you need react for your webpage.
> Recall that react is used to add dynamic content to your web page

So it follows that, maybe, only a little section (component) of your web page (probably a widget) needs dynamic content.

The first way to use react in you web application is to embed it in your HTML file like any other javascript library.
```
<!DOCTYPE html>
  <html>
    <head>
      <meta charset='UTF-8' />
      <title>Home!</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">
        // all react codes will be here
      </script>
    </body>
  </html>
```
The code above is the basic way to get started with react applications. You would notice that the only difference between this and your everyday HTML document is the script tags (_of course you have used script tags a lot_), so it's basically no difference.
The script tags are used to load in the libraries needed for react to run:
+ **React** - the first script tag imports the react library
+ **React DOM** - the second script tag imports react-DOM, which allowas us to use DOM specific methods in our script.
+ **Babel** - this is a third-party compiler that allows our applications run ES6+ on older browsers.

For now, we only focus on the script tag at the bottom of the component where all our react logic would go.

Within the script tags, input the following code:

```
<script type='text/babel'>
  const Hello = () => {
    return <h1>Hello World</h1>
  }

  ReactDOM.render(<Hello />, document.querySelector('root'));
</script>
```

The code above defines the component Hello like any normal arrow function. However, you would notice the html-like code in the code, but React is a JavaScript framework, right? Well react allows us to write JSX, which is JavaScript and XML, in our code. So the html-like parts of the code are actually XML.

On the last line, we call the ReactDOM's render function (_this comes with the **react-dom** package we added to our script_) and pass in our component and where we want it to be displayed on the DOM, in this case the root div.

_**Notice** that in naming the Hello component, we capitalized the first letter, this is the way to tell react that it is a user-defined component and not a regular html tag._

This is how the whole code should look now:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <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>
  <title>Home!</title>
</head>
<body>
  <div id="root"></div>
  
  <script type='text/babel'>
    const Hello = () => {
      return <h1>Hello World!</h1>
    }
    
    ReactDOM.render(<Hello />, document.querySelector('#root'))
  </script>
</body>
</html>
```
The result:

![Hello World rendered by our react application ](https://cdn.hashnode.com/res/hashnode/image/upload/v1572297348533/u6ilZQTg7.jpeg).

The next post will deal with the second way of using react in our application. _This is to ensure that we don't consume too much at a time_.