CRA (Create React App), JSX(JavaScript + XML)

Create React App : Set up a modern web app by running one command.

 

CRA : 완제품

or

react, react-dom, babael, webpac 등 하나씩 세팅하여 조립

---

CRA로 프로젝트 생성

ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요.

cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다.

yarn create react-app week-1 #프로젝트 생성!

 

 

React Component

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

개념적으로 컴포넌트는 JS 함수와 유사함.

"props" 라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환

 

리액트 컴포넌트를 표현하는 두 가지 방법

  1. 함수형 컴포넌트

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

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

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

 

  2. 클래스형 컴포넌트

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

 

# 결론적으로 리액트 세계에서 말하는 컴포넌트(블럭)는 즉 함수.

    -> html을 return하는 함수를 만들면 된다.

    컴포넌트를 만들 때 첫 글자는 대문자 이후 카멜케이스

 

컴포넌트 안에 다른 컴포넌트를 품을 수 있다.

품는 건 부모 컴포넌트, 안에서 품어지는건 자식 컴포넌트

 

# Rendering = 화면을 보여지게 하다

   JSX = 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 방식

 

---

JSX

 

정의

// JavaScript를 확장한 문법
// JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법
const element = <h1>Hello, world!</h1>;

 

엘리먼트는 단순히 화면에 그려지는 HTML적 요소

 

 

JSX 스타일 주는 방법

 

// 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 객체를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}