My First Reactjs Blog (Part1 )

What is Reactjs ?

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

Reactjs

History ?

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
instagram

Why Reactjs ?

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

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
My Hero Reactjs Kenshiro

Reactjs Core Concepts

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

  • The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
DOM
<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 😒

The Virtual DOM

— The Virtual DOM is an abstraction of the HTML DOM

Component :

“Everything is a Component “

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.

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>
);
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"
)
)
);

State && Props :

— React controls the data flow in the components with state and 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
class Counter extends Component{

constructor(props){
super(props);
this.state = {counter: 0}
}
render(){
return(
<p>{this.state.counter}</p>
)
}
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

Why Not Angular ?

Angular is bullshit !

Conclusion :

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

--

--

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
Rebai Ahmed

Rebai Ahmed

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