React W+1
反応とは?
Webアプリケーションを作成する場合、JavaScriptベースの(Facebook上で作成)フレームワークを最も多く使用します.
** 웹앱의 장점 (인스타, 페북 등)
1. 모바일 앱으로 발행가능
2. 앱처럼 뛰어난 UX
3. 그냥 웹사이트보다 비즈니스적인 강점 - 마케팅의 활용이 좋음インストールレスポンス
Reaction 17.0.2バージョンエラーハブアドレス
フォルダ作成後
レスポンスアイテムの作成
VSCの端末
npx create-react-app (+ 프로젝트 명)を開く(ライブラリ)
インストール中
cd (+ 프로젝트명) Enter-End(このフォルダに入っています)
(ファイルパスを表示するには、
pwd端末を検索してください)VSC:端末入力
npm startを開くNPM(Node Package Manager)
リファレンス
CRA-構成されたフォルダ
node.modules -
package.json-サマリー(プロジェクト名、バージョン、依存項目(依存性:)
git ignore-gitはバージョン管理プログラムですが、Git noreがインストールされている場合、GitはGitを追跡しないため、Gimにアップロードされません.共有すべきでない機密情報はここに書くべきです.あるいは共有が必要な人と共有を繰り返すと.
index.html
index.js -> ReactDOM.render関数には2つのパラメータがあります.1つ目は画面に表示する要素で、2つ目は画面に表示する要素の位置です.
App.js->現在の画面の第1面
src->コンポーネント「s」:共通構成部品管理nav,フッター
page->このフォルダでページのコンポーネントを管理する
styles->常用css
node.なぜjsが必要なの?
React -> node.js -> browser
JSX、syntax、bundling、envはブラウザに駆動して送信する必要があります.
npm
package:一つ一つのプログラム、(開発用語は先に使って、後で定義します.だから少し気まずいかもしれません.)
JSX構文
** React란 html과 css, js를 동시에 한 파일내에서 작성하는 프레임워크이다.<div className = '클래스명'>** 데이터 바인딩이랑? 새로고침을 하지 않아도 쉽게 쉽게 재렌더링 할 수 있음!
** {중괄호} 를 써야함!
{변수명, 함수명등}style = {마찬가지로 중괄호, object 자료형으로 만든 스타일}useState
Reactには、次の2つのデータ格納方法があります.
1. 변수에 넣거나
2. state에 넣던가**ES 6 destructuring構文
EventListenerを追加するには:
[イベントを追加](Add Event)=再レンダリングを頻繁に行う=データバインドを容易にする
onClick ={클릭될 때 실항할 함수}
onClick = { ()=>{실행할 내용} }setState
データを変更する場合、
1.修正した［…データ］
stateのコピーを新規作成して変更します(元のstateに触らないでください!!)
** deep copy란? 값 공유하지 않고 서로 독립적인 값을 가지는 복사를 뜻함stateのコピーを新規作成して変更します(元のstateに触らないでください!!)
** deep copy란? 값 공유하지 않고 서로 독립적인 값을 가지는 복사를 뜻함component
.htmlファイルを簡潔なビューに縮小する構文
** 장점 : 덩어리로 관리할 수 있음. 반복하여 사용되는 html활용. 자주 변경되는 html UI. 다른 페이지 만들때.
** 단점 : state 쓸 때 복잡해짐. (상위 component에서 만든 state를 쓰려면 props 문법을 활용할 수 있다)function 단어(){
return(
/// <html 문법>
)
}Reference
この問題について(React W+1), 我々は、より多くの情報をここで見つけました https://velog.io/@howyoujini/ReactD1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol