Table of Contents
React is cool frontend library that updates only the necessary portions of the html. Let’s add it to the project.
Adding React library
yarn add react react-dom
First, let’s keep things more consistent and do some house cleaning. Let’s rename ./src/app.js to ./src/index.js This will be the place where React app will be attached to our HTML and remove ./src/greeting.js
Also change Webpack entering point to reflect app.js filename change:
./webpack.config.js
entry: [ './src/index.js' ],
Optionally but not necessarily change the app.js to index.js in the package.json. It’s always a good practice to keep things consistent.
Alternatively you could simply ommit the name of the entrance and Webpack by default will look for src/index.js
Now Let’s do a react app. Remove ./src/app.js and ./src/greeting folder and let’s
Create simple react app
and place it into the components folder that we will create.
mkdir -p src/components/App
and add it’s index file
./src/components/App/index.js
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div>
<h1>React is running</h1>
</div>
);
}
}
Attach React app to the main html
edit ./src/index.js remove it’s test contents and replace it with this:
./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App/>, document.getElementById('root'));
if (module.hot) {
module.hot.accept();
}
What we just did:
– we imported React and React dom library. React dom is needed to attach React app to the HTML
– we imported newly created React app
– we attached the app to the root container.
– we also added the HMR activation script.
One last thing before we are ready to test is to add the html container where the react app will be attached.
./index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Babel Webpack Boilerplate</title>
</head>
<body>
<h1>Babel Webpack React Boilerplate</h1>
<div id="root"></div>
<script type="text/javascript" src="dist/main-bundle.js"></script>
</body>
</html>
Start the project yarn start
Oh snap! Dev server crashed with error message:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/toninichev/Examples/WebpackReactReduxApolloTutorial/.babelrc: Error while parsing config – JSON5: invalid end of input at 1:1
Why this is happening? We replaced the plain JavaScript form ./src/index.js with JSX syntax that react is using but Babel doesn’t know how to transpile this. Let’s fix it and add in .babelrc config, the react preset plug-in, and install it.
yarn install @babel/preset-react --dev
./.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Right now we need only “@babel/preset-react” and @babel/preset/env plug-ins, but in the feature we will have to use more of the advanced ES6 syntax and add more.
Give it another shot and do yarn start
At this point we should have working react app!
Create React component
Let’s re-create ‘greetings’ component but this time making it React component. Create Greetings folder mkdir -p ./src/components/Greetings folder and add:
./src/components/Greetings/index.js
import React from 'react';
function Greetings(props) {
return <div>Hello, {props.user}</div>;
}
export default Greetings;
and render the component.
./src/components/App/index.js
import React, { Component } from 'react';
import Greetings from '../Greetings';
export default class App extends Component {
render() {
return (
<div>
<h1>React is running</h1>
<Greetings user="John" />
</div>
);
}
}
What we just did:
– in ./src/greetings/index.js we created a new Greetings component that will take property of the user passed from the higher component and show it. Props stands short for properties.
– in ./src/components/app/index.js we are loading the Greetings component and passing the user name as a property to the Greeting component.
Webpack loaders.
Webpack loaders allow us to bundle any static resource way beyond JavaScript.
Using SCSS and adding SASS loader.
So far so good. We could see our new React component rendering but no styles.
The simplest way to style our components could be to add css-loader and then to inject the css into the DOM using style-loader.
...
{
test: /\.(s)?css$/,
use: [
'style-loader',
'css-loader'
]
},
...
But it could be really nice if we could add specific styles only applying to this component.
Go to the terminal, and install these modules:
yarn add style-loader --dev yarn add css-loader --dev yarn add postcss-loader --dev yarn add sass-loader --dev yarn add node-sass --dev yarn add autoprefixer --dev
Add the highlighted lines in webpack.config.js
./webpack.config.js
module.exports = {
mode: 'development',
entry: [
'@babel/polyfill',
'./src/index.js'
],
output: {
filename: '[name]-bundle.js',
publicPath: '/dist',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
// SCSS
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
localIdentName: '[folder]-[local]',
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')()],
sourceMap: true
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
],
}
]
}
};
what we just did:
– added sass-loader which will first convert SCSS to plain CSS
– added postcss-loader interprets @import and url() like import/require() and will resolve them.
– added style-loader simply inserts the css into the DOM
Let’s add some styling for our new greetings component:
./src/components/Greetings/styles.scss
.wrapper {
background: blue;
h2 {
color: white;
}
}
and let’s load it and style the component:
./src/components/Greetings/index.js
import React from 'react';
const styles = require('./styles.scss');
function Greetings(props) {
return <div className={styles.wrapper}><h2>Hello, {props.user}</h2></div>;
}
export default Greetings;
What we just did:
– we added the new style that will be loaded by JavaScript into the new component (line 3)
– we applied the new style (line 6) by using JSX way of doing this.
If you are not familiar with React and JSX please read the React tutorial first.
Congratulations! Now you have React component that could really be in use!
Adding image loader.
Let’s add url-loader and file-loader and save them as a dev dependencies.
yarn add url-loader file-loader --save
Download a small Home Icon that we are going to add it to our greeting component, and save it into a new folder under ./src folder./src/images/home.png (Make sure that you renamed the file to home.png ). Now let’s add the Webpack config to load images:
./webpack.config.js
import webpack from 'webpack';
import getEnvironmentConstants from './getEnvironmentConstants';
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: [
'@babel/polyfill',
'./src/index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080/',
],
output: {
filename: '[name]-bundle.js',
publicPath: '/dist',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({ 'process.env' : getEnvironmentConstants() } )
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
// SCSS
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
localIdentName: '[folder]-[local]',
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')()],
sourceMap: true
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: false
}
}
],
},
// images
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
}
],
}
};
what we just did:
– we are testing files for image type (line 64) (png, gpeg or gpg, svg)
– we are using url-loader to load the images.
– url-loader – limit: 8000 means that any image smaller than 8kb will be converted to base64 string and inlined in the bundle. Any other image will be passed to the loader that will pass it as a file.
An now let’s use the image in our Greetings component:
./src/components/Greetings.js
import React from 'react';
const styles = require('./styles.scss');
import homeIcon from '../../images/home.png';
function Greetings(props) {
return (<div className={styles.wrapper}>
<img height='75px' width='75px' src={homeIcon} />
<h2>Hello, {props.user}</h2>
</div>);
}
export default Greetings;
Navigate to the greeting component, and we should see the house image there.
Let’s also check if we can add the image url in the CSS. Remove the image tag from the file above, and add it in the greeting CSS
./src/components/Greetings/styles.scss
.wrapper {
background-image:url('../../images/home.png');
height: 500px;
h2 {
color: black;
}
}
navigate to the page again and you will see a big background house in the component.
Adding fonts loader.
Loading fonts is as easy as adding another file-loader as it is shown below.
./webpack.config.js
module.exports = {
mode: 'development',
entry: [
'@babel/polyfill',
'./src/index.js'
],
output: {
filename: '[name]-bundle.js',
publicPath: '/dist',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
// SCSS
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
localIdentName: '[folder]-[local]',
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')()],
sourceMap: true
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
],
},
// images
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
//File loader used to load fonts
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
}
};
then we could download some font for example from fonts.google.com or here and add the font in the css using font face:
./src/components/App/styles.scss
@font-face {
font-family: 'MyFont';
src: url('../../fonts/aclonica/aclonica-regular.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
.appWrapper {
background: rgb(141, 141, 172);
color: white;
text-align: center;
font-family: MyFont;
}
Modifying component to use latest ES syntax.
We want to be cool devs and to use the latest technologies so let’s modify our Greeting component to use the latest ES6 syntax and take advantage of Babel that we installed in the previous chapters.
Modify greetings index file as follows:
./src/components/Greetings/index.js
import React from 'react';
import styles from './styles.scss';
function Greetings(props) {
return(<div className={styles.wrapper}>
<h2>Hello, {props.user}</h2>
</div>);
}
export default Greetings;
What we just did:
– (line 2) we refactored the component to use the latest EC6 syntax by replacing require with import
– we removed the image tag since now we are loading the image-background from CSS.
Great and helpful tutorial !
Thanks !