This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.
You will learn
How to create and nest *components // *component - component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
How to add markup and styles
How to display data
How to *render conditions and lists //*render : (어떤 상태가 되게) 만들다[하다] (=make)
How to respond to events and update the screen
How to share data between components
Creating and nesting components
React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
React components are JavaScript functions that return markup:
-----
functionMyButton(){
return(
<button>I'm a button</button>
);
}
-----
*MyButton 이라는 function을 만든 것이다.
이를 다른 component에 중첩 가능하다.
Now that you’ve declared MyButton, you can nest it into another component:
-----
exportdefaultfunctionMyApp(){
return(
<div>
<h1>Welcome to my app</h1>
<MyButton/>
</div>
);
}
-----
Notice that <MyButton /> starts with a capital letter. That’s how you know it’s a React component.
React component names must always start with a capital letter, while HTML tags must be lowercase.
Have a look at the result:
function MyButton() { return ( <button> I'm a button </button> ); }
export default function MyApp() { return ( <div> <h1>Welcome to my app</h1> <MyButton /> </div> ); }
The export default keywords specify the main component in the file. If you’re not familiar with some piece of JavaScript syntax, MDN and javascript.info have great references.
Writing markup with *JSX
*jsx = JavaScriptXML
React에서HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.
HTML과 매우 흡사하긴 하지만, XML을 기반으로 한데다 Javascript 내부에서 사용하다보니 불가피하게 생긴 차이점이 몇가지 있다.
HTML요소에 class값을 정의할 때, 원래 HTML에서는<p class="container"></p>과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용한다.
마찬가지 이유로 루프문 예약어와 겹치는 for은 htmlFor로 사용한다.
또한 요소에서 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜표기법으로 표기해야 한다.
기존의 HTML에서 주석은<!-- COMMENT -->이렇게 했었지만 JSX에서는{/*주석*/}으로 표현한다.
HTML Custom-Element는<my-element>와 같이 표기했지만 React의 Custom Element는<MyElement />와 같이Pascal Case로 표기한다. 닫는 태그에는 꼭 명시적으로 /> 표기를 해준다.[1]
JSX 내부에서도 JS를 사용할 수 있다. {}로 불러온다.{console.log(this.props)}같은 식이다.[2]
이 JSX 위주의 프론트엔드 라이브러리로는Preact,SolidJS,Inferno등이 있으며,Vue.js등의 자체적인 포멧을 사용하거나Svelte같이 JSX 사용과 거리가 먼 라이브러리 및 프레임워크 또한 JSX를 사용할 수 있는 방법이 존재한다.
The markup syntax you’ve seen above is called JSX. It is optional, but most React projects use JSX for its convenience. All of the tools we recommend for local development support JSX out of the box.
JSX is stricter than HTML. You have to close tags like <br />. Your component also can’t return multiple JSX tags. You have to wrap them into a shared parent, like a <div>...</div> or an empty <>...</> wrapper:
FunctionAboutPage(){
return(
<>
<h1>About</h1>
<p>Hello there.<br/>How do you do?</p>
</>
);
}
If you have a lot of HTML to port to JSX, you can use an online converter.
In React, you specify a CSS class with className. It works the same way as the HTML class attribute:
<imgclassName="avatar"/>
Then you write the CSS rules for it in a separate CSS file:
/* In your CSS */
.avatar {
border-radius:50%;
}
React does not prescribe how you add CSS files. In the simplest case, you’ll add a <link> tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.
You will learn
How to create and nest components
How to add markup and styles
How to display data
How to render conditions and lists
How to respond to events and update the screen
How to share data between components
Creating and nesting *components
* A component is a piece of the UI (user interface) that has its own logic and appearance
React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
React components are JavaScript functions that return markup:
------
functionMyButton(){
return(
<button>I'm a button</button>
);
}
------
Now that you’ve declared MyButton, you can nest it into another component:
Optimizing the critical rendering pathrefers to prioritizing the display of content that relates to the current user action.
Delivering a fast web experience requires a lot of work by the browser. Most of this work is hidden from us as web developers: we write the markup, and a nice looking page comes out on the screen. But how exactly does the browser go from consuming our HTML, CSS, and JavaScript to rendered pixels on the screen?
Optimizing for performance is all about understanding what happens in these intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels - that's thecritical rendering path.
By optimizing the critical rendering path we can significantly improve the time to first render of our pages. Further, understanding the critical rendering path also serves as a foundation for building well-performing interactive applications. The interactive updates process is the same, just done in a continuous loop and ideally at 60 frames per second! But first, an overview of how the browser displays a simple page.
