ReactJS Overview
React is one of the most popular front-end “libraries” today. Indeed, this Facebook creation focuses on building user interfaces rather than the other application blocks such as client-side routing, data storage, etc. These tasks are left to other complementary solutions of the ecosystem (for example: React-Router for navigation, Redux for managing application state, etc.).
React released initially in March 2013 since then, it has expanded beyond the web with React Native, a tool that allows you to create native mobile application using React.
It’s an increasingly popular library with over 96 000 stars on GitHub. It gained 58 stars per day as average since its release. Furthermore, it’s used in production by huge companies like: Instagram, Netflix, WhatsApp, Airbnb and obviously Facebook.
From the official documentation, React is described as followed :
- Declarative: It makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data change. Declarative views make your code more predictable and easier to debug.
- Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
- Learn Once, Write Anywhere: You can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.*
Note: It will be useful for you to install some React tools in your browser (if you are using Google Chrome or Mozilla Firefox). the first tool is React-Detector which highlight the extension icon any time you navigate to a website that uses React. The second tool is the React Developer Tools extension, it describes every React element that makes up the page.
React features :
- The Virtual DOM
The DOM (Document Object Model) is the structure of HTML elements that make up a web page. The DOM API defines the way these page elements are accessed and changed. React makes updating the DOM faster by using DOM diffing which stands on comparing the currently rendered content with the new UI changes. This is the power of React’s amazing rendering performance. Instead of manipulating the DOM directly (which can be error prone), React stores two copies of a Virtual DOM, the original and an updated version that reflects changes fed in from the view. The two versions are run through a React function that singles out the differences and outputs a stream of DOM operations that only alter the parts of the view that actually changed. As a result, time and resources are saved, as only the parts that are actually changing are affected by changes in the view.
Let’s take an example to explain all this. Here is the React’s “Hello World!” :
import React from "react";import ReactDOM from "react-dom";const Hello = React.createClass({render() {return React.createElement('div', null, "hello")}
);ReactDOM.render(React.createElement(Hello), document.getElementById("app"));
The ReactDOM.render call will execute the render function and retrieve a virtual DOM tree, compare it to the DOM tree contained in the app, identify the element and add the text “hello world”. React.createElement takes as parameter the HTML element, an attribute object and children (all parameters after the 2nd one will be children). Nothing extraordinary for the moment but let’s add a little interactivity (and let’s forget about importing them for simplicity).
- JSX
React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, following are some pros that come with it.
- It is faster because it performs optimization while compiling code to JavaScript.
- It is also type-safe and most of the errors can be caught during compilation.
- It makes it easier and faster to write templates, if you are familiar with HTML.
JSX files is the React modern solution to keep HTML and JavaScript code separate. JSX brings real flexibility in writing, reading and comprehension. Babel proposes a preset for JSX which makes it possible to transpire the JSX in JavaScript code classic and executable by the navigator.
Without JSX:
class Hello extends React.Component {render() {return React.createElement('div',null,
React.createElement('h1',null,'Title'),
React.createElement('p',null,'Description'));
}
}
With JSX:
class Hello extends React.Component {render() {
return <div>
<h1>Title</h1>
<p>Description</p>
</div>
}
}
- React Components
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Components need data to work with. There are two different ways in which you can combine components and data: either as props or state. Props and state determine what a component renders and how it behaves.
1. Props :
If components were basic JavaScript functions, then props would be the function input. Going by that analogy, a component accepts an input (what we call props), processes it, and then renders some JSX code.

Note: Props should be immutable and top-down, that means they are received from parent component and read-only. So a parent component can pass on whatever data it wants to its children as props, but the child component cannot modify its props. Then, if you try to edit the props, you will get the “Cannot assign to read-only” TypeError.
2. State :
State is an object that is owned by the component where it is declared. Its scope is limited to the current component. A component can initialize its state and update it whenever necessary. The state of the parent component usually ends up being props of the child component. When the state is passed out of the current scope, we refer to it as a prop.

The difference between state and props?
“props” get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function). (from the official documentation)
Now that we know the component fundamentals, let’s discover the main classification of components!
There are two types of components in React :
- Functional component: function taking as parameter an object called props and rendering the JSX. It’s the simplest way to create a React component. it’s a dump component with no logic inside and no internal state. It receives functions and data that from container component and display it. That’s why It’s also called presentation component.
function ItemCard(props) {return <h1>the item price :{props.price}</h1>;}
This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “functional” because they are literally JavaScript functions.
- Class Component: a class component offers more features. It must have a render method returning the JSX, receiving props and having a state representing the internal state of the component, it can be updated by invoking the setState() function.
note : There are two ways in which you can create a class component. The traditional and old way is to use React.createClass(). When React was first created it was the only way to declare a class component.
Let’s see an example:
var ItemsListContainer = React.createClass({render() {return <div> <h1>Hello World!</h1> <p>This is a React Component.</p> </div>}})
The variable MyComponent now contains a React component that can be used anywhere on a website. To link that script to an HTML page, first you must have a div element with a unique id on the page.
<div id=”Items-List”></div>Then in the script after declaring the React component variable, use the ReactDOM.render() function which takes 2 arguments. The first one is the React component, and the second one is the targeted HTML element.
ReactDOM.render(<MyComponent />, document.getElementById('Items-List'))- The second way to create a React class component is to write a class that extends React.Component (ES6 syntax).
class ItemsList extends React.Component {
render() {
return (
<div> <h1>Hello World!</h1> <p>This is a React Component.</p> </div>
);
}
}
Once , you created the component you can use it wherever you want by using ReactDOM.render() the same way again to target the HTML element by id or import it and use it this way (ES6) :
import ItemList from '../ItemList/ItemList'function Welcome {
return (
<ItemsList/>
);
}
Installation :
There are many ways to start a React Project (clone a starter project, use create-react-app, etc.). However, create-react-app is still the best way to build a new React single page application from scratch. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 on your machine.
Creating React App is a great way to get started with a Webpack-React app using standard conventions. So, we can install it globally from the command line using the “-g” flag. You can run this command anywhere on your system :
npm install -g create-react-appTherefore, your can create a new app using this command:
create-react-app my-appInside your project directory, you can run several commands (you may also use yarn):
- npm start: Starts the development server and auto-reloads the page any time you make edits
- npm run build: Bundles the app into static files for production
- npm teststarts: The test runner and lets you test your app with Jest as you build it
- npm run eject: Takes your app out of the create-react-app setup, which lets you customize your project configuration
So, we can run the generated application:
cd my-appnpm start
Starting the server (npm start) automatically launches the app in the browser on localhost:3000. In addition, the console output displays a LAN address so that you can access the app from a mobile device on the same network.
The application should look like that:
- Resources :
https://github.com/facebook/react