DEV Community

NT
NT

Posted on • Updated on

Set up React on Mac

Install Node.js

Check brew version.

$ brew -v
Homebrew 4.0.23
Enter fullscreen mode Exit fullscreen mode

Install nodebrew

Following this post, I decided to install nodebrew. I won't be an active frontend developer, but this might help in the future to switch or maintain versions of npm as described.
https://fromscratch-y.work/en/blog/programming/mac-nodejs-install/#sec4-1

$ brew install nodebrew
(...snip...)
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /opt/homebrew/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/opt/homebrew/var/nodebrew

zsh completions have been installed to:
  /opt/homebrew/share/zsh/site-functions
==> Summary
🍺  /opt/homebrew/Cellar/nodebrew/1.2.0: 8 files, 40.6KB

(...snip...)
Enter fullscreen mode Exit fullscreen mode

Not sure what the setup_dirs does...

Added the PATH to my .zshrc

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc 
$ source ~/.zshrc 
Enter fullscreen mode Exit fullscreen mode

Specify the node version

$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
(...snip...)

v20.0.0   v20.1.0   v20.2.0   v20.3.0   
(...snip...)

io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1 
Enter fullscreen mode Exit fullscreen mode

Install the stable version

$ nodebrew install stable
$ nodebrew list
v20.3.0
Enter fullscreen mode Exit fullscreen mode

Activate the installed version

$ nodebrew use v20.3.0
use v20.3.0
$ node -v
v20.3.0
$ npm -v
9.6.7
Enter fullscreen mode Exit fullscreen mode

Create an app

$ npx create-react-app react-app
Enter fullscreen mode Exit fullscreen mode

According to this page https://react.dev/learn/start-a-new-react-project, that creates Next.js project.

To run, go down to the created project folder, and start npm.

$ cd react-app
$ npm start
Enter fullscreen mode Exit fullscreen mode

This automatically opens http://localhost:3000 with your default browser and show the starter page.

React Starter Page

Further more, below comment will create a build folder for deployment.

$  npm run build
Enter fullscreen mode Exit fullscreen mode

Source: https://create-react-app.dev/docs/deployment/

My plan it to run a server using Spring Boot.

Why React?

As a Java backend developer, I need to work with frontend developers. Also wanted to set up a simple website based on Java backend, and picked React as the FE framework - simply because it's most trending framework on the FE side.

Top comments (0)