What is React?

React is a UI Library.
Yes, not a framework… Django is a Framework. Angular is a Framework. React is not, its a library folks.

So you need to build a website, cool.

The website loads in a Browser, so you need to know the language the browser understands. It is composed of 3 parts as in triquetra from Dark.

1. HTML

2. CSS

3. JavaScript

HTML :- HyperText Markup Language

AKA What the thing is

This language has a set of tags which is understood by the browser, like:

• <img> to render an Image
• <a> for hyperlink
• <h1>,<h2>,…<h6> for headings
• <p> for paragraph

You can learn more about it here.

CSS :- Cascading Style Sheets

AKA What the thing looks like

This deals with how a specific <tag> looks.

You can style your tags in various ways like :

• background-color
• color
• text-align
• display

There are many ways to style your tags. You can learn it here.

Javascript

AKA What the thing does when poked

This is mostly on how a user is allowed to interact with your tags.

You can start learning it here.

For a simple example, let us take a Button.

The HTML equivalent is :

<button type="button">Click Me!</button>

You can style it like this :

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Now for “how does it behave”, we will need Javascript.

<button onclick="myFunction()">Click me</button>
// A Js Function 
function myFunction() {
  // code to execute onclick of the button
}

So your HTML would look something like.

Snipped taken from W3School

So you have your button properly working. Now let us see what React does.

What does React do?

It composes the top 3 into a single Function/Class called a Component.

This button is styled by JSX, so any style of the form [background-color] will be changed into [backgroundColor], [font-size] becomes [fontSize], and so on.

Ooh ooh wait. What is JSX now ??
It is Javascript XML. It basically allows us to write HTML in React.

Go ahead and click the following links to know more:

1. https://reactjs.org/docs/introducing-jsx.html
2. https://facebook.github.io/jsx/

This component can further be developed to maintain its own state and can be composed to make complex UIs.

So that is a very short introduction to what React does.

We can start creating small independent components, compose them into making complex components and turn it into a website.

Now head to the React Official Docs and start creating amazing products.

This is Karthik representing Timeless.

If you find this blog post helpful, share it with a friend.

Please feel free to give your comments.