What is React?
React was first deployed on Facebook in 2013 and is appreciated by developers wanting to build user interfaces. This language is recent and is used for managing 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 exclusively for the Web. Additionally, it mixes HTML and XML within the same code file.
React Native is an open-source platform created in 2015 by Jordan Walke as well. React Native is primarily used for iOS and Android mobile applications.
Here are the 5 essential things to know about React JS: 1. **Component-Based Architecture:** React applications are built using reusable components. These components are independent and can be nested within each other to create complex user interfaces. Each component manages its own state and logic. 2. **Declarative UI:** React allows you to describe how your UI should look based on its current state. When the state changes, React efficiently updates the UI to match the new state, making your code more predictable and easier to debug. 3. **Virtual DOM:** Instead of directly manipulating the browser's Document Object Model (DOM), React uses a virtual DOM. This is a lightweight representation of the actual DOM. When changes occur, React first updates the virtual DOM, then compares it with the previous version, and finally updates only the necessary parts of the real DOM, leading to better performance. 4. **JSX:** React uses JSX (JavaScript XML), a syntax extension for JavaScript that looks similar to HTML. JSX allows you to write your UI structure within your JavaScript code, making it more intuitive and readable. JSX is transpiled into regular JavaScript by tools like Babel. 5. **Unidirectional Data Flow:** In React, data flows in one direction, typically from parent components to child components. This "props" system makes it easier to understand how data is changing throughout your application and simplifies debugging. While state can be managed locally within components, global state management solutions like Redux or the Context API are often used for more complex applications.
Components
The idea is to create reusable ”code blocks,” meaning a part of this code can be implemented in multiple places without further development. The advantage is that depending on where the component is called, it will maintain the same structure (design, color, placement, etc.). This is a significant time saver for developers.JSX
JSX is broken down as follows: JS for Javascript and X for XML. As mentioned in the definition of React, React JS mixes HTML and XML in the same file. It is very rare to find files where multiple programming languages are written together. This is a real advantage for us developers, as it allows us to be more efficient and faster in development.
Props & States
- Props (properties): Props allow you to give properties to a component, for example, to give it a size or a color. Props are unidirectional, meaning that data can only flow from parent components to their children, and not the other way around.
- State: State allows for temporary management of the component's configuration.The component APIApplication Programming Interface
APIs are considered a framework to follow that allows for the creation of components. APIs work with 4 elements:
- Render: The place where JSX code is placed (this code will render the UI (design) of a component)
- Constructor: State Initialization
- SetState: Modifying a variable (e.g., an object's color)
- Lifecycle: automatic component lifecycle management: from creation to destructionFunctional Component
- Class: a class allows managing component states using the APIs above.
- Functional Component: This is a function that can take properties as arguments and returns HTML. Here, you can no longer use APIs or the setState method, which implies that a functional component cannot have states, which is why it is called Stateless.
For more information on these items, click here
React and Angular, what are the differences in your opinion?
Angular and React each have their differences and use cases, so it's difficult to say what's best for beginners. Personally, I found React to be more easily approachable and faster than Angular, due to having more freedom.
I recently developed a project using React that was an e-commerce platform.
Currently, I'm working on a platform that aggregates real estate market data so individuals can compare and estimate their properties. This project is particularly interesting because for the first time, I'm pair programming: I'm working on the React part and Quentin is working on the database part.
What are your ambitions for the future within Technology Partner?
In the short term, I would like to enrich my knowledge of React because I find this language particularly exciting and captivating. In addition, I would like to train myself on other languages.
In the long term, I would like to have a position with more responsibilities. For example, managing a project while still retaining the development part.
Written by Emanuel Martins & Charline Pennisi
