Everything you need to know before starting a new project in React

When starting a new project using the React library, you should ask yourself what it really is and what it is for. In this article I will try to include explain.


The React library complements the JavaScript programming language and was created by the people behind Facebook. The library enables dynamic building of components through a new rendering method. The use of one-way data flow in it makes the code stable and it is easy to increase the performance of the created application and minimize errors. Therefore, React is used to build interfaces in a simplified way with small, isolated components and providing a greater benefit to users.


The React library, apart from Facebook, is also used by such websites as:


- Instagram,

- Pinterest,

- Netflix,

- Airbnb.


Compared to other libraries, the distinguishing feature is the virtual DOM. This means that it stores the entire DOM in the application memory, while changing the state, it performs a search for differences between the real and virtual DOM and updates the changes that will be made.


What is DOM in general (not the one you live in :))? - Document Object Model - The document object model is an independent interface and is referred to an HTML or XML document as a tree structure in which each node is an object that represents part of the document.



A special syntax called JSX allows you to combine HTML with JavaScript. The components we create are saved in JSX (extension to JavaScript), thanks to which we can use HTML syntax to render components that are JavaScript objects contained in the DOM structure node.


It is also worth mentioning that the dynamic development of the library is largely related to its great possibilities, therefore it is important to constantly update your knowledge and observe the changes and improvements taking place. It is worth following Stack Overflow, dev.to, reactjs.org and many other sites that can be found on Google :)


According to the statistics presented on Stack Overflow from 2019, we can see how the React library is a beloved technology:



I wrote a bit about the basics of React itself, and now I will go to the main part of the article, which is where to start working on a project.


I think starting a new project can be compared to a quote from the Forrest Gump movie:

"Life is like a box of chocolates - you never know what you will get."


Each project is different, which is why it is so important to thoroughly analyze the prepared views, assumptions, for what the application is to be needed, for what purpose it is created.


We start with the analysis of views. We make notes and carry out a detailed description of the mechanisms. The most important thing to remember is that if we do not know something, we should ask. A healthy relationship with the client, knowledge of the industry in which he operates, focusing on his needs, looking for solutions are the basis, thanks to which starting a new project will not be a bad experience for anyone.


As you can see, starting a new project is a long process, if we approach it "quickly" we will shoot ourselves in the knee at the very beginning. A well-thought-out and started project is the way to success, if we start wrong, every small error will drag on us, which may lead to the application being built not functioning properly


Code quality, not quantity!


“Measuring the progress of a program with the amount of code is like measuring the progress of an airplane with a scale. You have to know not only what to add, but also what to give up. " - Bill Gates


Summarizing in a few points what you should know before we start creating a new project in React are:

1. Design analysis

2. A thorough description of the mechanisms

3. Asking questions when something is not clear enough for us how it should work, look, etc.

I hope I managed to briefly explain where we should start. In the next part of the article I will try to present how the configuration of the environment and the description of the newly created application should proceed.