[Following Saengko] React 7~9: Deploying a Sample Web App

 

Recap

Features - component
1. Readability       user-defined code  : ex) <Top></Top>
2. Reusability  
3. Maintainability    When you change it, it's applied everywhere 

Goal 
1. Dev environment, know which parts you can edit
2. run 
3. deploy 

 

Prep before the hands-on 

1. Create a workspace folder
2. Create a react project in that folder: npx create-react-app space-r1 (project name) 

 

 

React - 7. How to write JS code

https://www.youtube.com/watch?v=LEPiRfPD9Uw&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=7

 

1. Where is the code that shows on the screen?

     public/ folder contains index.html

     <div id="root"></div> inside this,

     my defined components go here.

 

2. Where should you edit?

     src/  files in this folder

     index.html — id="root" is created and managed as components.

 

     1) Entry file index.js

          Among those, the entry file = index.js. Inside it: 

          (1) Specify id=root in index.html  

          document.getElementById('root’) is

          index.html's id="root" — designating this.

 

          (2) root specifies the user-defined code it will call 

          ReactDOM.render(<App />,

          And import the file containing that user-defined component

          import App from './App'; (Note: after ./app the.js is omitted)

 

          (3) Actual? code location check 

class App extends Component{
  render(){  
    return (
       <div className="App">   
       
          “여기가 실제코드 !”
          
       </div>
    );
  }
}
export default App;

 

          (4) Verify 

cd space-r1
run npm 

 

     2) Edit the css 

     Each js is importing its own css.

 

 

React - 9. How to deploy

https://www.youtube.com/watch?v=E_-ua6uCQOU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=9

 

1. Deploy 

     1) Production : minimize size, apply security processing 

npm run build 

    2) A new build/ folder is created. 

 

2. Deploy to a real server environment 

    1) Components             // Put the files inside the build/ folder into the root directory of your desired web server.

    2) Virtual test         // build (with the contents of the build folder),-s (treating it as root), serve (run a server), npx (one-off).

 sudo npx serve -s build   

 

3. Dev environment deploy VS real server deploy