React_part I
TIL 2020.01.02
React is a JavaScript library for building user interfaces
What is React?
When we create a website,
1. Use HTML, CSS, and apply JavaScript for dynamic actions.
2. Use React or Vue (front-end library)
The website does not only show data, but it also contains different types of interaction between users and browser. It means it is necessary to manage the ‘State’ of an element. For example, when you click a button to change background image,
- find the DOM to change the image.
- change the DOM source to the. new image
- re-render to show it on browser.
So, in order to have a page with a lot of interaction, it will be a bit difficult to manage all of those DOMs and their states. To handle the that, developers decided to create front-end framework and library.
The front-end framework connects to the DOM’s property once the specific value in JavaScript changes and it simplifies the updating process.
React approaches this in a different way. Unlike the front-end framework, React wipes everything and re-renders it so there is no need to worry about how to update it. Virtual DOM allows this to happen. Virtual DOM is a JavaScript object in the memory and once the state is updated, it will render on the specific UI through the virtual DOM. And then it compares the original DOM and patches it to the real DOM for that difference.
React is a front-end library focused on the Component, which is an individual unit module and is part of the UI that has one meaning and this can be your own HTML tag so it becomes explicit and is able to be recycled continuously.
ES6 Grammar
better to know the followings
Destructuring assignment
- spread operator
- rest parameters
- default parameters
- template literals
- arrow function
- for-of loop
Getting Started
npx create-react-app my-app
cd my-app
npm start or yarn starthttp://localhost:3000/ React icon will pop on in that url as default
Component
Import
import React from 'react';- When you create react component, need to call react through import
Export
export default Hello;- Send out Hello component and can be used in other component
ReactDOM.render
- Will render react Component inside DOM
root
<div id="root"></div>- Located inside index.html
- Once react component renders, rendered results will be render inside div
JSX
- syntax extension to JavaScript
- produces React “elements”
- separates concerns with loosely coupled units called “components”
Always cover by 1 element
- without closing a tag, it will cause an error => Failed to Compile error
- if there is more than two tags, it has to be covered by at least one tag
Self Closing tag
- If there is no context inside tags, you can use
<Hello />Fragment
- will not show additional element in broser
Wrap JavaScript code with {} inside JSX
style & className
- use camelCase
background-color => backgroundColorcomment
- {/*like this format*/} inside JSX
Props
- abbreviation of Properties
- Use when to deliver value to Component and put as parameter in Component
- will deliver as object format
- 외부로부터 전달 받은 값
Destructuring Assignment
defaultProps
props.children
- to find a value inside Component tags
conditional Rendering
- Only renders depends on condition
IIFE
- Use when you should only show specific condition
- covers with {} since true is JavaScript value
- easy to use IIFE
- If isSpecial is true, it will show <b>*</b>. If not, it will not show anything
- All falsy value(null, undefined, false) will not render anything except 0
&& Operator
- Better to use && Operator when content is still same, but need to show on true statement
&& 연산자는 앞에가 true이면 뒤에 값을 봔환이 된다 앞에가 false 면 앞의 반환 된다 || 앞에 true일때, 뒤를 볼 필요 없으니깐, 앞에 값이 나오고 앞에 false면 뒤를 봐야 되니깐, 뒤의 값이 나온다
Omit {true}
isSpecial={true} === isSpecialreference: https://react.vlpt.us/basic/
