Create a React App with Webstorm

Why use Webstorm for React Projects

Webstorm is "The smartest JavaScript IDE". With the massive amount of JavaScript tools and libraries, a simple text editor no longer makes the cut for web developers working in the industry. It's come to be expected that our text editor has syntax highlighting for emerging technologies like JSX or GraphQL. Not having immediate access to autocompletion for all of the imported API libraries would make development much slower, as we'd have to always look up method names.

Webstorm assists in managing tools that would otherwise be run manually by scripts, like linting and testing. Rather than running a script and typing out the path to the file, Webstorm can automatically run linters (JavaScript error checkers) and style formatters like Prettier all the time, so as you write code, you can observe whether your current file is error free. Prettier can reformat your code to look better after every save, so you spend less time indenting and have more consistent-looking code.

None of these features are mandatory, but all of them combined in one package deliver a powerful swiss-army knife for engineers. Webstorm even comes with its own Terminal, eliminating the need for a separate terminal application, synchronizing terminal tabs with specific projects.

To create a react app with Webstorm:

1. File -> New -> Project

2. Choose React App from the left column.

3. Choose a directory name for your project by filling out the Location field.

4. Select npx create-react-app from the dropdown in the create-react-app field.

5. Wait for it to install, and observe the commands.

6. Click on the terminal tab, and type yarn start into the terminal.

7. The terminal will let you know you've compiled the app successfully and the browser should open. Congrats, you've just installed and ran a React app!