ReactJs with create-react-app and Sublime Text

I came back to ReactJs after some time. It’s a lot easier now to start a new react app, and build the project after it’s finished, without any configuration. The npm package create-react-app makes the whole process a lot easier.

Preparing sublime for ReactJs development;

  1. Install babel-sublime Sublime Text package to have syntax highlighting for JSX (For other text editors, please follow steps at babeljs.io/docs/editors).
  2. Emmet works inside JSX by default if you expand emmet abbreviation by pressing ctrl+e, but if you have the habit of expanding emmet abbreviations using tab key, then add this snippet to your key bindings.

ReactJs installation (using create-react-app);

  1. Inside terminal execute npm install -g create-react-app. It will install create-react-app npm package globally.
  2. Inside your projects folder execute create-react-app app-name. A new react project will create with the name provided.
  3. cd to the project (e.g., cd app-name).
  4. Execute npm start which will open your newly created bare-bone project at localhost:3000 in your default browser.
  5. Start editing src/App.js.
  6. When you want to build for production, execute npm run build inside the application’s folder.