harilee1325’s gists

harilee1325 / state-management

Created September 25, 2024 12:14

React Native State Management

	1. Local Component State (Using useState)
	For managing state within a single component, React Native's built-in useState Hook is often sufficient. This is suitable for simple use cases where the state is not shared across multiple components.

	Example:
	jsx
	Copy code
	import React, { useState } from 'react';
	import { View, Text, Button } from 'react-native';

	const Counter = () => {

harilee1325 / hooks

Created September 25, 2024 12:09

React Native Hooks

	1. useState Hook
	The useState Hook allows functional components to maintain internal state. This hook returns an array with two elements:

	The current state value.
	A function to update the state.
	Example:
	jsx
	Copy code
	import React, { useState } from 'react';
	import { View, Text, Button } from 'react-native';

harilee1325 / state-props

Created September 25, 2024 12:03

React Native State and Props

	1. Props (Properties)
	Props are short for properties. They are used to pass data from a parent component to a child component. Props are immutable, meaning that they cannot be modified by the component receiving them. Instead, they are read-only and used to render data or configure the component.

	Key Characteristics of Props:
	Passed from parent to child: Props allow data and functions to be passed from a parent component to a child component.
	Immutable: Once passed to a component, the component cannot modify the props.
	Read-only: A child component cannot change the props it receives, it can only use them.
	Functional or class components: Both functional and class components can receive and use props.
	Dynamic UI: Props help make the component dynamic by allowing it to change its output based on the data passed.
	Example of Props in React Native:

harilee1325 / functional-components

Created September 25, 2024 11:53

React Native Functional Components

	Functional components in React Native are a simpler way to define components using JavaScript functions. Unlike class components, which use class syntax and lifecycle methods, functional components are stateless (before the introduction of React Hooks) and rely on function input (props) to render UI elements.

	Since the introduction of React Hooks in React 16.8, functional components can now handle state and other React features previously only available in class components, making them the preferred way to write components in modern React Native applications.

	Key Features of Functional Components in React Native:
	Simpler Syntax: Functional components are just JavaScript functions that return JSX. They are generally shorter and easier to write compared to class components.

	jsx
	Copy code
	const MyComponent = () => {

harilee1325 / react-native-jsx.txt

Created September 25, 2024 11:38

React Native JSX

	JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML or XML. In React Native (as well as React), JSX is used to describe the UI components and structure. It allows developers to write UI components using a syntax that resembles HTML but is ultimately transformed into JavaScript.

	Key Points about JSX in React Native:
	Looks Like HTML: JSX syntax resembles HTML, making it intuitive for developers familiar with web development.

	jsx
	Copy code
	const MyComponent = () => {
	return (
	<View>

harilee1325 / gist:a76271bb5847a64c82f7356899ac4935

Created May 21, 2020 14:50

harilee1325 / gist:041ee9c41935ce8597970c03dc13291e

Created May 21, 2020 14:35

	from flask import Flask, render_template


	app = Flask(__name__)

	@app.route("/")
	def album():
	return render_template("album.html")

harilee1325 / gist:1fa6178dfc031a81ed4a8b64f3eb4979

Created May 21, 2020 14:34

	<!DOCTYPE html>
	<html lang="en">
	<title>Magazine</title>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">

	</head>
	<body>

harilee1325 / gist:57d91e3dd1c71994eca15d9b10986d81

Created May 21, 2020 14:33

	<!DOCTYPE html>
	<html lang="en">
	<title>Blog</title>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
	</head>

harilee1325 / gist:e652610a8f9482de98bf2523afd7e6e7

Created May 21, 2020 14:26

	<!DOCTYPE html>
	<html>
	<title>Album</title>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">

	</head>

Harilee harilee1325