BACK TO HOME

Learning React Chapter One: Installation and First Steps

Published on Fri Mar 02 2018

React is an exceptional web development tool. It manages to do so much with little code because it is so good and hiding the details from the developers and let them think only about logic. In this set of posts, let’s take a tour of React and see what we can learn from it!

Note: Please make sure you have node and npm installed in your system. We will be using npm throughout the course.

Setting up the project

Let’s create a new folder called first-react-app and initialize it with npm.

mkdir first-react-app
cd first-react-app
npm init

At this point, npm will ask for a few values like name of the package, license etc. Feel free to customize them or just press enter and go with the defaults. Next, we will need tools to transform all the React syntax (which is not javascript and will not run in the browser as it is) into valid Javascript. Besides React, we will also be using some modern ES6 syntax which can also fail in older browsers, which is why we need a bundler and a transpiler. A bundler takes in your code, works with the transpiler to figure out how to transform it into valid javascript for all browsers and also serve it in the best way for the app (We will talk about this in a later post). So for this course, we will be using parceljs as our bundler, which is an extremely light weight, minimal config bundler and is perfect for quickly getting started with React. We will be using babel as our transpiler.

Installation

So let’s install parceljs and install a babel preset as well. A babel preset is a set of utilities which tells Babel to figure out how to convert React code into valid javascript code. Thankfully we just have to worry about one preset, babel-preset-react-app.

first-react-app > npm install --save-dev parceljs babel-preset-react-app 
first-react-app > npm install --save react react-dom

Let’s Code! Now, create two files in the directory namely index.html and index.js. In our index.js file, we want to start using React. So let’s import React into our project. We already installed it, so now an import command will be able to fetch React and React-DOM from our node_modules. import React from "react"; import ReactDOM from "react-dom"; Why do we need both React and ReactDOM? React is the logic which governs how our buttons, forms, divs etc appear and behave in our app. And ReactDOM is the DOM representation of it. In other words, React tells ReactDOM how an element should look like and ReactDOM creates the actual DOM node out of it. Next, we create a React element.

const greeting = <h1>Welcome!</h1>;

That was our first React element! We created a React element and assigned it to the variable greeting. Now, we will need to tell ReactDOM what to do with it. So we say : ReactDOM.render(greeting, document.getElementById("app")); So this tells ReactDOM that “Hey, can you please render the greeting element inside an element with id app”? Now all we need is the app element in the index.html file. This syntax looks like plain HTML, but it’s in our Javascript code? It’s actually called JSX and it’s made to look like HTML because, that is eventually how it appears when it’s rendered on the screen. It’s actually the more easier to read version of this: const greeting = React.createElement("h1", {children : "Welcome!"}) Because creating elements using the createElement command can get difficult, especially when you have nested elements, JSX was introduced. The index.html file can contain some basic HTML markup like title, body etc, but the important part for React apps is a mount point, which as we mentioned about is the app element. We also need to include our index.js script for parcel to link them all together.

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8"/>
      <title>Greeting</title>
    </head>
    <body>
      <div id="app"/>
      <script src="./index.js"></script>
    </body>
  </html>

Next, let’s head over to the package.json file which was created for us by npm. And add a script called start which does all the parceljs bundling and also add a babel field to tell parceljs to use that preset we installed earlier. So now our package.json file should look like this.

{
  name: "first-react-app",
  version: "1.0.0",
  description: "",
  main: "index.js",
  scripts: {
    start: "parcel index.html",
  },
  keywords: [],
  license: "MIT",
  dependencies: {
    react: "16.2.0",
    "react-dom": "16.2.0",
  },
  devDependencies: {
    "babel-preset-react-app": "3.1.1",
    parceljs: "0.0.1",
  },
  babel: {
    presets: ["react-app"],
  },
};

Done! Next head over to the terminal and in the project’s root directory run start. first-react-app > npm start This will kick start parceljs which will bundle all the code starting from index.html and transform all files along the way. Because we included index.js inside the HTML file, it is bundled as well and it’s all served on port 1234. So head to http://localhost:1234 in your browser and you should our react app on the screen.

Our app is served! Now that we talked about what React is and what it takes to run it, let’s deep dive into React and start building full-fledged React apps! To be continued … Thanks!

Sign up to my newsletter

Get latest news and tips in Fullstack web development right into your inbox!

No spam. I promise!

© 2020 Bhargav Ponnapalli. All rights reserved.