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 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 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.
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.
- CSS and HTML
- 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!.
npx create-react-app my-app
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.
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>;
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.