Quick way to set up a React development environment.

astronomy black wallpaper constellation 2150

If you want to start building a new single-page application in React but you’re tired of setting up whole environment including whole webpack or other module bundler configuration, here’s something for you.

React allow us to set up whole environment by using only one command, but before we get to it, we need a few things.

  • First of all we need some code editor, im using Visual Studio Code available for free athttps://code.visualstudio.com/ but you can use whatever you want.
  • Node.js - to use package manager like npm or yarn, to install node.js just go to https://nodejs.org/en/download/ , download installer and run it.
  • As a user of Visual Studio Code i can use built-in terminal but if you’re using code editor without terminal just use default system cmd.
  1. In cmd go to the folder where you want to create new project and type: create-react-app <app name>.

* If you’re getting error use npm cache clean - force and add path to your node folder in environment variables :

1.1. From the desktop, right click the Computer icon.

1.2.Choose Properties from the context menu.

1.3. Click the Advanced system settings link.

1.4.Click Environment Variables. …

1.5. In PATH click new.

  1. 6. Add your node folder path.

After complete installation in cmd get into your project folder and run command npm start, if everything is fine on localhost:3000 you should see default react starting page.

At this point if you don’t need sass compiler you’re good to go with creating your app in react but if you want to know how to add sass compiler you should stay.

2. Configure React with SASS/SCSS

In cmd type ‘npm install sass-loader node-sass — save-dev’ to install sass in your project.

Next we have to get access to the our webpack config files simply by running this command “npm run eject”, remember this is a one way operation.

Once ejection has completed, we should see our config folder.

Find file config/webpack.config.dev.js copy whole css rule block it will look similar to this but without sass-loader which we have to add in our scsss rule block, that webpack will handle the compiled css properly after its been compiled by scss.


{

  test: /\.scss$/,

  use: [

    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
	    importLoaders: 1,
	  },
    },
    {
	  loader: require.resolve('sass-loader'),
    },
    {
	  loader: require.resolve('postcss-loader'),
      options: {
	  ident: 'postcss',
	  plugins: () => [
	  require('postcss-flexbugs-fixes'),
	  autoprefixer(
		{
		  browsers: [
		    '>1%',
		    'last 4 versions',
		    'Firefox ESR',
		    'not ie < 9',
		  ],
		flexbox: 'no-2009',
	    }),
	  ],
    },
  },
  ],
},

add it before existing css rule block and change test value to test: /\.scss$/, .

Do the same procedure in config/webpack.config.prod.js file.

Now you can start creating your app with fully configured development environment.


Quick way to set up a React development environment. was originally published in Qunabu Interactive on Medium, where people are continuing the conversation by highlighting and responding to this story.