React Tutorial Step by Step with Examples
React is an open-source JavaScript library for developing user interfaces in web applications. The initial release was in May 2013 by Facebook. Since then, React has climbed its way to become one of the leading user interface-building libraries today. Approximately 5,010,000(3.2% percentage of all websites) websites use React. It has a major community behind it and the React skill is in high demand by many companies in today's world. React has a relatively easier learning curve compared to other technologies. Since it is built using JavaScript, developers can easily learn or migrate to React.
The aim of this tutorial is to,
Guide you through the topics in React with simple and comprehensive examples for a better understanding.
Things to know before learning React
1. HTML
HTML is the markup language in any front-end library or framework. Similarly, React uses HTML in its virtual DOM. Every component in React will output an HTML section. Developers need to have knowledge of semantic HTML tags. Semantic HTML tags clearly describe what it represents.
2. CSS
Since we use HTML, CSS is used to add styles to React applications. We can add CSS at the component level to make them private to the component or add CSS at the application level to make them globally available to every component. It is essential to have knowledge of CSS selectors, media queries, and box models. Having knowledge of responsive frontend frameworks or advanced CSS languages is definitely an added advantage to the developer.
3. JavaScript
By definition, React is a JavaScript library. React's virtual DOM is manipulated using JavaScript. Developers need to have sound knowledge of data types, variable declarations, functions, operators, conditions, loops, data structures, promises, and asynchronous programming. Not having these skills will slow down learning React.
4. Node.js
Node.js is a cross-platform JavaScript runtime environment developed using the V8 JavaScript engine. React runs on Node.js environment. Developers need to have basic skills to install and manage Node.js environment.
5. Node Package Manager
Since React is a popular library, many pre-made packages are available to integrate into our applications. These packages can be installed using Node Package Manager. Basic Node.js CLI skills such as installing required packages, handling dependencies, and managing versions of installed packages are essential for React development. Installed packages are listed in the package.json file's dependencies block.
