ReactJS

Introduction to ReactJS

– ReactJS is a JavaScript library used to build user interfaces,

especially single-page applications (SPAs).
– It uses components to build UI and virtual DOM to improve
performance.
– Created by Facebook, it focuses on declarative views, making it
easy to manage states and updates.
HTML Tags
– HTML (HyperText Markup Language) forms the structure of a
webpage.
– Tags: Elements that define the structure and content of a page.
– Common Tags:
– <div>: Defines a division or section.
– <p>: Defines a paragraph.
– <a>: Defines a hyperlink.
– <img>: Defines an image.
– <h1> - <h6>: Define headers.
CSS (Cascading Style
Sheets)
– Inline CSS: Directly inside HTML tags using the style attribute.
Example: <h1 style="color: red;">Hello</h1>
– Stylesheet: Separate .css file linked to HTML using the <link> tag.
Example: <link rel="stylesheet" href="styles.css">
– Modules: Scoped CSS using module bundlers like Webpack,
ensuring styles don't leak into other components.
JavaScript

– JavaScript enables interactivity and dynamic behavior on web

pages.
– Script Tag: JavaScript code is embedded inside <script> tags in
HTML.
– External File: JS code can be written in external .js files linked
using <script src="script.js"></script>.
Creation of Project

– React App is created using create-react-app CLI

tool.
– Command: npx create-react-app my-app
– This sets up the basic file structure and necessary
dependencies.
– To start the project: cd my-app and npm start.
Render DOM

– React uses ReactDOM to render components to the DOM.

– ReactDOM.render(): The method that is used to render a React
component inside an HTML element.
– ReactDOM.render(<App />, document.getElementById('root'));
JSX Format

– JSX (JavaScript XML) is a syntax extension that allows mixing HTML

with JavaScript.
– It looks similar to HTML but must be wrapped in a single parent
element.
– Example: const element = <h1>Hello, world!</h1>;
– JSX gets transpiled into React.createElement() calls.
ES6 Topics - Classes

– ES6 introduces the class syntax to define components and

objects.

class Person {
constructor(name) {
this.name = name;
}
}
Arrow Function

– Shorter syntax for functions; no, this binding.

const greet = () => { console.log("Hello!"); }
Variables – var, let, const

– var: Function-scoped variable.

– let: Block-scoped, can be reassigned.
– const: Block-scoped, cannot be reassigned.
Array Methods

– map: Transforms array elements.

const doubled = array.map(num => num * 2);
– filter: Filters out elements based on condition.
const even = array.filter(num => num % 2 === 0);
– find: Returns the first element that matches a condition.
const firstEven = array.find(num => num % 2 === 0);
Destructuring

– Allows unpacking values from arrays or objects.

const { name, age } = person;

Modules – export, import

– export: Exports functions/variables for use in other

files.
– import: Imports functionality from other files.

export const add = (a, b) => a + b;

import { add } from './math';
Ternary Operator

– Shorthand for if-else statements.

const result = condition ? 'True' : 'False';
Spread Operator

– Unpacks and spreads elements of arrays/objects.

const arr = [...array1, ...array2];
ESLint

– ESLint is a static code analysis tool to identify problematic

patterns in JavaScript code.
– It helps enforce coding standards and prevent errors.
MySQL Integration with
NodeJS
– Node.js can interact with MySQL databases using the mysql
package.
– Install with: npm install mysql
– Example:
const mysql = require('mysql');
const connection = mysql.createConnection({host: 'localhost', user:
'root', password: '', database: 'test'});
connection.connect();
API Calls – Axios, Ajax

– Axios and Ajax is a promise-based HTTP client for making API

requests.
– Example
axios.get('https://api.example.com')
.then(response => console.log(response))
.catch(error => console.error(error));
– Methods: GET, POST, PUT, DELETE
Props

– Props (short for properties) are inputs passed to React

components to make them dynamic.
– They allow components to be reusable with different data.
Conditions
– If: Conditional rendering based on if statements.
if (condition) {
return <Component />;
}
– Logical: Using logical && to conditionally render elements.
{condition && <Component />}
– Ternary: Shortened conditional syntax.
condition ? <Component /> : <OtherComponent />;
Loops
– Foreach: Iterates over arrays without needing an index.
array.forEach(item => console.log(item));
– While: Loops as long as a condition is true.
while (condition) {
console.log("Looping");
}
– For: Standard loop for iterating over an array.
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
Components
– Functional Components
– Simpler components, often used with React Hooks for state management.
const MyComponent = () => <div>Hello</div>;
– Class Components
– Traditional React components that extend React.Component.
– State: Stores local data.
– LifeCycle Methods: Special methods like componentDidMount(),
shouldComponentUpdate().
– Render: Renders UI based on state and props.
React Hooks

– React Hooks allow functional components to

have state and lifecycle features.
– Common Hooks:
– useState: Manages state.
– useEffect: Handles side effects like data fetching.
– useContext: Consumes context API.
React Router
– Route: Defines individual route paths and their components.
<Route path="about" element={<About />} />
– Routes: Defines different routes that map to components.
<Routes>
<Route path="/" element={<Home />} />
</Routes>
– BrowseRouter: A wrapper component for handling routing in React.
<BrowserRouter>
<App />
</BrowserRouter>
React Redux
– Actions: Plain JavaScript objects that describe what happened in the
application.
const addAction = { type: 'ADD_ITEM', payload: item };
– Reducer: Pure functions that specify how the application's state changes
in response to actions.
function reducer(state = [], action) {
switch(action.type) {
case 'ADD_ITEM':
return [...state, action.payload];
default:
return state;
}
}
– Initial State: The default state before any actions are applied.
const initialState = [];
– useReducer: A hook for managing more complex state logic, similar
to useState but for more advanced scenarios.
const [state, dispatch] = useReducer(reducer, initialState);
– Store: A centralized object that holds the entire state of the app.
Changes in the store trigger UI updates.
import { createStore } from 'redux';
const store = createStore(reducer);
THE END