[Following Saengko] React 1~6: Running a Sample Web App

Saengko React class : https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 

 

React - YouTube

 

www.youtube.com

Totally freshly baked~ the new class~ 

 

1. Basic environment setup ( Saengko Link : 04. Install create react app using npm )

1-1) Check npm version

npm -v  

 

Additional reference external blog : https://velopert.com/1351

 

[Node.js] TIP: Upgrading Node.js and NPM to the latest version | VELOPERT.LOG

This post is a tip about upgrading Node.js and NPM to the latest version when node.js is already installed. Note: some modules do not support v6.0.0. # Upgrading Node.js Follow the steps below. Check current NodeJs version $ node -v v5.6.0 Force clear cache $ sudo npm cache clean -f npm WARN using --force I sure ho

velopert.com

 

1-2) npm version looked old so I decided to update it 

sudo npm install -g npm

npm -v 

 

 

1-3) Main part, install react 

(1) Same environment as egoing (copy-paste without the comments)

sudo npm install -g create-react-app@2.1.8     // -g는 글로벌, 해당 pc 어디서든 사용가능하게 설정

(2) Set up with the latest version

sudo npm install -g create-react-app

 

 

2. Setting up the React development directory

2-1) Create a folder wherever you want

2-2) In the terminal, move into that directory 

2-3) At that location (copy-paste without the comments)

sudo create-react-app .     // .은 현재 위치

 

* [From here it's just my case] Is this an issue caused by a different node version? Referring to the earlier link, I decided to update node too. 

(1) Check version

node -v

(2) Clear the previous node cache

sudo npm cache clean -f

(3) Install node's n module

sudo npm install -g n

(4) Install the latest version via the n module (instead of latest you can use -> stable, lts)

sudo n latest

(5) After deleting the folder where React was previously installed, re-run step 2-3) at that location above. 

5-1) Oh.. when choosing a folder name there can be this kind of issue...

5-2) Re-run step 2-3) at that location above 

5-3) Re-run step  1-2) npm update above 

* 01) From my research, when the issue is that npm's default directory lacks permission, you can fix it via Homebrew. But since I had installed it before, I went with the update referring to the site below.

https://brew.sh/index_ko

 

Homebrew

The missing package manager for macOS (or Linux).

brew.sh

https://github.com/mimul/dev-environment/blob/master/mac-homebrew.md 

 

mimul/dev-environment

Development environment and culture to be provided startup - mimul/dev-environment

github.com

* 02) Check the existing brew setup list.

brew list

* 03) Check whether brew is running fine

brew doctor

* 04) Update brew.

brew update

Ran brew list again. The list stays the same. 

* Looking back, it's a shame I didn't just do create-react-app right here.

 

4. Hmm.. but this isn't the only way. There are other approaches too.

Feeling like I might fall off while moving on, I decided to circle back. Let's try another way. Create a new project folder, go to that terminal, and type the command below. This time it's npx, not npm. 

npx create-react-app react-todo

However, this method assumes the latest version of npm, and npx is a tool that lets you run an npm package locally and one-off without installing it globally. It's been bundled by default since npm 5.2.0. (Reference blog: Room-corner Engineer )

npm start

Hello, React!

 

5. Then! Let's retry the previous method!

1) Open the terminal and install React globally,

sudo npm install -g create-react-app

Result) Installed fine.. (the terminal changed to match the image on the left below, so I couldn't capture it.. heheh...)

2) Then create a workspace folder you want and in that folder's terminal create a React project

create-react-app react-todo

Result) Installed fine.. (same issue with the terminal changing, so I missed the screenshot.. heheh...)

 

 

6. Now, direct setup via the development editor

5-1. Launch Visual Studio Code

5-2. Add workspace folder (not the project folder — you're specifying the workspace.)

4) In that terminal window, type and enter the code below:

create-react-app 생성할프로젝트이름

7) Move into the folder you just created as the React guide instructs, and run npm.

cd helloworld
npm start

 

 

7. Bonus — understanding the cause of the earlier issue / how it got resolved

Hypothesis) First, whether Homebrew resolved the tangled permissions is certain not entirely clear. Sure, many files were updated and the code that kept failing started working right after the homebrew update, but.. 

Actually, this resolution probably owes more to the fact that react was already globally installed (the -g option) via npx than to the homebrew update, so the subsequent steps worked correctly unlike before. So the fundamental fix was that react, which could not be installed via npm, could be set up globally via npx.

In the end, I still haven't figured out why the npm approach kept running into path access issues. Also, if I had just created the react project via npm right after the homebrew update, I might have identified the cause more quickly and directly — a regret of this study session.

 

 

 

 

8. Oh, yeah, it doesn't work again when you redo it.. the poster himself got lost lol. So here's a quick Re-summary!

1. Create a workspace folder 

그냥 원하는 위치에 원하는 폴더 

2. Create the React project 

npx create-react-app react-todo

* npm doesn't work.. the cause is still unknown >< If anyone knows, please leave a comment.