My First Reactjs Blog (Part1 )

7 min readNov 21, 2018

In this article you will learn how to create a simple application with ReatcJs

(inspired from a workshop i have made two weeks ago ! :) )

but before we start coding , I will try to explain for you the main reasons to use Reactjs , Big companies using Reactjs , Reactjs ecosystem ,

happy learning and happy coding !

What is Reactjs ?

React JS is a declarative, efficient, and flexible JavaScript library for building user interfaces

History ?

React is created by Jordan Walke, a Facebook engineer. It’s pretty new, it only has 5 years since its first release (Initial release from 2013 )

React is not a Framework , it ‘s the magic solution for Facebook to handle billions of posts , millions like count , millions of comments without reload for the web page ,

Big Companies using Reactjs

So , Reactjs is not only used by Facebook ! it’s used by several big companies such as

Netflix — the biggest paid video-streaming service

Yahoo! — the mail client in React

Ebay

Instagram :a social networking app made for sharing photos and videos

and many others , you can check this link

and other poor companies like “Microsoft “

Yes my man , it’s true , Microsoft have used Reactjs in many big projects

like : Skype web version , Microsoft office365 , Skype mobile application and others …

you can check this link:

Why Reactjs ?

So , we have discovered what is Reactjs and the big companies using this magic solution ,

Performance : using React will lead to a fast user interface without doing much work to specifically optimize for performance
Simplicity : Reactjs it’s based component , with simple plain JavaScript code
All the power of HTML, CSS and Javascript together inside the component:
It’s easy to learn : Anyone who have some background with HTML CSS and JavaScript , can Learn Reactjs ( it’s dedicated for Developers and Designers and Microsoft engineers: it’s dedicated for Developers, Designers and Microsoft engineers 😗
increasing development speed : ReactJS allows us to create reusable UI components that can be used in many web pages
Testability : ReactJS applications are super easy to test

Reactjs Core Concepts

So what are the main the concepts the make Reactjs so popular, performant and fast , etc ..

Virtual DOM : Reactjs use the concept of virtual DOM which helps in the performance ,

WTF IS DOM ?

The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

The HTML DOM provides an interface (API) to traverse and modify the nodes. It contains methods like getElementById or removeChild.

<html>
 <body>

 <p id="demo"></p>

 <script>
  document.getElementById("demo").innerHTML = "Hello World!";
 </script>

 </body>
 </html>

Issues !

The problem is that the DOM is bloated. Every time you touch a node just to read an attribute or a class name, or to get to a child or sibling, the browser has to search, check, parse a rather large number of proprieties and values for each node 😒

So the solution for this issue is “virtual dom “

The Virtual DOM

— The Virtual DOM is an abstraction of the HTML DOM

— A virtual DOM object has the same properties as a real DOM object

— React maintains the current Dom and if some changes have to be rendered then only those changes are set in the original DOM

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster,

Component :

“Everything is a Component “

Components are the heart and soul of React.

What is Component ?

— Self-contained reusable building blocks of web application

— a component is a JavaScript class or function

— Components let you split the UI into independent, reusable pieces

So my advice for you before you start coding , you should split your UI into components , reusable components !

How Does Component Like ?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hello:<p>hello world. <a href="http://www.react-cn.com/">react</a></p> };
  }
  render() {
    return (
      <div>
        hello Tops !
      </div>
    )
  }

JSX :

React components are written in JSX, a JavaScript extension syntax allowing easy quoting of HTML
— 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.

— By using JSX one can write the following JSX/JavaScript code:

var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);

And Babel will transform it into this: 😙

ar nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

“Babel is a JavaScript compiler”

State && Props :

— React controls the data flow in the components with state and props

— The data in states and props are used to render the Component with dynamic data

# Understanding ReactJS Props :

In ReactJS props are equivalent to parameters of a pure javascript function.
In ReactJS every component is treated as a pure javascript function.
In ReactJS we use props to send data to components.
One of the most important features of props is that they can be passed by a parent component to its child components

#Understanding ReactJS State :

— State is like a data store to the ReactJS component. It is mostly used to update the component when user performed some action like clicking button, typing some text, pressing some key, etc.

— State is strictly belongs to a single Component

class Counter extends Component{
  
  constructor(props){
    super(props);
    this.state = {counter: 0}
  }render(){
    return(
      <p>{this.state.counter}</p>
  )
}

And can be changed later using inbuilt setState() function.

class Counter extends Component{
  
  constructor(props){
    super(props);
    this.state = {counter: 0}
    this.increment = this.increment.bind(this);
  }
  increment(){
    this.setState({counter: this.state.counter + 1})
  }render(){
    return(
      <button onClick={this.increment}>Like</button>
      <p>{this.state.counter}</p>
  )
}

Props are used to pass data from parent to child or by the component itself. They are immutable and thus will not be changed.
State is used for mutable data, or data that will change. This is particularly useful for user input

Reactjs Ecosystem

outside of Reactjs , There is other cool tools

React-router : the standard routing library for React.
React-Native : lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components
React-VR : Create exciting 360 and VR experiences using React
create-react-app : a tool built by developers at Facebook to help you build React applications. It saves you from time-consuming setup and configuration