Set up our first react app based on create-react-app (Part I)

Nowadays it is hard to choice a framework or library for front-end development. We have options for all tastes: those, who prefers a prefabricated house with solid bases will opt for angular, ember, js, etc. But there are those who prefer to build our own houses, here comes React.

We will try to code an app for managing orders. Users can choice one food or more, then a table will show each user’s order. But, for now, I will not go into the details. First, I want to set up my environment.

First hard decision was choosing between create-react-app or create my own dev-environment. But I found create-react-app very useful, and I did not waste my time (just for this project) configuring webpack, hmr, live reloading, es6 traspiling, etc… All of them came with create-react-app and more… So, how can I install it?

npm i create-react-app -g

depending on you OS, you will need root permissons. Then, for creating our app we need just to run:

create-react-app orders

it will take a while, there are a lot of packages coming with this. Okey, after installing it, I decided to use spectre css a nice framework for faster development. Install it with:

npm install spectre.css --save

Now we are almost done. I want to add some lint for the project. A good choice (based on some research) is airbnb for react:

npm i -D eslint eslint-config-airbnb eslint-plugin-import@^2.2.0 eslint-plugin-import@^2.2.0 eslint-plugin-jsx-a11y@^3.0.2 eslint-plugin-react@^6.9.0 babel-eslint eslint-loader

Then we need to add a file to our project: .eslintrc

{
"extends": "airbnb",
"parser": "babel-eslint",
"plugins": [
"import",
"jsx-a11y",
"react"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"no-undef": "off"
}
}

Time to code!:

ok, I won’t lie you… For now we just modify app.js and index.js Yeah sorry :’( here they are:

Check my github repo!

Currently I am using atom + nuclide package. I will start to test react development with flow, and nuclide was a good choice for autocompletion, and atom has the most fantastic eslint package I’ve ever seen (yeah, I really ❤ clean clode)

In the repo I have a list of packages I am using for atom for those who want to test it.

P.S: This is my first time writing a blog in english, sorry for my horrible grammar mistakes. Any suggestion would be appreciated!