Introduction to React and its core concepts

• What is React?

• Advantages of using React

• The virtual Dom

• React Components

• JSX

• How to get started with React

In front-end development, JavaScript is the programming language for making websites functional and dynamic. It's advisable to learn HTML and CSS first. Once you've mastered JavaScript, exploring libraries like React.js will make it easy to build great websites. In this article, I'll explain React.js and its key concepts and why most developers prefer React to other libraries. Let's dive in!

What Is React?

First of all, it's not a framework :) React is a JavaScript library that was first developed by Facebook in 2011 and then became open-sourced in 2013.

React makes it easier to build interactive websites by breaking them down into reusable components. It uses the Virtual DOM to efficiently update and manage changes, allowing for faster and more dynamic web experiences.

Advantages Of Using React

There are other JavaScript libraries and frameworks but most people still go with React and one of the reasons is that it has a large community of developers and there are more tools and resources available to work with.

Aside from that, why do people smile when they move from JavaScript to React?

It's because of its "component-based" system.

Having to have a component in its file and being able to reuse it on other files is just a big flex. Using components makes your project easier to maintain, read, and reuse.

There are other benefits like using JSX which means HTML-like code within JavaScript which we will talk about later in this article. Also, react supports SSR (server-side rendering) which results in fast loading as it will only render components visible to the user.

The Virtual Dom

DOM (Document Object Model) is a tree-like structure that represents the HTML elements of your webpage. The virtual DOM is just like the DOM in your HTML but it's lightweight.

The virtual DOM allows React to update and render components on your webpage.

When a change is made in your component (A component in React.js is like a reusable Lego brick that contains a specific function or UI element.), the virtual DOM identifies the differences between what was there before and what was added and it will only update the part where a new change was made not your entire webpage.
After updating it, The virtual DOM will save it in its memory so any new changes that occur it will be able to identify what's new, update it, and save it to its memory.

This will help improve the performance of your webpage and reduce unnecessary rendering of components.

React Components

Components in react means spitting your UI into smaller pieces that can be reused in different files.

React Components can be classified into two types

1. Functional components

2. Class components

Functional components are like JavaScript functions that accept properties which are known as props.

function Hello(props) {
return <h1> Welcome, {props.name}! </h1>;
}

Class components are ES6 classes that extend React**.Component** class. It can maintain an internal state and handle lifecycle methods such as component initialization, updates, and unmounting.

class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; }

increment() { this.setState({ count: this.state.count + 1 }); }

render() { return (

Count: {this.state.count}

<button onClick={() => this.increment()}>Increment

In summary, components can be put together to build a complex UI that can be dynamic and functional.

JSX

JSX is a JavaScript extension syntax that stands for JavaScript XML which allows you to write HTML in React. Its components allow you to write HTML elements in JavaScript and directly place them in the DOM without using the createElement() method.

Example of how JSX looks like:

const Hello = <h1> JSX is great </h1>;

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

Things you should know about JSX

• It must have only one parent div or React fragment <> </> holding all other elements.

    const singleParent = (
      <>
        <h1>I am a heading.</h1>
        <p>I am a paragraph.</p>
      </>
    );
  

• HTML elements must be closed properly just like in XML.

    const closedElements = (
        <div>
            <input type="text" />
            <hr />
            <img src="" alt="" />
            <br />
        </div>
    );
  

• JSX requires you to use an attribute of className instead of class

    const myClass = <h1 className="myclass">Hello JSX!</h1>;
  

• JSX allows you to write JavaScript inside it but you must wrap it in a curly bracket {}

    const myJavaScript = <h1>React is {5 + 5} times better with JSX</h1>;
  

• To conditionally render a statement, JSX allows you to use an if statement and ternary operation but most people use ternary operation because they can use it inside the JSX while for an if statement you must use it outside the JSX or else it will throw an error.

    const x = 5;
    let text = "Goodbye";
    if (x < 10) {
      text = "Hello";
    }
  
    const ifStatement = <h1>{text}</h1>;
  

  Notice: I used the if statement outside and not inside the JSX

    const x = 5;
  
    const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;
  

  Here, I used the ternary operator which is why you're seeing it inside the JSX

How To Get Started With React

Let's install React on your computer, you can use this guide from the React doc or just follow these steps:

To get started, ensure that you have Node installed on your computer. You can check if Node is installed by running node -v and npm -v in your command prompt or terminal. If you don't have Node, you can download the latest version from the official website. If you already have Node but want to update it to the latest version, you can use the command npm update -g in your terminal.

After that, you can start creating your react app with this command:

npx create-react-app my-app

The my-app there means the name of your application. It can be anything you want to name your app

To navigate to your newly created app's directory, simply type the command cd my-app in the command prompt or terminal, where my-app is the name of your app.

Finally, to start your app and see it in your browser, use the command npm start to launch it, and then you can visit localhost:3000 to view your app in action.

Happy Coding!!!