What is React?

You want to be a front-end master developer? Then React as a library got you. React allows you as a developer to build large, scalabe applications quickly and painlessly. We can thus say that React encourages declarative approach as it describes what a program should accomplish .ie what the end result should be. In other words it leaves the determination of how to get to the end result to the program.

React creates a VIRTUAL DOM in memory. 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.

What does React entail?

It has:

Components and props

Components are the building blocks of React app. They help separate UI into small , reusable bits of code. Props are how data is shared between different parts of your application. They help separate code and functionality in a logical and easy to read way, producing highly reusable, and independent chunks. They comprise of Function components and class components.

Function component

function App() {
  return (
<div>
 <h2>Hi, I am an app!</h2>;
<Article/>
<Comment/>
</div>
)
}

Class component

class App extends React.Component {
  render() {
    return <h2>Hi, I am an app!</h2>;
  }
}

The naming convention of using a capital letter:

• Helps react developers to easily differentiate between JavaScript functions and React components.
• It is also a rule that we should follow for React to render our components correctly.

Props

const myElement = < brand="React" />;
function App(props) {
  return <h2>I am { props.brand }!</h2>;
}

The component receives the argument as a props object

JSX - JavaScript XML

This is React's declarative syntax representing the DOM. JSX is an extension of vanilla JavaScript. It looks like HTML and uses a lot of HTML syntax. Again it allows us to use JavaScript functions right along HTML and also allows us to add in components , which are separate, self-contained chunks of JSX.

const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

State and Events

These help make a dynamic website using React. For instance the useState hook is a state that re-renders DOM element in response to 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()".

 <button onClick={() => shoot("Goal!")}>Take the shot!</button>

Side effects and data fetching

An instance of useEffect hook with components to perform side effects and interact with API to fetch data. Hooks allow function components to have access to state and other React features.