Sunday, June 11

LEARNING PATH: REACT: MAKE STUNNING REACT WEBSITES - Part 1

Below are notes from the React tutorial I took from safaribooksonline.

Installation and Setup
1) Make sure you have node and npm installed.

2) Create a directory "public/img"

3) Run command "npm init"

4) Create a file "index.html" inside your public directory.
If you are using VSCode, it has emmet plugin already installed. By typing "!" and pressing tab, you will get the basic html ready to get started.

Setting up Webpack and WebPack-Dev-Server
1) Install webpack

Notice the parameter "--save-dev". It means that we want the the package to be installed for development purpose. Also this parameter will add an entry to our package.json file, so anyone who wishes to run our application on their local environment will just have to "npm install" and it will download the package automatically instead of performing installation of webpack explicitly.


2) Next step is to configure webpack. The best way to do is by creating a js file. Create a file "webpack.config.js" in parallel to "package.json".



3) To start the webpack server, go to "package.json" and add a your server to the scripts parameter as shown in screenshot below. Note the name of the script is "start".


Thus, to start a webpack server, go to console and run the command "npm run start" or "npm start" because "start" is a common keyword, "npm start" will work fine.



Be the first one to Comment!!!

Post a Comment