How can you set up a React application manually?

How can I set up a React application manually? I don't want to use create-react-app, because I want to understand the core concepts.

You can use a bundler (e.g. Webpack) yourself. Let me walk you through this in a few steps. If you want to read a whole tutorial about it, check out this one.

Create Project

mkdir minimal-react-boilerplate 
cd minimal-react-boilerplate 
npm init -y

Create a Folder for your Build

mkdir dist 
cd dist 
touch index.html

In the index.html file, paste the following boilerplate HTML:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>The Minimal React Webpack Babel Setup</title> 
  </head> 
  <body> 
    <div id="app"></div> 
    <script src="./bundle.js"></script> 
  </body> 
</html>

Two important things:

1) The bundle.js will be all our React/JavaScript code bundled by Webpack.

2) The id=”app” is where React hooks into our HTML to render all components.

That’s everything we need.

1) Webpack

Since we created our project as npm project (npm init -y), we can install node packages via npm. Install the following ones for Webpack:

npm install --save-dev webpack webpack-dev-server webpack-cli

In your package.json, add the following npm script to start our application:

... 
"scripts": { 
  "start": "webpack-dev-server --config ./webpack.config.js --mode development", 
  ... 
}, 
...

Also add a Webpack configuration to your project as it is used in the npm script from before:

touch webpack.config.js

Put in the following config:

module.exports = { 
  entry: './src/index.js', 
  output: { 
    path: __dirname + '/dist', 
    publicPath: '/', 
    filename: 'bundle.js' 
  }, 
  devServer: { 
    contentBase: './dist' 
  } 
};

Roughly the configuration file says that (1) we want to use the src/index.js file as entry point to bundle all of its imported files. (2) The bundled files will result in a bundle.js file which (3) will be generated in our already set up /dist folder. The /dist folder will be used to serve our app.

Source Code

Let’s add some source code to see whether Webpack works to bundle this source code:

mkdir src 
cd src 
touch index.js

In the new index.js file, add the following code:

console.log('My Minimal React Webpack Babel Setup');

With npm start you should be able to start your application, to open the browser, and to see the console.log in your developer tools.

Babel

Babel enables you writing your code in with JavaScript which isn’t supported yet in most browser. Perhaphs you have heard about JavaScript ES6 (ES2015) and beyond. With Babel the code will get transpiled back to vanilla JavaScript so that every browser, without having all JavaScript ES6 and beyond features implemented, can interpret it. In order to get Babel working with all this and React, you need to install all dependencies.

npm install --save-dev @babel/core @babel/preset-env babel-loader @babel/preset-react

In your package.json, add all the new Babel configuration:

... 
"keywords": [], 
"author": "", 
"license": "ISC", 
"babel": { 
  "presets": [ 
    "@babel/preset-env", 
    "@babel/preset-react" 
  ] 
}, 
"devDependencies": { 
...

In your webpack.config.js, let Webpack know how to transpile JavaScript and JSX (React’s Syntax):

module.exports = { 
  entry: './src/index.js', 
  module: { 
    rules: [ 
      { 
        test: /\.(js|jsx)$/, 
        exclude: /node_modules/, 
        use: ['babel-loader'] 
      } 
    ] 
  }, 
  resolve: { 
    extensions: ['*', '.js', '.jsx'] 
  }, 
  output: { 
    path: __dirname + '/dist', 
    publicPath: '/', 
    filename: 'bundle.js' 
  }, 
  devServer: { 
    contentBase: './dist' 
  } 
};

Setup React

Finally, let’s install React:

npm install --save react react-dom

In your src/index.js file, add the following code:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
 
const title = 'My Minimal React Webpack Babel Setup'; 
 
ReactDOM.render( 
  <div>{title}</div>, 
  document.getElementById('app') 
);

Note that we are using the app identifier here that was defined in our dist/index.html file before. Finally start the application again with npm start and you should see the React output.

That’s it for a very concise walkthrough. As I said before, if you need more explanation, better syntax highlighting, or more advanced tools.

How can you set up a React application manually?

Post a Comment

Contact Form