How to set up base frameworks with npm, Webpack and React 2019
This is a guide of the simple React configuration I have used for my current React projects.
- Start off by creating your project directory
- Initialize NPM project
- Install React
- Configuring Webpack 4
- Configuring Webpack 4
- Add the following script to package.json
- Create an index.html file in your root with the following codes
- Create a new directory named src and create index.js file in the new dir
- Install Babel
- Create a webpack config file
- Create a file named .babelrc
mkdir webpack-react-tutorial && cd $_
npm init -y
npm install react react-dom
npm init -y
npm install --save-dev webpack webpack-dev-server webpack-cli
"script": { "start": "webpack-dev-server --mode development",},
<!DOCTYPE html><html> <head> <title>My base framework setup with npm, Webpack and React</title> </head> <body> <div id="root"></div> <script src="./dist/bundle.js"></script> </body></html>
And then, write a React component in the index.jsmkdir src && cd src && touch index.js
import React from "react"; import ReactDOM from "react-dom"; class Welcome extends React.Component { render() { return ( <h1> Hello World from React boilerplate </h1>); } } ReactDOM.render(
, document.getElementById("root")); npm install --save-dev @babel/core @babel/preset
module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist', }, module: { rules: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] }] }, };
And then, write the following codestouch .babelrc
Now run, npm run start!{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
npm run start
References
CSS Variables
Definition
Create Variables
We can make custom properties with values that can be used in other declarations. These property names are prefixed with –, and used in the var( ) function.
- Define a root rule
- Put your variables inside of the root
(At the top of your CSS file) :root { --first-color: hsl(175, 49%, 42%); }
Different Types of Variables
- A regular variable has two dashes
- --second-color: #ffff8c;
- A custom variable has @ sign
- @custom-media --min (width <= 600px);
Using Variables
// Using regular variables #header { background-color: var(--first-color); color: var(--second-color); } // Using custom variables @media (--min){ display: block; }
Create and Use a Custom Selector
... @custom-selector :--headings h1, h2, h3, h4, h5, h6; } :--headings { margin: 0 0 1rem; color: var(--first-color); }
Create a more complicated variable
--my-button: { display: inline-block; padding: 6px; background-color: var(--first-color); ... } .nav .my-button { @apply --my-button; @media (--min) { display: block; } }
Note
This is one of the most useful features in CSS, but still new and experimental technology. Browser compatibility is pretty good, except for IE. You need the post
CSS plug-in to make CSS variables work in IE.Reference
Do you know how to use CSS variables? [LINK]
Custom properties: CSS variables [LINK]calc( ) function
Definitioncalc( ) is a feature that lets you perform mathematical calculations when you specifying CSS property values.
Examplewidth: calc(100% - 50px);
Features
- Mix and match the units: you can subtract a pixel size from the percentage size
- Nest calc( ): you can nest calculations inside other calculations, and use it with CSS variables
- Good browser compatibility: even down to IE 9
.foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); width: var(--widthC);
Note
The + and – operators must be surrounded by whitespace.
* and / operators do not require whitespace, but adding it for consistency is recommended.Reference
How do you use calc() in CSS? [LINK]
calc() MDN web docs [LINK]
]]>calc( )
Definition The calc() CSS function lets you perform calculations in your CSS property values. It can be used anywhere <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. ]]>
Promises
Definition Promises are JavaScript objects that describe what is supposed to happen when an asynchronous operation takes place. They provide certain guarantees and structure to help callbacks and make a time-based operation easy to use. If you want to know about callback function, check out my previous post. [LINK] There are some problems with callbacks because results of callbacks rely on a condition of the network. Therefore, callbacks often suffer from clarity and a lack of guarantees. So, we need promises to guarantee an execution. Here are important features for promises, which are resolve( ), reject( ), and then statement. With resolve( ), we specify what will happen when all our requests will work. And reject( ), we specify what we want to execute when our request doesn’t work. then statement is a special method that will execute when the promise is work correctly. Let’s take a look at the following example.
var isHeeyaMotivated = true; // Promise var isHeeyaAchievetheGoal = new Promise { function (resolve, reject) { if (isHeeyaMotivated) { var goal = { task: 'Graphicdesign', topic: 'mainscreen' }; resolve(goal); } else { var reason = new Error('heeya is not happy.'); reject(reason); } } ); // call the promise var askHeeya = function() { isHeeyaAhievetheGoal. .then(function (fulfilled) { console.log(fulfilled); }) .catch(function (error) { console.log(error.message); }); } askHeeya();
If something happens to the promise and it does not execute, the chain promise will not be executed. It is always better to be specific to what happens when the promise is fulfilled, and what happens if it is rejected. Reference What is the relationship between promises and callbacks? Mastering Web developer Interview Code – Ray Villalobos, Lynda.com [LINK] ]]>var reportHunya = function(goal) { return new Promise( function (resolve, reject) { var message = 'Hi Hunya, I have achieved ' + goal.task + ' for' + goal.topic resolve(message); } ); };