React Setup

How to deal with the React Setup fatigue? I have seen many tutorials out there, many of them complex and outdated, therefor I would like to bring you my best with a basic working setup.

First of all, I suppose that you know at least what is Node, NPM, React, Babel and Webpack, I know, I know, the headline is about React but we cannot use React as we use JavaScript directly in the browser, although React is JavaScript, it has extra things like JSX for example that can not be execute directly in the browser.

React is a JavaScript library to build user interfaces. It divides the code in components (button, dialog, etc) and keeps things update efficiently.
Babel is a compiler that makes compatible new JavaScript generations and extra things like JSX. So, as we said, because we cannot use directly React in the browser we need Babel to transform it into current JavaScript.
Webpack is a bundler that lets you organize your code. We can use it for many things but here we will use it for: connecting React with Babel, creating a development enviroment with an auto update server and creating an output file with everything ready for browsers.

Ok, that’s all, so, why do we need also Node and NPM? Everything is linked. You need to install them before continue with the setup.

NPM is a super power package manager that installs, publishes and manages node programs. We are going to install React, Babel and Webpack in our computer with NPM.
Node is JavaScript on the Server.

Don’t be panic, things look difficult when you don’t know anything about them at first, but as soon as we dive into them you will see that they are not (that much :P).

Setup

Create a project folder (ex: reactapp), open it and create another folder for your app (ex: app), open it and create one more for React’s components (ex: components).
Whitin the reactapp folder open a terminal/console and type:
- npm init
Leave all the npm init questions empty (we will come back later): click enter till you escape. This will create a package.json file about your app.
Stay in the terminal and install(i) for your app(-S) react and react-dom:
- npm i -S react react-dom
Then, install for development(-D) babel:
- npm i -D babel-core babel-loader babel-preset-react babel-preset-react-hmre
To finish with the package installations install for development(-D) webpack:
- npm i -D webpack webpack-dev-server html-webpack-plugin
If you have any permission problem (EACCES) type sudo at the beggining of the command and if you need to change package.json permissions from root to your user use:
- sudo chown user_name package.json
Now, create a file called .babelrc and write in it that we are going to use react presets:
- { presets: [‘react’] }
Open package.json and within “scripts”: {} write what we are going to use in production(build) and development(start) :
- “build”: “webpack”,
- “start”: “webpack-dev-server –progress –inline –hot”
Finally, let’s configure webpack. Create a file called webpack.config.js and write in it:

const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: './app/index.html'
})

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'transformed.js',
    path: './build'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
}

So far, we have set up our environment, let’s test it.

Test

In your components folder, create a file called App.js with a basic component (ex: a stateless functional component):

const React = require('react')

function App() {
  return <h1>Yuhuu, It is working</h1>
}

module.exports = App

Within your app folder create a basic index.hml with a container for your app:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React example</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Create a basic index.js to render your React app:

const React = require('react')
const ReactDOM = require('react-dom')
const App = require('./components/App')

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

Write in your terminal line (inside your project folder):
- npm start
Open your browser at http://localhost:8080/

Welcome to React! Try to change our component and you will see how everything changes on the fly 🙂

For production use:
- npm run build

Do you want to do it easy?

You have learned how to deal with React configuration from scratch. You spent a lot of time but not code for your app at all.

No configuration or complicated folder structures, just the files you need to build your app.

Create Apps with No Configuration: Welcome to Create React App!

japanfever says:

December 13, 2016 at 13:51

What do you thing about https://github.com/facebookincubator/create-react-app? Easy & Better?

Génesis says:
December 15, 2016 at 14:03

Hi! japanfever xD Definitely, it’s easier! Mmmm, there are cool guys behind this from Netflix, Redux and so on. Thanks for sharing, I updated the post with your link.

Setup

Test

Do you want to do it easy?

You might also like

Comments are closed.