Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tush-tr/react-practices
Introduction to React.js and some practice projects in React.js
https://github.com/tush-tr/react-practices
html javascript javascript-es6 jsx nodejs react react-components reactjs
Last synced: 7 days ago
JSON representation
Introduction to React.js and some practice projects in React.js
- Host: GitHub
- URL: https://github.com/tush-tr/react-practices
- Owner: tush-tr
- License: mit
- Created: 2021-03-07T21:43:02.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-21T11:24:59.000Z (over 2 years ago)
- Last Synced: 2024-12-09T03:44:22.801Z (2 months ago)
- Topics: html, javascript, javascript-es6, jsx, nodejs, react, react-components, reactjs
- Language: JavaScript
- Homepage:
- Size: 2.64 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Start your React development Journey from Here..
Some projects I made during learning react are here
### Keeper App
## Contents
What is React?
Introduction to Babel and JSX.
JavaScript Expressions inside JSX
JSX Attributes and styling React Elements
React Components
JavaScript ES6 Import and Export modules
Local Environment Setup for React development
Props in React
Mapping Components
Some new ES6 functions on arrays and arrow functions
Conditional Rendering in react
What is state? declarative and imperative programming
Use State Hook
Destructuring in JavaScript
Handling events in React
Class components vs Functional Components
What is React?
A javascript library for building user interfaces.
We end up breaking down a very complex user interface structure into a component
tree.
Introduction to React, Babel and JSX
### Start HTML template for react project
```html
React App
```
Everything that we create using react will go inside this div(id=root)
All of code we do in the index.js file in JavaScript using react.
The first thing we have to do in index.js is require react and react-dom modules.
```javascript
var React = require("react");
var ReactDOM = require("react-dom");
```
### Render Function
ReactDOM.render()
to use React to actually create something on screen ,
we're going to use the render function.
render function takes three inputs. The first input is "WHAT TO SHOW".
second input is "WHERE TO SHOW IT", And finally we
can also add a optional callback to tell us when that render function has completed.
```javascript
ReactDOM.render("What to show","Where to show",()=>{
})
```
### Writing Hello World in React
```javascript
var React = require("react");
var ReactDOM = require("react-dom");
ReactDOM.render(
Hello World
,document.getElementById("root"))```
## What is JSX?
we're inside a JavaScript file
and we're able to write plain HTML without any sort of fancy angle brackets or for example the EJS
brackets or anything to denote that this is somehow not Javascript.
So what exactly is this magic?
Well this is what JSX does. React works by creating these JSX files, so files where we've got
HTML right in the body of a JavaScript file. And what happened behind the scenes is that our HTML
is picked up by a compiler and it gets converted or compiled down to actual JavaScript. And the compiler
comes from including this React module right here.
## What is Babel?
inside the React module, there is something called Babel. And Babel, as they tell you, is a JavaScript compiler. So it's able to take next generation JavaScript like ES 6, 7, 8 and compile it down
to a version of JavaScript that every browser can understand.
And this includes compiling JSX down to plain old JavaScript.
## React vs Vanilla JavaScript
```javascript
ReactDOM.render(
Hello World
,document.getElementById("root"))
// Vanilla js
var h1 = document.createElement('h1');
h1.innerHTML = "Hello World";
document.getElementById("root").appendChild(h1);
```
## Babel working
Babel actually goes a lot further than just
rendering JSX, It allows us to use some next generation JavaScript,
so for example ES6 OR ES 2015. And we can use some of the new constructs that are available through
these new versions of JavaScript and it's able to compile it down into bog standard normal JavaScript.
## Import Keyword- JavaScript ES6
instead of requiring the React module and setting it to a variable and doing all of this, the new
way of doing it is to simply just import React from a particular module or a particular location,
so in our case it's still the React module right here.
```javascript
import React from "react";
```
### Note:-
when we use this render method it can only take a single HTML element.
That means if you have two HTML elements back to back, then this is not going to work.
So we can wrap up all the element to a element of HTML just like this-
```javascript
ReactDOM.render(
Hello World
This is a paragraph
document.getElementById("root"))
```
JavaScript Expressions inside JSX
### Use JS Expressions inside JSX
If we wanted to insert JavaScript code inside the HTML inside the JavaScript file then what we have to do is to simply wrap the JavaScript inside a set of curly braces.
```javascript
const name = "Pan Card";
const Bb = ()=>{
return(
My document List
- {name}
)
}
ReactDOM.render(,
document.getElementById("root"))
```
Note:-
>We can add any JavaScript expression in between these curly braces which is injecting code into our HTML elements in our JSX file. But we can't write JavaScript statements.
### Statements vs Expressions in JavaScript
#### Statements
When we write programs - we describe the sequences of actions that should be performed to get a desired result. In programming languages those actions are called statements. So every Javascript program basically consists of statements. In Javascript statements are separated by semicolons.
```javascript
let declaredVariable; // variable declaration is a statement
let otherVariable = 0; // even with assignment
function functionCall() { // function declaration is a statement
}
if(true){} // if is statement
2+2; // even this is statement
```
#### Expressions
Simply speaking an expression returns a value:
```javascript
2+2
true
true && false
functionCall() // whatever the function returns
declaredVariable // whatever the variable value was
declaredVariable = 'new value' // assignment is an expression
```
### Template literals in ES6
if you come from another language you might know it as
string interpolation.
So basically injecting strings into a piece of JavaScript.
So the way we would do that is add a set of backticks and in between the backticks we can add a dollar
sign and then another set of curly braces
and inside here we can add a piece of JavaScript.
```HTML
Hello {`${fname} ${lname}`}
```
JSX Attributes and styling React Elements
Even though JSX looks like HTML, it's still being rendered down to JavaScript. And
in JavaScript the property to access all of the classes that exist on an element is a property called
className.
So In JSX we use html attributes in a different way same as in Javascript.
```javascript
My Favourite Foods
```
### Including jsx file in HTML file
```HTML
```
Our HTML file doesn't know that this index.js file is in fact a JSX file. So how to solve this...
```HTML
```
when we add an attribute in normal
HTML, it's not camelcase like this where the first word is lowercase and the next words are capitalized
like the end for name here.
> Attribute name should be in camel case
```JSX
```
> Tags should be self closing
```JSX
```
## Inline Styling in React JSX
In Javascript, it wants this value for the style property as a Javascript object.
Javascript objects look like this:
```JavaScript
{
color: "red",
}
```
they exist in a set of curly braces
and then they have key-value pairs.
So in this case, the key would be the word color and this would behave a bit like a variable, so it's not a string.
Whereas the value, in terms of CSS anyways, is going to be a string.
So in this case, it will be red.
And each of these key-value pairs in a Javascript object is separated by commas not semicolons as you
would see in the style sheet.
```JSX
import React from "react";
import ReactDOM from "react-dom";
const stylesheet = {
headingStyle: {
fontSize: "20px",
border: "1px solid black",
color: "red"
},
contentStyle: {
color: "pink"
}
};
ReactDOM.render(
Hello World!
loremrerniovn prov eivr ikepv evi gkpev ti
document.getElementById("root")
);
```
If at some point in our code something changes let's say the user did something or the day changed or the time changed became
morning to night, something happens and we wanted to change the style of our h1.
We don't have to touch any of our code in here.
All we have to do is to just update the properties of our custom style object.
```JSX
stylesheet.headingStyle.color = "blue";
```
React Components
Give your components a name that is in Pascal case which means that every single word has the first letter capitalized.
Call this component heading and let's open up a set of parentheses and open up a set of curly braces.
Now in this heading function, all that it's going to do is to return a HTML element that is created using
Javascript.
```JSX
const Heading = () => {
return (
My Favourite Foods
- Bacon
- Jamon
- Noodles
);
};
```
## How react differentiate between custom components vs DOM elements
All of our components have names which start with
a capital letter using Pascal case.
And this allows React to differentiate between the custom components that we're building versus the
HTML elements that we're trying to get hold of that exists in the DOM.
### Rendering our custom component
```JSX
ReactDOM.render(, document.getElementById("root"));
```
We can do like this too
```JSX
ReactDOM.render(, document.getElementById("root"));
```
> AirBNB React Styling Guide
## Including Components per seperate file
If I had a very large website and I had all of my components cluttering index
.js that would be terrible.
So we're going to use a ES6 feature where we import our heading component from a separate file and it's
going to be very similar to what we're doing with React and ReactDOM. But in this case we're going to be doing all of the importing and exporting ourselves.
we would have all of our components separated into individual files with the JSX extension.
like this--
> Heading.jsx
#### Importing jsx files into index.js file
we have to use the ES6 import export functionality.
#### Export Function
In the file where we've got our component, We're going to export this heading function as the default export.
```JSX
export default Heading;
```
So I'm going to import heading from that heading.jsx file.
So I'm going to use the relative path
so ./, and then heading.jsx
But of course in ES6 the extension of the file is actually optional.
```JSX
import Heading from "./Heading";
```
In mostly cases index.js just has a custom component called App. And instead of all of these things,
we would have a custom file called App.jsx and inside here we would have all import statements.
we would render our component as a function called App which returns a div
which contains that heading custom component as well as the list custom component.
#### Index.js file--
```JSX
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
,
document.getElementById("root")
);
```
#### App.jsx file
```JSX
import React from "react";
import Heading from "./Heading";
import List from "./list";
const App = () => {
return (
My fav Places
);
};
export default App;
```
remember that each of these components can now be reused as and when we want to.
JavaScript ES6 Import and Export modules
#### Exporting something from a module(file) of javascript
math.js file
```javascript
const pi = 3.14;
export default pi;
```
#### Importing the file in another file
```javascript
import pi from "./math";
// pi 3.14
```
creating a default export means that when another file writes import something
from this file, that something is going to be equivalent to the default export. You can use any variable to import that file default export will be imported.
```javascript
import x from "./math";
// x == 3.14
```
what if we had more than one thing in this file math.js?
### How would we export multiple things?
If you want to export more from this file you can export without using default like this.
```javascript
const pi = 3.14;
const add=(a,b)=>{
return a+b;
}
export default pi;
export {add};
```
And how we can import these other things to an external file?
```javascript
import {add} from "./math"
```
>What import and
export and the concept of modules allows us to do is to really be able to start splitting up our large
Javascript files into individual more manageable components.
How to import everything from a module?
```javascript
import * as m from "./file";
```
Local Environment Setup for React development
- Check node js is up to date
- Install VS code(or any editor of your choice)
-
Create React AppEasiest way to create a new react application.
```Bash
$ npx create-react-app my-app
``` - Running React App
```Bash
$ cd my-app
$ npm start
```Inside our source folder
the only ones that we want to keep is the index.js.
And we're going to delete everything else.
Props in React
When we code in plain html we can't define our own attributes as well as elements.
But in React components we have almost as a custom HTML element then we can define these attributes.
And in the React component world, those attributes are called properties and you'll usually hear them
referred to as props.
So let's create a reusable component card, let's say every card has students informatoion like name, class, section, roll no.
“props” (which stands for properties) object argument with data and returns a React element.
```java
const Student = (props)=>{
return(
{props.name}
{props.rollno}
{props.class}
{props.section}
)
}
```
How to use these reusable components with props?
```HTML
```
When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.
Mapping Components
Mapping components make it easy for us to
map all of individual custom pieces of data to each of these custom components.
```HTML
```
we don't need now to repeat these components
## Map function
map function is a Javascript function that's really useful for handling arrays such as our contacts
array.
like this array currently contains three items. And each of these are a Javascript object with
the same properties but different values.
```javascript
const contacts = [
{
id: 1,
name: "Beyonce",
imgURL:
"https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",
phone: "+123 456 789",
email: "[email protected]"
},
{
id: 2,
name: "Jack Bauer",
imgURL:
"https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg",
phone: "+987 654 321",
email: "[email protected]"
},
{
id: 3,
name: "Chuck Norris",
imgURL:
"https://i.pinimg.com/originals/e3/94/47/e39447de921955826b1e498ccf9a39af.png",
phone: "+918 372 574",
email: "[email protected]"
}
];
```
### use map function for using this array for rendering its items
This map function as the input
the thing that should go inside these parentheses, it expects an actual function.
So in this case we're calling a function and then passing it a function.
```javascript
arr.map((element)=>console.log(element))
```
### functional programming
where instead of
passing values around your code, you're passing functions into functions even into functions.
Now we use map function for rendering our contact cards from contact array--
make a createCard function that returns card with props of passed argument
```javascript
const createCard = (element)=>{
return
}
```
add map function instead of many card components like this
```JSX
{contacts.map(createCard)}
```
what the map function does is it loops through this
array of contacts
and for every single item that exists in the array, it calls the createCard function and it passes over
each of the objects inside the array.
we can also do the same thing like this
```javascript
{contacts.map((contact)=>{
return
})
}
```
### key property
we will have to give components a property that has to be
called key. And this property has to be something that is unique amongst each of these card components
that's being created using this loop.
```HTML
{contacts.map((contact)=>{
return
})
}
```
key prop has to be spelt exactly like this and it's expected by React. And the value can be
a string or it can be a number, but it must be unique across all of the repeated components.
key property for each React component is a special property.
And it's used to ensure the right order of items goes into the tree, We can't use it as a prop.
Map/Reduce/Filter ES6 functions
we will look at some of the related functions
that help us deal with arrays such as map, filter, reduce find, and find index.
## map() function
Create a new array by doing something with each item in an array.
let's look at this array I have of numbers
```javascript
let numbers = [12,34,56,545];
const double = (n)=>{
return n*2;
}
let newNumbers = numbers.map(double);
```
If I pass this function double into my map function, then it's going to loop through my numbers array
and for each of the numbers in there it's going to put it as the input of this function and output a
new array with each item replaced with double the size of the previous one.
#### How to do the same thing using foreach method
```javascript
let newNumbers = [];
numbers.foreach((n)={
newNumbers.push(n*2);
})
```
So it's more concise using map because this function itself actually returns an output
which is a new array.
## Filter function
Create a new array by keeping the items that return true.
```javascript
const num = [2,3,5,7,12,45,34];
const newArr = num.filter((e)=>e<10)
console.log(newArr)
```
Do the same thing with foreach--
```javascript
let newArr = [];
num.forEach((e)=>{
if(e<10){
newArr.push(e)
}
})
```
## Reduce Function
Accumulate a value by doing something to each item in an array.
get sum of all elements in an array using foreach
```javascript
let arr = [1,2,53,7765,3,5];
let sum = 0;
arr.foreach((num)=>{
sum+=num;
})
```
Do the same thing using reduce function
```javascript
let sumOfnum = num.reduce(function(Accumulator, currentnumber){
return Accumulator+currentnumber;
})
```
## Find
Find the first item that matches from an array.
```javascript
let findnum = numbers.find((e)=>e>10);
```
## FindIndex -
find the index of the first item that matches.
```javascript
let findnum = numbers.findIndex((e)=>e>10)
// OR
findnum = numbers.findIndex((e)=>{
return e>10;
})
```
## Arrow Functions
also known as the fat arrow.
Arrow functions allow us to write shorter function syntax:
```js
let hello = () => {
return "Hello World!";
}
```
Conditional Rendering in React
what if we have to render a component based on the condition?
As we know in JSX we can only use js expression inside curly braces but we can't use javascript statements and we can't use if/else statement inside our jsx code.
so what we can do for this?
create a new function(or component) and return our jsx code conditionaly like this
```html
const RenderOrNot = ()=>{
if(true){
return(
You are In
)
}
else{
return(
No you can't go inside
)
}
}
```
## Ternary Operator
```javascript
condition ? Do if true : Do if false
```
we can use ternary operator inside jsx code
```HTML
function App() {
return (
{istrue ?
You are in
:You can't go inside
});
}
```
## AND operator
### && in JS
(Expression && Expression)
(x>2 && x<8)
### && in React
condition && Expression
true && expression
false &&expression
State in React
this is a really central concept to how React does things.
The idea is that the UI(user interface )that somebody's looking at your website sees is a
function of the state of your app.
```javascript
let isDone = false;
function App(){
return(
Todo Task
)}
```
>
>we have a user interface that is dependent upon the value of a state variable.
>
## Declarative programming
this kind of programming is often known as declarative programming. We're declaring
when we're writing our code how our user interface should look under different conditions dependent
upon the state.
## Imperative programming
this is what we've been doing all along
using Javascript.
```js
document.getElementById("root").style.textDecoration = "line-through";
```
Use State Hook
## What are hooks?
A way of being able to make our website interactive and actually have changeable state.
### we can't change rendered elements inside our jsx code
If we want to update we have to re-render all of this.
one way of doing this would be to call ReactDOM.render all over again inside our function(for changing elements ).
```JSX
var count = 0;
const increase = ()=>{
count++;
console.log("Got clicked")
}
ReactDOM.render(
{count}
{
// this will not gonna changed(value of count) because
// It has rendered once
}
+
document.getElementById("root")
);
```
So what we have to do for updating everytime button gets clicked is render elements everytime like this
```JSX
var count = 0;
const increase = ()=>{
count++;
ReactDOM.render(
{count}
+
document.getElementById("root")
);
}
```
We have all of this repetition
that's not really doing anything for us.
## UseState hook
So how do people actually solve this problem using React?
Well this is where hooks come in. And there's a hook code useState that is perfect for this situation.
But one of the rules for using hooks is that you must use a hook inside a functional component.
>So we have to create a function that renders a component and then inside that function we can use hooks.
```javascript
function App() {
const state = useState();
function increase(){
}
return (
{count}
+
);
}
```
if we console log our usestate variable value it will return like this
```
[undefined, ƒ bound dispatchAction()]
```
if we pass a value in our useState() hook like this
```js
const state = useState(0); // inside parentheses our starting state
// output- [0, ƒ bound dispatchAction()]
// we can get out starter state like this-
console.log(state[0]);
```
### Destructuring
in JavaScript ES6 there's this concept called destructuring and what it allows you to do is to destructure a complex structure.
So the complex things in JavaScript are objects and arrays.
let's say we have an array like this one
```js
const students = ["Tushar", "Rahul","Sahul"];
```
We can destructure this array,so that instead of having this name students, we can use a set of square
brackets. like this and then we can provide some names for each of the
elements inside the array ordered by their positions.
```js
const [student1, student2, student3] = ["Tushar", "Rahul","Sahul"];
```
> Note: only when working with arrays - arrays are declared using square brackets, so we also deconstruct them using a square bracket.
We can use this concept with our state like this
```js
const [count] = useState(0);
```
so count is our starter state now and now we can use or render our state like this--
```HTML
{count}
```
So how do we use this useState hook to update its value?
Well remember that we mentioned that this array that gets returned from this function has two items.
The first one is a value
and the second one is a function.
so lets give the function a name like this-
```js
const [count, setCount] = useState(0);
```
and now we can use this function for interactivity in our starter state
```js
function App() {
const [count, setCount] = useState(0);
function increase(){
setCount(12)
}
return (
{count}
+
);
}
```
now if we want to increase our starter state by 1 on pressing the button so we can do like this
```js
function increase(){
setCount(count+1)
}
```
Destructuring Assignment in JavaScript
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
```js
let a, b, rest;
[a, b] = [10, 20];
console.log(a);
// expected output: 10
console.log(b);
// expected output: 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: Array [30,40,50]
```
## Object destructuring
Basic assignment
```js
const user = {
id: 42,
is_verified: true
};
const {id, is_verified} = user;
console.log(id); // 42
console.log(is_verified); // true
```
lets destructure this array of objects
```js
cars = [
{
model: "Honda Civic",
//The top colour refers to the first item in the array below:
//i.e. hondaTopColour = "black"
coloursByPopularity: ["black", "silver"],
speedStats: {
topSpeed: 140,
zeroToSixty: 8.5
}
},
{
model: "Tesla Model 3",
coloursByPopularity: ["red", "white"],
speedStats: {
topSpeed: 150,
zeroToSixty: 3.2
}
}
];
```
```js
let [honda, tesla] = cars
let {speedStats: {topSpeed: hondaTopSpeed}} = honda;
let {speedStats:{topSpeed: teslaTopSpeed}} = tesla;
let {coloursByPopularity:[hondaTopColour]} = honda;
let {coloursByPopularity:[teslaTopColour]} = tesla;
```
Handling events in React
let's say we have a function
```js
const clicked =()=>{
console.log("Clicked")
}
```
and we can use this function to handle onclick event like this
```js
Submit
```
if we have to change some content on the page after clicking the button, then we can use our useState hook like this
```js
const [headingText, setHeadingText] = useState("Hello");
const clicked =()=>{
console.log("Clicked")
setHeadingText("Hello Tushar")
}
```
>See this sandbox for more about handling events
Class Components vs Functional Components
once upon a time, there were two ways of adding state into a React app.
One way or what you might call functional components, look like this.
```js
function App(){
return(
Hello
)
}
```
there's also another way that you can in fact create React components. Instead of splitting
individual components into functions,
you can also create a class. And the only difference is the keyword, instead of function becomes class.
Classes are not called, so they don't have these parentheses.
And this class must extend something that comes from the React module something called component.
And this turns your app class into a React component class. And in order to render what you want to see
inside this component, you have to add your code inside a render method.
```js
class App extends React.Component {
render() {
return
Hello
;}
}
```
in the past, the main reason why people converted their functional components into class components
was because it was required in order to have state.
State and Lifecycle
## Converting a Function to a Class
You can convert a function component like Clock to a class in five steps:
- Create an ES6 class, with the same name, that extends React.Component.
- Add a single empty method to it called render().
- Move the body of the function into the render() method.
- Replace props with this.props in the render() body.
- Delete the remaining empty function declaration.
```js
function Clock(props) {
return (
Hello, world!
It is {props.date.toLocaleTimeString()}.
);
}
ReactDOM.render(
,
document.getElementById('root')
);
// OR
class Clock extends React.Component {
render() {
return (
Hello, world!
It is {this.props.date.toLocaleTimeString()}.
);
}
}
```
So what does managing state using classes actually look like?
Counter app using class component
```js
import React from "react";
class ClassComponent extends React.Component {
constructor() {
super();
this.state = {
count: 0
};
this.increase = this.increase.bind(this);
}
increase() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
{this.state.count}
+
);
}
}
export default ClassComponent;
```
counter app using functional component and hooks
```js
function FunctionalComponent() {
const [count, setCount] = useState(0);
function increase() {
setCount(count + 1);
}
return (
{count}
+
);
}
```
>what the React team recommends is that if you're writing new code that you should start using hooks instead of classes because this is a much easier way of managing state.
>you can only use hooks with functional components. You can't use it inside a class component.
>
> Tushar Rajput
> tush-tr.github.io
>
>