Categories
React Tutorial

React Tutorial: Learn from Scratch – Part 1

react

In 2019, ReactJS (or simply just React) continues to be at the helm of the most popular frontend Javascript libraries and frameworks. It has a powerful array of features and a much shorter learning curve compared to its competitors (see Angular). In this tutorial series, I aim to create a React “manual” to learn it quickly from scratch. I will do so by following along the official guide and summarizing the most important features for reference. You are welcome to tag along. Also, if you think this tutorial is lacking something or is somehow unclear, please shoot me a note and let me know.

Please also note that I am only summarizing the official guide and taking only what is needed to fully and quickly understand and learn React.

Installation

To develop in React, you need Node. So install it with brew for macOS or Linux. If you prefer, you can also download the pre-built installer for your platform (which also includes Windows), from nodejs.org. To install via brew run:

brew install node

After successfully installing Node, you can use the create-react-app command to create some scaffolding and boilerplate code to get you started. To do so, run:

npx create-react-app my-app

After completion, navigate to my-app directory and type npm start to fire up the development environment. At this point, a browser window that contains the Reactjs logo should open.

To make sure that everything is setup correctly and we’re ready to go, lets create a “Hello world” example.

Under the src folder, open index.js and replace

ReactDOM.render(<App />, document.getElementById('root'));

with:

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

Press save, and the browser should automatically reload with the words: “Hello, world!”. If it does, we’re good to go.

Using JSX in React

Simply put, JSX is React’s HTML. Except that it is much more powerful. In its core it is a “syntax extension to JavaScript.” In writing a plain Javascript app, you would usually separate your markup (or your UI) from your Javascript (or your logic). However in React, markup and logic exist in the same place and are kept together as one unit in what they call a “component”.

Consider changing your index.js file to this:

const name = 'Johnny';
const element = (
    <div>
      <h1 className="name">Hello, {name}</h1>
      <h2>Good to see you here.</h2>
    </div>
);

name is a regular Javascript constant and so is element. But the contents of element are written in JSX syntax. You can pass variables, constants, functions, and everything else into JSX. You use it in loops and if-else blocks. JSX is really just Javascript.

So how do you get HTML elements from this? Under the hood, Babel compiles down JSX to React.createElement() calls which in turn create Javascript objects. React then reads these objects and creates the DOM elements that you see on your screen.

The Next React Tutorial

In the next React tutorial, I will cover how elements are rendered and re-rendered based on state changes such as user input. I will also go over what components and their “props” are and how they operate as the building blocks of a React app.

[Next Tutorial Link TO BE INSERTED HERE]

In the meantime, Learn how to create a responsive navbar with react from scratch.