#8 - 5 essential things you need to know about React JS

What is React?

React was deployed on Facebook in 2013 and is appreciated by developers looking to build user interfaces. This language is recent and is used for the management of display layers for web and mobile applications. React also allows us to create reusable user interface components.

React JS is an open-source JavaScript library that was created by Jordan Walke, a developer working for Facebook. It is also used to create applications for the Web only. Further, it also combines HTML and XML in the same code file.

React Native is an open-source platform created in 2015 by Jordan Walke as well. React Native is mainly used for IOS and Android mobile applications.

What are the 5 essential things to know about React JS?

1. Components (components)
   The idea is to create reusable "code blocks", i. e. a part of this code can be implemented in several places without further development. The advantage is that depending on where the component is called, it will keep the same structure (design, color, placement, etc.). This is an important time saving for developers.
   
   
2. JSX
   JSX is : JS for Javascript and X for XML
   As mentioned in the definition of React, React JS combines HTML and XML in the same file. It is very rare to find files where several programming languages are written together. This is a real advantage for us, the developers, because it allows us to be more efficient and faster for development.
   
   
3. Props & States
   - Props (properties): Props are used to give properties to a component, for example, to give it a size or a color. The props are unidirectional, i.e. the data can only go from the parent components to their children, and not the other way around.
   - State: State allows you to temporarily manage the configuration of the component itself.
   
   
4. The Component API (Application Programming Interface)
   APIs are considered as a structure to follow that allows you to create components. The APIs work with 4 elements:
   
   - Render: Place where the JSX code is placed (it is this code that will make the UI (design) of a component)
   - Constructor: Initialization of States
   - SetState: Modification of a variable (e. g. object color)
   - Lifecylce: automatic management of the life cycle of a component: from creation to destruction
   
   
5. Functional Component
   - Class: a class allows to manage the states of a component using the APIs above.
   - Functional Component: it is a function to which properties can be given as arguments and which returns HTML. Here, we can no longer use APIs or use the setState method: which means that a functional component cannot have states, which is why it is called Stateless.

For more information on these elements, click here

What are the differences between React and Angular?

Angular and React each have their own differences and use cases, so it is difficult to say what is best for beginners. For my part, I found React to be more affordable and faster than Angular, because we have more freedom.

What kind of project have you recently developed in React?

Currently, I am working on a platform that collects data from the real estate market so that individuals can compare and estimate their properties. This project is particularly interesting because it’s the first time, I am working in peer-programming : my part is the front end with React and Quentin is working on the database.

What are your ambitions for the future at Technology Partner?

In the short term, I would like to enrich my knowledge of React because I find it particularly exciting and captivating. In addition, I would like to learn about other languages.

In the long term, I would like to have a position with more responsibility. For example, managing a project while keeping the development part.

Written by Emanuel Martins & Charline Pennisi