울이

Love Code. Work. Sports.

1 분 소요

When I first used Vue, this friend that looks similar to HTML felt very intuitive, so I could use it right away without hesitation.

Quite a few modules support Vue, and I’ve built things with it, but I thought there must be a reason React dominates the market, so I decided to give it a try and refresh my memory!

Let’s Start with React CLI

React, which can be installed and used with Yarn, Npx, Npm, etc., is run with a command called create-react-app. I’m going to go through the installation process and starting React.

nvm and npm

# nvm & npm
$ nvm install 16
$ nvm use 16
$ npm install -g create-react-app

I find nvm convenient for installing, managing, and selecting npm versions.

You can install Node versions with simple commands and easily switch between versions.

Now that we’ve completed the package installation to use React with the commands above, let’s create a React app.

Start React App

# npm
$ npm init react-app [app name]
$ npm init react-app start-react

# yarn
$ yarn create react-app [app name]
$ yarn create react-app start-react

Start React with Yarn or npm.

Running React

With simple commands, we’ve created all the React packages. It’s ready to run, so let’s learn the commands to run it.

package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Among the automatically generated files, package.json helps configure installed files, modules, and start script commands.

The ‘scripts’ section shows the commands. We could create new ones, but for now, let’s just use these.

# Commands to run React
$ npm start
$ npm build
$ npm test
$ npm eject

Run the React app with $ npm start. If you see a screen like the one below, React is running successfully, so you can start exploring to move on to the next step.

React Start Screen

Reference

https://reactjs.org/

https://github.com/facebook/create-react-app

https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app

댓글남기기

참고