teleren/devto huggingface dataset:
State-Props
Published: 2021-12-22 17:44:36

State

States are allowed to create and manage their own data. So unlike props , state can not pass data  with state, but they can create and manage it internally.

```
class Test extends React.Component {    
    constructor() {    
        this.state = {          
            name: "Toufiq"    
        };  
    }    
    render() {    
        return (      
            <div>             
              <p>{this.state.name}</p>      
            </div>    
        );  
    }
}
```
There is nothing useful going on in this case, but imagine doing something different based on the prop value, maybe setting a state value would be better.

A child component should never change its properties, so if something changes a variable, it should belong to the component state.

Child components can also use props to gain access to methods in the parent component. This is a good way to centralize management of state in the parent component and avoid children from having to manage their own state.


 
State should not be modified directly, but it can be modified with a special method called setState( ).

```
this.state.id = “hello”; // wrong

this.setState({         // correct  
    id: "hello"
});

```
Props
Props used to pass data between React components. React data flow between component is unidirectional(from parent components to child components)

Example 


```
class pComponent extends Component {    
    render() {    
        return (        
            <cComponent name="First Child" />    
        );  
    }
}

const cComponent = (props) => {    
    return <p>{props.name}</p>; 
};
```
ReactJS Basic Concepts
Published: 2021-12-22 17:43:19

## PropTypes

We can use the propType for validating any data we are receiving from props. propTypes are also objects where keys are the prop names and values are their types. Below syntax shows how to use propTypes: 

```
import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};


```

## State/Props

Props are short for properties and they are used to pass data between React components. React’s the data flow between components is uni-directional (from parent to child only). React has another special built-in object called state, which allows components to create and manage their data. So unlike props, components cannot pass data with state, but they can create and manage it internally.

## JSX

This is simple JSX code in React. But the browser does not understand this JSX because it's not valid JavaScript code. This is because we're assigning an HTML tag to a variable that is not a string but just HTML code. 

```
const jsx = <h1>This is JSX</h1>
```

## Component Lifecycle

Components are created (mounted on the DOM), grow by updating, and then die (unmount on DOM). This is referred to as a component lifecycle. There are different lifecycle methods that React provides at different phases of a component’s life. React automatically calls the responsible method according to the phase in which the component is.

## Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

## Custom Hooks

Custom Hook is a JavaScript function which we create by ourselves when we want to share logic between other JavaScript functions. It allows us to reuse some pieces of code in several parts of our app.

## Context API

The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.

## Virtual DOM

It’s a neat concept: instead of manipulating the DOM directly, which is error-prone and relies on a mutable state, you instead output a value called the Virtual DOM. The Virtual DOM is then diffed from the current state of the DOM, which generates a list of DOM operations that would make the current DOM look like the new one. Those operations are applied quickly in a batch.
Getting started with Next.js
Tags: nextjs, react, ssr, beginners
Published: 2021-12-22 17:34:31

Things to be done before starting.
- Download Node.js (https://nodejs.org/en/)
- Download XCode (Mac Only, https://developer.apple.com/xcode/)
- Create GitHub account(https://github.com/)
- Create Vercel account (https://vercel.com/)

```
node -v
```
You can check the version of you node. If it's not recently one, download a new one.
```
sudo corepack enable
```
and this will download yarn.(I'm using Mac)

```
yarn create next-app wine.likelion.com --typescript
// yarn create next-app { project name here } --typescript 
// if you add --typescript at the end, it means that I am going to use typescript
```
When it's all downloaded, check if it works
```
cd wine.likelion.com // to directory I will work
yarn dev
```


# Pages
I think I used router when I used React but there are pages in Next.js
If you make a directory(folder) or file inside Pages directory, they work like Router.
This was the first page I created.
```ts
import type { NextPage } from "next";

// NextPage type (because it's typescript, you should specify types)
const WinePage: NextPage = () => {
    return (
        <div>
           <h1>Wine</h1>
        </div>
    )
}

export default WinePage;
```
[Documentation - Page](https://nextjs.org/docs/basic-features/pages) in Next.js

# package.json
When you create next-app, you have package.json file in the directory.
It's JSON format and it records important metadata about a project which is required before publishing and also defines functional attributes of a project that it uses to install dependencies, run scripts, and identify the entry point to the package.
- **scripts**: Scripts are a **great way of automating tasks related to your package**, such as simple build processes or development tools. Using the "scripts" field, you can define various scripts to be run as **yarn run** **`<script>`**. 
eg) **`dev`** > **`yarn dev`** or **`build`** > **`yarn build`**
- **`dev`** > Development mode, not optimised, it skips error sometimes
- **`build`** > Production mode, it's to create a product that will be deployed 
- **`start`** > Start production server, used 
 to test in real environment
    - ** works only it does `yarn build`** then **`yarn start`**
- **`lint`** > spell, syntax check with ESLINT

[About package.json](https://classic.yarnpkg.com/en/docs/package-json)
Some Javascript Content
Published: 2021-12-22 17:26:14

JSX: Mainly JSX is a syntax extension for javascript. It helps us to write HTML in React. It convert HTML tags into React components. 

Lifecycle of React component:
There are four steps of React component lifecycle. 

a)initialization: Constract the components with props, 

b)Mounting: Rendering JSX, 

c)Updating: When a component update it helps to save the update,  

d)Unmounting: It is the final stage, where component is removed.
How to handle nested routes
Published: 2021-12-22 17:25:04

How to handle nested routes
An important concept for understanding the nesting route. When routes are nested, it is generally assumed that a certain portion of a web page remains static and only the child portion of the web page changes.

For example, if you visit a general blog, the title of the blog is always displayed, then a list of blog posts is displayed below it. However, when you click on a blog post, the list of blog posts is replaced by the content or description of that particular blog post. This is an example of how to handle nested routes in the latest version of React Router Library that is going to be performed in this section.

In Feedback Router v5, nested routes need to be clearly defined. This is not the case with the responsive router v6. It chooses one of the best components for rendering any match children for a specific route from the React Router library called Outlet. To get started, import outlets from the React-Router-Dome library

`import {
    Outlet
} from 'react-router-dom';`

To mimic a basic blog, let's add some mock data to the App.js file. The code snippet contains an object called BlogPosts which consists of more different objects as features. Each object consists of three things:

1. A unique slag of a post
2.The title of that post
3.Description of that post

`const BlogPosts = {
  '1': {
    title: 'First Blog Post',
    description: 'Lorem ipsum dolor sit amet, consectetur adip.'
  },
  '2': {
    title: 'Second Blog Post',
    description: 'Hello React Router v6'
  }
};`

This unique slag will be used in the URL of a web browser to view the content of each post. Next, create a function element called Post where a list of all blog posts is displayed

`function Posts() {
  return (
    <div style={{ padding: 20 }}>
      <h2>Blog</h2>
      {/* render any matching child */}
      <Outlet />
    </div>
  );
}
`
Define another component called post list which will display a list of all posts whenever the browser window URL http: // localhost: 3000 / posts hits. I use the JavaScript Object. entries () method to return an array from Object BlogPosts. This array is mapped to display a list of all blog post titles:

`function PostLists() {
  return (
    <ul>
      {Object.entries(BlogPosts).map(([slug, { title }]) => (
        <li key={slug}>
          <h3>{title}</h3>
        </li>
      ))}
    </ul>
  );
}`
`<Routes>
  {/* Rest of the code remains same */}
  <Route path="posts" element={<Posts />}>
    <Route path="/" element={<PostLists />} />
  </Route>
</Routes>`
Intermediate Exploration of some React library concepts
Tags: react, props, state, lifecycle
Published: 2021-12-22 17:19:25

**React Props**

When we call a child component in a parent component that time we pass data to the child component by props passing. Props bare object or any types value. We pass the state date to the child component by props. Props mean properties. For example, we have a parent component named `Person`. From here we pass name and age data to child component `Student` by props. This prop is `name` and `age`. Props are mutable.


**React State**

A state is an object of a component. We can store our component data in the state. We can change the data of state. The state holds the data of the component and its changes by the render of the component. For example, first, we create a state like that—

`const [count, setCount] = useState(0);`

Here we define state initial value 0. Then we create a function and this function implements the state increment value. So the state will be changed if the increment function call. Here count is a variable of state and sets count is a setter function of the state. The state is immutable.



**JSX**

JSX stands for JavaScript notation. It is a syntax of extension JavaScript which allows the direct HTML code in React. It is very easy to make a template using JSX in React. We write the code in react components these statements are JSX.


**Component Lifecycle**

Every component has several life cycles that are rendered at a particular time in the process. React let's define components as classes or functions. I give you examples of functional component basis life cycle methods. React functional components have a function that creates a section of the web page. The component has a state to hold data. When changing the state that time whole component will render. The component can call another child component for displaying state data pass by props. The component has all statements that are JSX statement that looks like HTML. It is created easily HTML template by JSX.

- Props
- useState()
- useEffect()
- JSX 


**Hooks**

Hooks are like the best features in React. It’s didn’t use the in-class component. Hooks are default features in reacting like that are methods. React has many built-in hooks.
Those are - 

• useState()
• useEffect()
• useParams()
• useContext()
• useRef()
• useReducer()

We can create our custom hooks. Hooks like that function and in the function create a state then return the state of the function. Then which component needs the custom hook that time it uses import in the component. Custom hook example —

```
import React, {useState} from `react`;

const useAuth = () => {
    const [user, setUser] = useState({});
    return {user, setUser};
}

export default useAuth;

```

**Context API**

Context api is like that store of the state that is set in the tower of components. If any component needs data at that time import the state from context can use data. We can’t pass child component to parent component data. So context API helps the usage data child component to any component.
CRUD
Published: 2021-12-22 17:16:58

CRUD is a short form of Create, Read, Update and Delete. These are the basic operations to perform with the database system. To interact with a database, we used crud operations. CRUD is used for anything related to databases and database systems. Software, Web Development can not be imagined without these operations nowadays. The CRUD also appears in the discussion of REST APIs. In HTTP, the GET, PUT and DELETE methods are crud operations as they can manipulate the states of target resources. For Database, we are showing this operation with MongoDB, which is a NoSQL database system. 

### **Create Operation**

Create or insert operations add new documents to a collection. If the collection does not exist, insert operations will create a new collection in the database.
MongoDB provides some methods to insert data in the database

```
db.collection.insertOne() New in version 3.2
db.collection.insertMany() New in version 3.2
```

### **Read Operation**


Read operations retrieve data from the collection of databases. The query is a collection of documents. 
There are some methods that we can use to read or find the data from the database

```
db.collection.find()
```

### **Update Operation**


Update operations updates or modify existing data from the data collections. We use some update methods to update or modify data the content in the database.

```
db.collection.updateOne() New in version 3.2
db.collection.updateMany() New in version 3.2
db.collection.replaceOne() New in version 3.2
```

### **Delete Operation**


Delete operations remove or delete data from the data collections. The methods of delete operation in nosql are - 

```
db.collection.deleteOne() New in version 3.2
db.collection.deleteMany() New in version 3.2
```
Why is PHP's popularity decreasing?
Tags: php, webdev, codenewbie, discuss
Published: 2021-12-22 17:16:20

## Five reasons from my perspective

Here is my attempt at answering this question that was posted on [Quora](https://www.quora.com/Why-is-PHPs-popularity-decreasing/answer/Logan-Lindquist). If you want a much more in-depth answer; the full details are available via post on [Medium](https://blog.llbbl.com/why-is-phps-popularity-decreasing-ec13c68202e5). Here I will answer the question using Memes because let's be honest that is the content we are really after. 

1. A choice in languages
2. The prevalence of Software Platforms as a Service
3. The increase in importance of First Contentful Paint in SEO
4. Maintenance is expensive
5. An abundance of entry level developers


## A Choice in Languages


![a choice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi72i8ms1tkhtrecjpm9.jpeg)


![in languages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18aoklcc8m0lcfnx4fbn.jpeg)


## The Prevalence of Software Platforms as a Service


![no software was the answer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yn03d8jtwpomlmnzssp9.jpeg)


![so much sass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg0gaomx4v8w03jracae.jpg)

## The Increase in Importance of First Contentful Paint in SEO


![seo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eao373w4ow9zcwki8dgi.jpg)


![who knows seo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfd8zgxtc7yl62buqvkn.jpg)




## Maintenance is Expensive


![it takes a team](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aof627ps6qfost7jxfao.jpg)


![business calls the shots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86ws1dsj4syzn2qltotn.jpeg)

## An Abundance of Entry Level Developers


![entry devs unit tests](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/958l489lazcpm8ts4g0g.jpg)



![sigh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fdhypantb79icubf1np.jpg)
React Concepts Component Cycle and JSX
Published: 2021-12-22 17:11:11

Component Lifecycle:
In react, each component has a lifecycle that can be monitored and manipulated during its three main phases.
The three phases are written below:
1. Mounting
2. Updating
3. Unmounting
 Mounting:
 Putting elements into the DOM indicated Mounting.
In the time of mounting, there are four build-in methods get called

- constructor()
- getDerivedStateFromProps()
- render()
- Component
Updating:
The changes to props or state cause an update. A component is being re-rendered when the methods are called in the following orders,

- Static getDerivedStateFromPops()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
Unmounting:
When a component is being removed from the DOM then the unmounting method is called.

- componentWillUnmount()
 

JXS:
The elaboration of JSX is Javascript XML. It indicates a simple syntax extension. HTML in React with Javascript code can be written directly with JSX. A Template can be easily created with JSX in React but it’s not simple syntax as it 
appears with the full power of Javascript.
Normal Javascript is slower than React’s JSX since it performs optimizations while translating into regular Javascript. React uses components for the purpose instead of separating the markup and logic in separated files.

Characteristics of JSX:
JSX is not mandatory but it makes react application simpler and easier
Expressions can be written in {}. It can be any React variable or JS expressions
React elements are produced by JSX
XML rule is followed by JSX
Camel case notation is used in JSX for naming HTML attribute.
Advantages of JSX:
HTML in React can be written easily with JSX
HTML tags can be converted easily to react elements.
JSX is faster than JS
Without using appendChild() or createElement() method ,JSX allows us to put HTML elements in DOM 
JSX is type-safe. At the time of compilations, most of the errors can be found.
JSX has injection attacks which prevent XSS (cross-site-scripting)

Disadvantages of JSX:
When HTML is not correct, JSX throws errors
A top-level element must wrap HTML code otherwise it shows errors
JSX will give an error if  HTML elements are not properly closed.
PropTypes
Published: 2021-12-22 17:09:52

PropTypes is a library that assists in reducing this problem in React by comparing the kinds supplied in the props object to a specification we established previously and raising a warning if the types passed do not match the types intended.
To utilize PropTypes, we must first install the library with the following command:

npm install --save prop-types

Different PropTypes and their Working:
PropTypes exports many validators that may be used to customize type definitions.
The following validators are used for fundamental data types:
any: This can validate properties of any data type.
symbol: This may validate properties using symbol data types.
func: Function This validator accepts PropType for validation.
array: This may verify a prop with an array data type.
bool: This can verify properties using Boolean data types.
string: This can verify properties using String data types.
object: This can validate props of the object type.
number: This may verify properties using Numeric data types.
 
Using PropTypes in React:
PropTypes is the internal technique used by React to apply type verification to components. To enable type verification, React components employ a specific property called propTypes.
Get some knowledge on REACT.js-
Tags: react, javascript, webdev
Published: 2021-12-22 17:08:55


## JSX


JSX is standard for JavaScript XML. it helps write HTML code in react. 
Code Example: 

```
const element = <h1>Hello, world!</h1>;
```
JSX is like a template language but it has the full power of JavaScript. JSX produces react elements that are rendered in the DOM section. Most of the people JSX use in react for visualization in UI side. JSX is useful for reactjs because it shows more error and warning messages.




## React Component Lifecycle


React’s has different lifecycle methods. A component’s lifecycle is classified into 4 parts:

> 1. initialization
> 2. mounting
> 3. updating
> 4. unmounting.

**Initialization**:

In this phase, the component is going to start by setting up the state and the props. This is generally done inside the constructor method.
 
 
**Mounting**:

Mounting is the phase-in  React component mounts on the DOM section. This phase comes when the initialization phase is completed. In this phase, react component renders the first time. The methods that are available in this phase are:  

> componentWillMount() and 
> componentDidMount()

**Updating**:

The 3 no phase through that react component passes. The component has created, when the mounting phase is done.  This is the phase where components state change and re-rendering. There are 3 methods on this phase:

> shouldComponentUpdate()
> componentWillUpdate()
> ComponentDidUpdate()

**Unmounting**:

Unmounting is the last phase in the component’s lifecycle. In this phase, the component gets unmounted from the DOM. In this phase method is:

> componentWillUnmount()