<commit_before>---
title: The Basics
description: Starting to write our first React.js application, we learn how to structure our app and how to fetch data
layout: post
---

Lets use our knowledge to write an actual app! What we'll build is a weather application that'll display the current conditions and a 7 day forecast.

# Setup

Start by creating a file called `app.js`. Require `react` and `react-dom`, and `ReactDOM.render` a simple "Hello World" heading:

```JS
// app.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello World!</h1>,
  document.getElementById('react-root')
);
```

This on its own won't do anything, lets create an `index.html` file with some basic content:

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather</title>
</head>
<body>
  <div id="react-root"></div>
  <script src="bundle.js"></script>
</body>
</html>
```

If you look closely above, you'll see that we reference a script called `bundle.js`. Didn't we just create a file called `app.js`?! Well yes, but we have to transpile it with browserify.

First, install a few modules we'll need:

```sh
$ npm install react react-dom babelify babel-preset-react
```

Then transpile our first `app.js` with this browserify command:

```
browserify app.js -o bundle.js -t [ babelify --presets [ react ] ]
```

Finally open our `index.html` in the browser and you should see some text saying "Hello World!"!

# First steps

Instead of rendering `<h1>Hello World!</h1>`, we'll render a to-be-made `<App />` component. Create a subfolder called `components`, which all our React.js components will live in, and add a file called `App.js` in there. This is what your folder structure should look like:<commit_msg>Add watchify to part 2, rename it<commit_after>---
title: The first app
description: Starting to write our first React.js application, we learn how to structure our app and how to fetch data
layout: post
---

Lets use our knowledge to write an actual app! What we'll build is a weather application that'll display the current conditions and a 7 day forecast.

# Setup

Start by creating a file called `app.js`. Require `react` and `react-dom`, and `ReactDOM.render` a simple "Hello World" heading:

```JS
// app.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello World!</h1>,
  document.getElementById('react-root')
);
```

This on its own won't do anything, lets create an `index.html` file with some basic content:

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather</title>
</head>
<body>
  <div id="react-root"></div>
  <script src="bundle.js"></script>
</body>
</html>
```

If you look closely above, you'll see that we reference a script called `bundle.js`. Didn't we just create a file called `app.js`?! Well yes, but we have to transpile it with browserify.

First, install a few modules we'll need:

```sh
$ npm install react react-dom babelify babel-preset-react
```

Then transpile our first `app.js` with this browserify command:

```
$ browserify app.js -o bundle.js -t [ babelify --presets [ react ] ]
```

Finally open our `index.html` in the browser and you should see some text saying "Hello World!"!

Again, we don't really want to manually run this command everytime we change a file, so we'll use `watchify` to do that for us. Replace `browserify` with `watchify` and the app is going to rebuild when you change something!

```
$ watchify app.js -o bundle.js -t [ babelify --presets [ react ] ]
```

# First steps

Instead of rendering `<h1>Hello World!</h1>`, we'll render a to-be-made `<App />` component. Create a subfolder called `components`, which all our React.js components will live in, and add a file called `App.js` in there. This is what your folder structure should look like:
{'fraction_non_alphanumeric': 0.12125129265770423, 'fraction_numerical': 0.003360910031023785, 'mean_word_length': 4.214285714285714, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5475268', 'n_tokens_mistral': 1216, 'n_tokens_neox': 1158, 'n_words': 529}