React JS

By delvallejonatan

What is React JS ?

React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time.

Simple

Express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.

Declarative

When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.

Reusable

React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.

Link -> Reusable components by Khan Academy

Functional

It focuses simply on rendering data into UI in a functional way and it is very good at doing this.

function GreetSomeone(props) {
  return <div>Hello, {props.name}!</div>
}

ReactDOM.render(
  <GreetSomeone name="Bob" />,
  document.getElementById('app')
)

Link -> A functional Front-end with React

Why React ?

There are a lot of javaScript MVC frameworks out there and React is not even a framework, is UI library. So why would you want to use it ?

Rather than touching the DOM directly, we’re modifying an abstract version of it. That’s it. We working with some kind of light weight copy of our DOM. We can change it as we want and then save to our real DOM tree. While saving we should compare, find difference and change (re-render) what should be changed. It is much faster than working directly with DOM, because it doesn’t require all the heavyweight parts that go into a real DOM.

Virtual DOM

Link -> What is Virtual Dom

Components Aproach

MVC

One way data flow

React way

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. Just like XML, JSX tags have a tag name, attributes, and children.

JSX

var name = 'jonatan'; 
var commentText = 'Hello!';
var avatarUrl = 'https://images.com/profile_jonatan/joni.jpg';
var avatar = <img src={avatarUrl} />;

var comment = <div className='comment'> 
                {avatar} @{name} {commentText} 
              </div>

Link -> JSX to React Elements