React - Start - 01

About React and Setting

What is React and purpose?

• Javascript library
• show content(HTML) to users and handle user interaction

What was the HTML looking stuff?

• JSX
• It looks like HTML
• Can be placed in JavaScript code

Why did we add to libraries(React and ReactDOM)?

• React is split into two separate libraries
• ‘React’ knows what a component is and how to make components work together
• ‘ReactDOM’ knows ho to take a component and make it show up in the DOM

Generate React project

1. Install/Update Node.js
2. Install create-react-app(npm install -g create-react-app npx create-react-app {name of project})
3. Generate a project
4. Build project

webpack/Babel/Dev Server등과 같은 설정을 하지 않아도 create-react-app을 활용하면 바로 react app을 생성할 수 있다.

Babel

브라우저가 지원하는 JavaScript 버전으로 원래의 JavaScript 파일을 변환해주는 라이브러리

Structor in React Project

• src: 작성한 소스 코드 저장 폴더
• public: 이미지와 같은 static한 파일 저장 폴더
• node_modules: dependencies
• package.json: dependencies를 기록 및 구성
• package.lock.json: 프로젝트에 필요한 패키지의 정확한 버전 기록
• README.md: 프로젝트 사용법

Stopping the React app: Control+C
Start the app up in the future: npm start
Access: localhost:3000

React Process in index.js

1. Import the React and ReactDOM libraries
   

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

2. Create a react component
   

   const  App = () => {
    return <div>Hi  there!</div>
   };
   

3. Take the react component and show it on the screen
   

   ReactDOM.render(
    <App />,
    // index.html의 body부분의 id 참고
    document.querySelector('#root')
   );
   

import and require

import: ES2015 Modules(ES2015 import statement)
required: CommonJS Modules(CommonJS import statement)

참고 사이트

redux-code