React – recently blooming everywhere across the IT industry. What makes people use this specific language instead of any other for their UI? How can you start using it? The answers to these questions will be clear to the naked eye after going through these topics first:
- What is React and how does it work?
- What are its advantages and disadvantages?
- Why is it so popular?
- How do you create a simple React project?
Brief Introduction
What is React?
React is a JavaScript library, which was developed by Facebook for building user interfaces (UIs). Those interfaces are used to handle the view layer for web and mobile apps. React can be used to create single-page applications, mobile apps or even more complex apps.
How does it work?
Before that, we must address some key terms:
- Component – reusable user interfaces which allow you to split your application into separate independent blocks. It accepts input with data (called a prop) and returns a React element so that it can be declared what should be seen on the screen. Components can communicate between each other using these “props” to create a more vivid and complex UI.
- State – basically what its name is – it is a representation of the application at any time, which means that based on a specific application “state”, we can easily control what information is processed and rendered to be displayed in the UI.
Now that we know what state and component are, we can safely answer how React works. It uses a one-way data flow, with which we can organise our components in a hierarchical structure – a tree, which allows us to assign a state to one component.
Due to this hierarchical structure, information is passed to its successors via a prop only when they are required. Children components cannot update the data directly using the same prop but rather require another prop – a function from their parent. This helps to create complex UIs without having confusing states and makes the app follow a logical path to display the correct information.
Pros vs Cons
Firstly, we will start with the advantages:
- It’s React-ive – whenever you make a change in your code, you don’t have to stop your current build and re-compile it again – React does this seamlessly on the go for you as you make changes.
- Easier to make and user-friendly – one of its main selling points is the time it requires to build a project. Due to its high amount of ready-to-use components from its growing community, a study shows a 33% improvement in development speed.
- One-for-all – React allows you to reuse some codebase across multiple platforms, which can be considered a big leap for full cross-platform development. As the community behind React is growing, it would be even easier to share non-UI dependent code.
- Open source – due the fact that it is also quite recent (from 2013), the library receives a lot of attention and community support from numerous developers. Currently, there are around 60 000 active contributors on Stack Overflow, which makes it easy for every developer to seek an answer to their problem.
Considering these advantages, React is basically perfect and everyone should be using it, right? Well, not entirely everyone. It mostly has two major disadvantages:
- The lack of some components – despite its growing community and the enormous amounts of well-documented and available components, some are still missing, which means if you would like to implement something that is missing, you would have to build it from scratch.
- Compatibility issues – React is still somewhat in a beta version. Different developers could work with different package versions, which would cause more trouble with the troubleshooting.
Popularity
You probably guessed it by now – its growing community and just how developer-friendly it is are the two key components. Moreover, the fact that it is open-source contributes a lot to that matter as more and more people could dig deep into the structure and provide solutions for everyone who has a technical problem. As a result, according to a 2021 Statista survey, React.js (the framework) makes it to first place, receiving a 40% share amongst the surveyed developers.
“Hello, React”
After we have seen what React is and how it works, we are going to see what are the requirements and how to make our first React project using a step-by-step guide.
- Step One – we need to download NodeJs – we can use this link. Once we install it, we can run this command to see if the installation is successful:
node -v
- Step Two – we need to install the create-react-app component, using the command:
npm install -g create-react-app
- Step Three – now we need to give a name to our project and create it using this command:
npx create-react-app my-app
- Step Four – we just have to navigate to our newly created folder “my app” and run this command:
npm start
That’s all, our first project was successfully created and can be accessed on https://localhost:3000/ – it was that easy.
