Introduction to React

What is React?

1) React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook. React is a tool for building UI components.
2)Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.
3)React finds out what changes have been made, and changes only what needs to be changed.
4) You will learn the various aspects of how React does this in the rest of this tutorial.

React Getting Started:

The ReactDOM. render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element. But render where? There is another folder in the root directory of your React project, named "public". In this folder, there is an index.html file. You'll notice a single in the body of this file. This is where our React application will be rendered. The HTML code in this tutorial uses JSX which allows you to write HTML tags inside the JavaScript code:Do not worry if the syntax is unfamiliar, you will learn more about JSX in the next chapter.

React Components :

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components. A class component must include the extends React. Component statement. This statement creates an inheritance to React. Component, and gives your component access to React. Component's functions.

React Class Components:

Before React 16.8, Class components were the only way to track state and lifecycle on a React component. Function components were considered "state-less". With the addition of Hooks, Function components are now almost equivalent to Class components. The differences are so minor that you will probably never need to use a Class component in React. Even though Function components are preferred, there are no current plans on removing Class components from React. This section will give you an overview of how to use Class components in React.When creating a React component, the component's name must start with an upper case letter. The component has to include the extends React. Component statement, this statement creates an inheritance to React. Component, and gives your component access to React. Component's functions.

React Events:

  • Adding Events React events are written in camelCase syntax: onClick instead of onclick. React event handlers are written inside curly braces: onClick = {shoot} instead of onClick = "shoot()". Put the shoot function inside the Football component: function Football() { const shoot = () => { alert("Great Shot!"); } return (); } const root = React DOM. create Root (document. getElement ById ('root') ); root.render();

    • React Lists :

  • In React, you will render lists with some type of loop. The JavaScript map() array method is generally the preferred method .function Car (props) { return ; } function Garage() { const cars = ['Ford', 'BMW', 'Audi']; return ()); } const root = ReactDOM. createRoot ( document . getElement ById ('root') ); root. render(); Keys allow React to keep track of elements . This way, if an item is updated or removed, only that item will be re-rendered instead of the entire list. Keys need to be unique to each sibling. But they can be duplicated globally.

    • Styling React Using CSS :

  • Since the inline CSS is written in a JavaScript object, properties with hyphen separators, like background- color, must be written with camel case syntax: A class component must include the extends React. Component statement. This statement creates an inheritance to React .Component, and gives your component access to React. Component's functions. The component also requires a render () method, this method returns HTML. Now your React application has a component called Car, which returns an element. To use this component in your application, use similar syntax as normal HTML: