필수 React 개념 - 1부

이 비디오는 반응을 배우기 위한 최고의 조언입니다.💯

import React from 'react';
import ReactDOM from 'react-dom';

// greeting is what it will render
function greeting() {
    return <div>Hello World</div>
}

// root from html is where to render
const rootNode = document.getElementById('root');

// ReactDOM.render(what, where);

ReactDOM.render(greeting(), rootNode);

const year = 2020;

function Date() {
    return <div>Covid-19 hit on the year {year}</div>
}

const greeting = <button 
        style={{backgroundColor: 'red'}}>Submit
    </button>

import React from 'react';
import ReactDOM from 'react-dom';

// 1. Using Function Component
const Header = () => {
    return <h1>Hello World</h1>;
}

const Footer = () => {
    return <p>Welcome to React Component</p>;
}

// 2. Using Class Component

class Header extends React.Component {
    render() {
        return <h1>Hello World</h1>;
    }
}

class Footer extends React.Component {
    render() {
        return <p>Welcome to React Component</p>;
    }
}

function App() {
    return (
    <>
        <Header />
        <Footer />
    </>);
}

const rootNode = document.getElementById('root');

ReactDOM.render(<App />, rootNode);

// Parameter
function argumentVar(par1, pa2, par3, par4, par5) {
    console.log(par1 + par2 + par3 + par4 + par5);
}

// Function call
argumentVar(1,2,3,4, 5);
// 11

// Arguments
function argumentVar(parameter1, parameter2, parameter3) {
    console.log(arguments.length);
}

// Function call
argumentVar(1,2,3,4,5);
// 5

function Name(props) {
    return <h1>Hello {props.username}</h1>
}

const rootNode = document.getElementById("root");

ReactDOM.render(
    <Name username="Tony Robbie" />, 
    rootNode
);

// Hello Tony Robbie

import React from 'react';
import ReactDOM from 'react-dom';

// This is child
function Header(props) {
    return <h1>Hello {props.username}</h1>;
}

// This is the parent
function Layout() {
    return 
        <div style={{ background: 'golden' }}>
            {props.children}
        </div>;
}

function App() {
    return (
    <Layout>
        <Header username="Tony Robbie" />
    </Layout>
);
}

const rootNode = document.getElementById('root');

ReactDOM.render(<App />, rootNode);

function App() {
    const actor = ["bruce", "robert", "will"];

return (
    <ul>
        {actor.map(character => (
            <li>{character}</li>
        ))}
    </ul>);
}

//you can also do this with component
function App() {
    const actor = ["bruce", "robert", "will"];

return (
    <ul>
        {actor.map(character => (
            <Character character={character} /> 
        ))}
    </ul>);
}

function Character(props) {
    return <li>{props.character}</li>
}

//render
const rootNode = document.getElementById("root");
ReactDOM.render(<App />, rootNode);

function App() {
    const actor = ["bruce", "robert", "will"];

// here I have use indexes 
// you can also use some package for it.

return (
    <ul>
        {actor.map((character, i) => (
            <Character key={i} character={character} /> 
        ))}
    </ul>);
}

// you have access to function data with event
function Character(props) {
    function handleCharacterClick(event) {
        alert(props.character);
        console.log(event);
}

    return <li onClick={handleCharacterClick}>{props.character}</li>
}

function handleInputChange(event) {
    const inputValue = event.target.value;
    console.log(event);

return (
    <input onChange={handleInputChange} />
    )
}

2부 - Hooks에 대한 모든 것을 게시하겠습니다. 내 블로그에 작성된 모든 게시물은 내 지식에서 나온 것입니다. 자유롭게 반대하셔도 됩니다.