React Tutorial: Getting Started

What is React

React is not a framework, but a library for building user interfaces. Many people confuse react as a framework, but it has to do much more if it were to be a framework. It is maintained by Facebook and by a large community of developers like you and me. React is a very good library, the kind that you can use to build a quality, fast and reliable website, or mobile application.

Lets first explore it’s history first. Every technology has a reason why the creators created it. React is no exception.

React JavaScript History

React was first created by Jordan Walke, a software engineer at Facebook. He named it FaxJS back then and later to react. Jordan Walke took inspiration from XHP, which is basically an HTML component for PHP. They [Facebook] deployed it on news feeds in 2011, followed by Instagram in 2012 and they open-sourced it in 2013.

What makes react great

React is loved by many in the web designing sphere. It introduced many concepts that help designers. React is a declarative, component-based and learn once write anywhere.

Declarative

Declarative programming is a type of programming where programs describe their desired end result. A complete opposite of imperative programming, where you define the commands for the computer to perform in order to reach the desired results. React is declarative meaning, you can declare your views as variables. This enables you to change the views rendered using the state of your application. 

As a result, your code is so easy to debug and very predictable.

Component-based

React is also component-based. Meaning you can develop components, combine those components to create a whole user interface. For example, divide a web app into buttons, links, cards, animations and many more, develop those components individually and use them to create a web page. And you can easily pass data to your application.

Learn Once, Write Anywhere

You can code new react features without having to rewrite existing code. You can also develop mobile apps for Android and iOS with react-native, which is a framework and uses react syntax to develop the mobile app.

What you need to start learning react

Getting started with react doesn’t require any fancy background knowledge. If you have developed a website before, even a static one, the odds are it’ll be comfortable for you to start learning react. 

React Prerequisites

  • JavaScript and ES6
  • CSS and HTML
  • Node JavaScript and npm
  • General DOM knowledge

Getting Started with React (Hello React World)

So enough history and promises, Let’s get started.

We’ll use JSFiddle for our tutorials. So you can go toJSFiddle and edit the code and test it for yourself. Cool Hah!.

How to create react js app on your local machine

First, you need nodejs, which is a javascript runtime. You also need to install npm, if you haven’t already. After which you”ll be able to explore react on your laptop.

Here’s the command

npx create-react-app my-app
cd my-app
npm start

You’ll be given a localhost URL for your project and open that in the browser.

But in this tutorial, I’m going to use JSfidde. Here is our hello world react app.

This is the minimal example, the famous Hello World code. React is so rich in features and options, But let’s get deep into other react elements and components you need to know.

Introducing JSX

A favorite example of JSX is the one on the react js website. I will just use that one for simplicity reasons.

Take a look at the following piece of code…..

const element = <h1>Hello, world!</h1>;

This simple code is not HTML. It’s a JSX, a syntax extension for JavaScript. It is very recommended to use JSX to define your UI elements. And you can interact with these JSX interface variables as you would with any JavaScript variable.

You can easily render these JSX react element to the DOM. Just like in our Hello World example.

As you can see, we’ve rendered our ‘elem‘ in the DOM. A typical react JSX implementation requires much more than just a div tag above.

Why using JSX

Rendering login in UX is often coupled with UX elements. Imagine you have an element e.g. a button that changes colors with state changes such as logged in and logged out, All that login can be easily included in the user interface elements through JSX. Let’s see this example.