My First Reactjs Blog (Part1 )

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

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

Image for post
Image for post

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 !

Image for post
Image for post

What is Reactjs ?

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

Image for post
Image for post
Reactjs

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 )

Image for post
Image for post

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 ,

Image for post
Image for post

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
Image for post
Image for post
  • Yahoo! — the mail client in React
Image for post
Image for post
  • Ebay
Image for post
Image for post
  • Instagram :a social networking app made for sharing photos and videos
Image for post
Image for post
instagram

and many others , you can check this link

Image for post
Image for post

and other poor companies like “Microsoft “

Image for post
Image for post

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 …

Image for post
Image for post

you can check this link:

Why Reactjs ?

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

Image for post
Image for post
Why
  • 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
Image for post
Image for post
My Hero Reactjs Kenshiro

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 ?

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

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,

Image for post
Image for post
Image for post
Image for post

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 !

Image for post
Image for post

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
Image for post
Image for post

#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
Image for post
Image for post

Why Not Angular ?

Angular is bullshit !

Image for post
Image for post

Conclusion :

In this part I tried to explain for you what is Reactjs , the main core concepts like Virtual DOM , JSX , State && props ,

in Part2 , we will try to start coding

thanks for your feedback 😃 😃 😃 😃

Image for post
Image for post

Written by

<script>alert('try your best')</script>

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store