<jupyter_start><jupyter_text>ReactA web dev framework developed in 2011 by Facebook- Angular, Vue, Svelte- Components = user interfaces- Root component, component tree- Independence- Reusability- Speed **References**  - freeCodeCamp.org (2020) Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React https://www.youtube.com/watch?v=4UZrsTqkcW4&ab_channel=freeCodeCamp.org- Create React App   https://github.com/FACEBOOK/CREATE-REACT-APP  Setup  1) App structure📂React-App-in-production  ├── 📂build   ㅤ(contains static assets)  │ㅤㅤ├── 📂static   │ㅤㅤ│ㅤㅤ├── 📂css  │ㅤㅤ│ㅤㅤ├── 📂js   │ㅤㅤ│ㅤㅤ└── 📂media    │ㅤㅤ├── 📃 all assets necessary        │ㅤㅤ├── 📃 to deploy your app...  │ㅤㅤ└── ...  ├── 📂node_modules  ├── 📂public  ├── 📂src  ├── 📃 .gitignore (controls which files to ignore)  ├── 📃 package-lock.json   └── 📃 package.json    2) Commands- `pwd`- `ls`- `mkdir`- `cd`- `cd..` navigate to parents / one level up - `clear` clear console  3) `npm` basics- `npm init`: creates `package.json` (manifest file), list dependencies- `npm install  --save` install package locally (default) and add to `package.json`.- `sudo npm install  -g` install package globally (access from anywhere).- `npm install  --save-dev` use it only in development.<jupyter_code>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (build-api-nod-koa)
package name: (build-api-nod-koa) app # enter package name
version: (1.0.0)
git repository:
license: (ISC)
About to write to C:\Users\user\package.json:

{
  "name": "demo-app",
  "version": "1.0.0",
  "description": "\"learning kk\"",
  "main": "\"node index.js\"",
  "scripts": {
    "test": "\"la la la\""
  },
  "keywords": [
    "0123"
  ],
  "author": "\"Coding Forest\"",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": " "
  }
}

Is this OK? (yes) yes<jupyter_output><empty_output><jupyter_text>3-1. `npm init``package.json` for "demo-app" has been created.<jupyter_code>{
  "name": "demo-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}<jupyter_output><empty_output><jupyter_text>3-2. `npm install  --save`📂React-App-in-production  ├── 📂node_modules  └── 📃 package.jsonㅤ**(created)**<jupyter_code>npm install bootstrap

-------------------------

added 2 packages, and audited 3 packages in 11s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities<jupyter_output><empty_output><jupyter_text>3-2-1 Directory structure📂React-App-in-production  ├── 📂node_modules   │ㅤㅤ├── 📂 bootstrapㅤ**(created)**  │ㅤㅤ│ㅤㅤ├── 📂dist  │ㅤㅤ│ㅤㅤ├── 📂js   │ㅤㅤ│ㅤㅤ└── 📂scss    │ㅤㅤ└── 📃 ...     ├── 📃 package-lock.json   └── 📃 package.json    4) `package.json`<jupyter_code># react-demo > package.json
  "scripts": {
    "start": "react-scripts start",  # starts a dev server
    "build": "react-scripts build",  # starts a production server
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },<jupyter_output><empty_output><jupyter_text>5) `index.js`<jupyter_code># react-demo > index.js
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root') # this is the line where our app lives. 
);<jupyter_output><empty_output><jupyter_text>6) `.gitignore`specifies which files will be ignored by our source control.<jupyter_code># dependencies
/node_modules   
/.pnp
.pnp.js

# testing
/coverage

# production
/build      

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.16658329164582292, 'fraction_numerical': 0.011755877938969485, 'mean_word_length': 3.906748466257669, 'pattern_counts': {'":': 25, '<': 29, '<?xml version=': 0, '>': 31, 'https://': 2, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '6', 'dir': 'jupyter-structured-clean-dedup', 'id': '422926', 'license': 'MIT', 'n_tokens_mistral': 1623, 'n_tokens_neox': 1563, 'n_words': 413, 'path': '0 Fundamentals/React FCC 01 Setup.ipynb', 'repo_name': 'Coding-Forest/2021-React', 'size': '3998'}