What Is React?

React is not a framework. It is just a library developed by Facebook to solve some problems that we were facing earlier.ReactJS is a simple, feature rich, component based JavaScript UI library. It can be used to develop small applications as well as big, complex applications. React community also provides advanced concept like state management, routing, etc., on top of the React library.

Features of React

• Solid base architecture
• Extensible architecture
• Component based library
• JSX based design architecture
• Declarative UI library

Installation

Two ways to use react app in your project 1. Using CDN links 2. Using npm We'll discuss the installation process using npm. To install React you must have node installed in your system globally.Node.js Installation

Run the following command to create your first React app and starting it for first time:

npm create-react-app -index-project // installs necessary files to run react app
cd index-project
npm start // to start development server at localhost:3000

Understanding Folder Structure

• build: npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS and HTML file afterall Browser still understands these 3 languages only.

• public: contains index.html file with <div id="root"></div>

• src: all the development is going to happen inside this folder. This <App> component is thus rendered inside index.js file

• package.json: contains list of all the packages that our react-app is going to use.

• package-lock.json: contains the exact version of packages react app is using.

Basic concepts of React

1. Components and Props

Components let you split the UI into independent, reusable pieces, and think about each piece as a different components. Components allow us to avoid writing unnecessary code. Components come in two types:

• Functional components
• Class components

Props are arguments passed into React components. React Props are like function arguments in JavaScript and attributes in HTML.Props are immutable i.e. once set the props cannot be changed,

Let's consider an example for functional based component:

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

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

We can add styles to elements by inline style or by importing external stylesheet.

Let's understand above code:

1. We call root.render() with the element.
2. React calls the Welcome component with {name: 'Sara'} as the props.
3. Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.
4. React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.

2. State

The state is the driving force behind React apps. A state changes when a user performs a specific action or when a change occurs in the network. Without refreshing the webpage, the state allows end users to see changes in data in real time.

import React, {useState} from "react";

const MyComponent = () => {
    const [num, setNum] = useState(1);
    return (
        <div>
            <p>{num}</p>
            <button onClick={() => setNum((num+ 1))}>Increment Value</button>
        </div>
    );
};

• We can only set/change values of num by using setNum method
• On every onclick event on button, SetNum increments the value of variable num by 1.

3. React Hooks

React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side-effects.

React provides a bunch of standard in-built hooks:

• useState: To manage states. Returns a stateful value and an updater function to update it.
• useEffect: To manage side-effects like API calls, subscriptions, timers, mutations, and more.
• useContext: To return the current value for a context.
• useReducer: A useState alternative to help with complex state management.
• useCallback: It returns a memorized version of a callback to help a child component not re-render unnecessarily.
• useMemo: It returns a memoized value that helps in performance optimizations.
• useRef: It returns a ref object with a .current property. The ref object is mutable. It is mainly used to access a child component imperatively.

References:

• React.js Docs
• FreeCodecamp

Thanks for Reading any feedbacks and suggestions are highly welcomed !