INTRODUCTION TO REACT (21)
- What is React?
React is a JavaScript library
- React is sometimes referred as…
Frontend JavaScript Framework.
- React is used to build…
Single page applications.
- React allows us to create…
Reusable UI components.
- React creates __ in memory.
Virtual DOM
- How React’s virtual DOM works.
Instead of using browsers DOM React creates a virtual DOM in memory where it does all necessary
manipulations. Once done it changes the browsers DOM.
- React only ___ what it should be __
React only changes what it should be changed.
- When React is developed?
In the year of 2013
- Who developed React?
Jordan Walke
- Who is Jordan Walke?
A software engineer at Facebook.
- What is create-react-app?
Create-react-app is a officially supported way to create react apps.
- What is npm?
Node Package Manager.
- npm server address…
localhost:3000
- What is ES6?
ES6 stands for ECMAScript 6
- ES6 was created in the year of…
2015. That’s why it is called as ECMAScript 2015 too.
- What is the version number of ES6?
ES6 is the 6th version of ECMAScript.
- Why ECMAScript was created for?
To standardize JavaScript.
- ES7 is released?
Yes. In the year of 2016.
- ES6 introduced features like…
1. Arrow functions.
2. Array methods like .map()
3. Modules
4. Ternary operators
5. Spread operators
6. Classes
7. New variables like var, constant and let.
8. Destructuring
- Remembering key: someone is shotting arrow (arrow function) to a map (array methods
like .map). A rabbit jumped out of that map and showed a module. On that map there is a tolet
board (var, let and const variable). On that module there is a class. The rabbit jumped inside of a
lady vagina when the lady spread her legs (spread operator). Inside of that lady the rabbit went
to her lung and started smoking with tartar inside her lung. There he destructured her lung and
killed her.
INSTALLATION(6)
Step 1: Install Node.js and npm
- Download Node.js from https://nodejs.org/en/download/
How to check whether Node.js and npm is installed or not?
- Run CMD
- Run these commands.
node -v and npm -v
Step 2: Install “create React app” tool
- Run CMD
- Run this code…
npm install -g create-react-app@latest
- CD to the app folder (we must CD to the app folder otherwise npm server will not start)
- Run the development server using…
npm start
How can we Uninstall crate-react-app installed globally?
Run CMD
Provide this command…
npm uninstall -g create-react-app
- How can we see current React version?
Method 1: We can run this command in CMD.
Then we need to run this command…
npm list react (Windows), npm ls react(Linux distros)
(https://docs.npmjs.com/cli/v10/commands/npm-ls)
Method 2: Within our installed app folder we can browser node_modules\react folder and open
package.json file. Within this file we will be able to see the version number as like "version":
"18.2.0".
Method 3: We can use this piece of code inside the src directory’s index.js file.
import React from 'react';
import ReactDOM from 'react-dom/client';
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.version);
- How to update React?
We need to CD to the project folder and issue this command…
npm i react@latest react-dom@latest
-
CREATE A REACT APP(11)
- How to create a React app?
1. Run CMD
2. Create a folder using mkdir [folder_name]
3. CD to the folder
4. Run this command…
npx create-react-app [app_name]
5. CD to the app name folder
6. Run React server using this command…
npm start
- How to edit the default React app?
1. CD to the src folder.
2. Open App.js file to edit. Save the file. The changes are immediately visible.
- How many arguments are taken by createRoot() function?
createRoot() function takes only one argument.
- Why do we use createRoot() function?
To define a HTML element where React component will be displayed.
- What is render()?
render() is a method.
- Why do we use render() method?
We use render method to define React components which needs to be rendered.
- root is the ID of which element?
There is a file inside public/index.html (this public directory is inside the root directory of a project
directory). Within this file there is a div element. The ID of this div element is root.
- Exercise: Display a paragraph inside the root element.
const container = document.getElementByID(‘root’);
const root = ReactDOM.createRoot(container);
root.render(<p>Hello World!</p>);
- The root element ID should be called root?
No. We can call it anything we want but the convention is root.
- How to create a variable with HTML codes?
const myelement = (
<table>
<tr>
<th>Names</ht>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Amber</td>
</tr>
</table>
);
const container = getElementByID(‘root’);
const root = ReactDOM.createRoot(container);
root.render(myelement);
- The root element must be div element?
It can be any element like <h1 id=”root”>, <p id=”root”> etc.
REACT VARIABLE (10)
- Before ES6 what do we used to define React variables?
We used to use the var keyword to define variables.
- In ES6 how many ways are available to define variables?
3 ways.
1. var
2. let
3. const
- Describe scopes of variables declared using var…
1. If we declare a variable using var and if it is outside of a function the variable belongs to the
global scope.
2. If we declare a variable using var and if it is inside of a function the variable belongs to only
that function.
3. If we declare a variable inside of a block for example inside a loop the variable still belongs
to the global scope.
- var has a ___ scope…
var has a function scope not a block scope.
- Describe scope of a variable declared using let keyword.
1. If we declare a variable using let and if the variable is inside of a loop; the variable belongs to
only that loop.
- I must read this fully…
https://stackoverflow.com/questions/762011/what-is-the-difference-between-let-and-var
https://codedamn.com/news/javascript/difference-between-let-and-var-in-javascript
https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
- let has a ___ scope…
let has a block scope.
- What is const?
If we declare a variable using const we can not change the value of this variable in future.
- const scope?
const has a block scope.
- If we use const keyword we can not…
1. Reassign a const value.
2. Reassign a const array.
3. Reassign a const object.
- But we can…
1. Change the elements of a const array.
2. Change the properties of a const object.
REACT COMPONENTS (13)
- What are React components?
React components are like functions and classes.
- What do React components do?
React components return HTML elements.
- React components serve the …
Same purpose as JavaScript functions do.
- How many types of components available?
There are 2 types of components…
1. Class components.
2. Function components.
- Which components are recommended to use?
Function components with hooks.
- Component names must ___
Component names must start with upper case letters.
- Function component syntax…
Here is a function component named as Car.
function Car() {
return(
<>
<p>I have a red car</p>
</>
);
}
- How can we call a function component?
<Car />;
- Example of calling a function component…
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
- Can we call a component within another component?
Yes we can call a component within another component.
- Example of calling a component within another component…
function Car() {
return <p>I am a car</p>;
function Garrage() {
return (
<>
<h1>This is header</h1>
<Car />
</>
);
}
- How to save components in separate files?
Step 1: We need to write components in separate files with .js extention. Also we need to include
this statement…
export default component_name;
Step 2: To import the component we need to do as following…
Import Component_name from ‘./external_file_name.js’;
- How can we return multiple components from one separate file?
function App(){
return(
<Car />
<Info />
);
function Car(){
return <p>I am a car</p>;
function Info(){
return <p>I am Red</p>;
export default App;
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from "./sub/common header.js";
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);
REACT PATH (4)
- React project tree starts from…
Project root.
- So if we want to import from current root directory we need to…
import Component_name from “./file_name.js”;
- If we want to import from a sub directory…
import Component_name from “./dir/file_name.js”;
- How to import from absolute path?
Import tast from C:/Users/in2rafi/React/hello-world/src/dir/file_name.js;
