Learn React Essentials in 5 Minutes
To start development and to write any simple code and run it via web pack we need to include 4 libraries:
Let's get into some more details about each library
npm install react --save
The React package contains
.Children, and some other helpers related to elements and component classes. These are universal helpers that you need to build components.
npm install reactdom --save
Now, if you are wondering why we need to install ReactDOM and what the difference between React and ReactDOM IS, here you are - ReactDOM is a glue between React and Dom.
Prior to V0.14, all ReactDOM functionality was part of React. The reason React and ReactDOM were split into libraries was due to arrival of React Native. React contains functionality utilized in web and mobile apps while ReactDOM functionality is only utilized in web apps.
Bit of Trivia for you — there was a point when developers wanted to use React common for both web and mobile. For some unknown reason, this did not happen. Now, React Native is an entirely different package used for mobile apps.
npm install babel- --save
Babel-CLI: Babel comes with built in CLI, which can be used to compile files from the command line. This can be used in the initial stages of learning React. Otherwise, in general, it's a bad idea to run globally using this.
Babel-Core: This can be used if you want to use the Node API.
Babel-Loader: This can be used when using Webpack. This library will be used when building real time applications.
npm install webpack -g --save
npm install webpack-dev-server -g --save
Webpack is a module bundler. At a high level, module bundling is simply the process of stiching together a group of modules and their dependencies into a single file or group of files in the correct order.
Why do we need a module bundler? When you're coding, you'd divide your program into modules and then organize these modules into different files and folders. Chances are you will also have a group of modules for the libraries you are using (ex. Bootstrap or underscore-react). As a result, each of these files has to be included in your main HTML file in a
<script> tag, which will then be loaded by the browsesr. When a user visits your homepage, each file with a different
<script> will have to be loaded individually, which will increase your page load time.
To get around this problem, we'd bundle or concatenate all our files into one big file in order to reduce the number of requests.
So how does Webpack work?
Webpack analyzes our entry files for dependencies to other files. These files, also known as modules, are included in our bundle-js. This Webpack will give each module a unique ID and save all modules accessible by ID in the bundle-js file. Only the entry module is executed on start up. A small run time provides the require function and executes the dependencies when required.
We can run Webpack in three modes:
1. Run manually: Each time, modify a file and run webpack.
2. Run in watch mode: Webpack can cache unchanged modules and output files between compilations. When using watch mode, Webpack installs file watchers to all files, which were used in the compilation process. If any change is detected, it’ll run the compilation again. When caching is enabled, Webpack keeps each module in memory and will reuse it if it isn’t changed.
3. Run in development server: The development server is even better. This binds a small express server on localhost:8080 which serves your static assets as well as the bundle (compiled automatically). It automatically updates the browser page when a bundle is recompiled. The dev server uses Webpack’s watch mode and it also prevents Webpack from emitting the resulting files to disk. Instead, it keeps and serves the resulting files from memory.
That's all for today! Stay tuned for the sample codes!
Here are some more beginner resources on React: