[React] Week1_1

Introduction to React :

Using basic JavaScript syntax:

Acquire ES6 syntax and use map and filter within React components.

Understanding React's characteristics and utilizing components:

Understand the background of React's birth in the modern web and divide it into reusable component units within the screen.

Understanding and utilizing React's Props and State concepts:

Understand why immutability must be maintained and use props and state to pass functions.

 

Assignment: Create a Todo List.

 

 

 

1. What is React?

React is a declarative and efficient JavaScript library for building user interfaces. It is known as "components" and helps to construct complex UIs using small, isolated pieces.

Main features:Component-based: React allows you to break down your UI into reusable and independent pieces called "components" which can be composed to create complex UIs.

• Declarative views

Declarative views: With React, you can declare what you want your UI to look like and React takes care of updating the actual UI to match your declaration.

• JSX

JSX is a syntax extension to JavaScript that allows you to write HTML-like code within your JavaScript code. It makes it easier to create and manipulate React components.

• Hooks:

Hooks are functions in React that allow you to use state and other React features in functional components (instead of just class components). They make it easier to reuse logic across components.State & Props

• State & Props:

In React, state represents the internal data of a component while props represent the data passed down to a component from its parent component. State can be updated within a component while props cannot be modified within the component.

• Component-based:

React allows you to break down your UI into reusable and independent pieces called "components" which can be composed to create complex UIs.

 

Official doc : 

https://ko.legacy.reactjs.org/docs/faq-internals.html#gatsby-focus-wrapper

Virtual DOM과 Internals – React

 

1-2. Javascript ES6
ES6 (ECMAScript 2015) is the sixth major version of the ECMAScript language specification, which is the standardized specification for JavaScript. It was released in 2015 and introduced many new features and syntax improvements to the language.

Some of the new features introduced in ES6 include:

• Arrow functions
• Template literals
• Destructuring assignment
• Rest and spread operators
• Classes and inheritance
• Promises and async/await
• let and const declarations
• Default function parameters

ES6 also introduced some changes to the way variables are scoped and hoisted in JavaScript, and introduced new methods and syntax for manipulating arrays and objects.

Overall, ES6 greatly improved the functionality and syntax of JavaScript, making it easier and more efficient to write complex code. It has since been followed by newer versions of ECMAScript, including ES7 (2016), ES8 (2017), ES9 (2018), ES10 (2019), ES11 (2020), ES12 (2021), and ES13 (2022), each with its own set of new features and improvements.

1.Arrow Function: A shorter and more concise way of writing a function in JavaScript using the => operator.

// Traditional function 
function add(a, b) {
  return a + b;
}

// Arrow function equivalent
const add = (a, b) => a + b;

2.Spread operator: A way to spread the elements of an array or object into another array or object.

// Spreading an array
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]

// Spreading an object
const person = { name: 'John', age: 30 };
const newPerson = { ...person, address: '123 Main St' }; // { name: 'John', age: 30, address: '123 Main St' }

3. Destructuring assignment and rest operator: 

 

In this example, the destructuring assignment syntax [first, second, ...rest] = numbers assigns the first element of the numbers array to the first variable, the second element to the second variable, and the rest of the elements to the rest variable as an array using the rest operator ....

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

2. React Setting 

Normally, we use yarn:
There are some differences between two :  Performance, Dependency resolution , Lockfile format, CLI interface.

 

Use CRA (Create-react-app) :

yarn create react-app week-1 #create project

and  you can start 

yarn start

3. Component 

 

It works like lego block.
You build a big project by components.

function App(){
	return <div></div>
    }

How to make components : 

//out side of component  , import any other file

import React from "react";

const App =()=>{
// use javascript syntax here

}
return(
	<div>
		{/* use JSX */}
	</div>
    
);
};

// exporting the component 
export default App;

Capitalizing the first letter of a component's name is a convention in many programming.

 

A class component is a way of creating a React component by using a class that extends the React.Component class. It allows you to control the component's behavior using lifecycle methods and state and props.

A function component, on the other hand, is a simpler way of creating a React component by using a function that returns JSX. It only uses props and can use Hooks to manage state and replace lifecycle methods.

For example, here's a class component that displays a message:

 

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

//  function compoenent 
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

 

Child Component :

 

You can put components inside of another component.

Here are some JSX rules to keep in mind:

1. Always close your tags.
2. Always return one element.
3. Use curly braces to insert JavaScript values.
4. Use className instead of class.

 

We can connect components within component as following :

import React from 'react';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {


  const notify = () => toast("Wow so easy!");
  const notify2 = () => {
    alert('hi!');
  };

  const GrandParent = () => {
    return <Parent />
  }
  const Parent = () => {
    return <Child />
  }

  const Child = () => {
    return <div> I am the son fucker </div>
  }


  return (

    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <p1> This is App component </p1>
      <GrandParent />

    </div >
  );
}

export default App;

 

 

 

 

 

 

 

 

 

Search More : 

1. JavaScript has various methods that can be used with objects and built-in data types. 

2. You can create a project not CRA / other way