React is one of the most popular tools for building fast and interactive websites today. Created by Meta, it is a JavaScript library that helps developers build user interfaces—the parts of a website you see and interact with—by snapping together reusable pieces of code.
What Makes React Special?
Instead of building a webpage as one massive document, React lets you build it using smaller, reusable blocks. It also uses a clever behind-the-scenes trick called the “Virtual DOM.” Instead of redrawing the entire webpage every time a user does something, React only updates the exact piece of the page that changed. This makes the website run much faster. React Development pdf
Understanding JSX
JSX is a special syntax that lets developers write standard HTML code directly inside their JavaScript files.
For example, you can write something simple like this:
JavaScript
<h1>Hello World</h1>
Behind the scenes, React automatically translates this into the complex JavaScript code that the browser actually reads:
JavaScript
React.createElement('h1', null, 'Hello World')
JSX simply makes the code much easier for humans to read and write.
Modern JavaScript: ES5 vs. ES6
- ES5: The older version of JavaScript.
- ES6: The modern version, which introduced shortcuts and cleaner ways to write code (like classes and arrow functions).
React is typically written using modern ES6. Because some older web browsers cannot read ES6, developers use a background tool called Babel to automatically translate their modern code back into the older ES5 format so it works everywhere.
What Are Components?
Components are the basic building blocks of any React application. Think of them like Lego bricks used to build a webpage (for example, a website’s search bar, navigation menu, and footer would all be separate components). There are two main types:
- Class Components: The older way to build components. They use the “class” keyword and have built-in ways to manage complex data and track exactly when a component loads or unloads on the screen.
- Functional Components: The simpler, modern way to build components. They are lightweight, faster, and easier to test. They look just like basic JavaScript functions.
Here is an example of a simple functional component:
JavaScript
const HelloWorld = () => (<div>Hello World</div>);
How Data Moves: Props
“Props” is short for properties. It is the system React uses to pass data from a “parent” component down to a “child” component.
- Props are read-only. This means the child component cannot change the data it receives; it can only display it or use it as instructed by the parent.
Here is an example of pulling data out of props:
JavaScript
const { activity } = this.props;
