Build React Social (1) : Custom Webpack or Create React App
Most of the time I have been trying to find a project in real world for ReactJS which support popular libraries and data platforms. I also needed to have a flexible structure to make reusable codes which give me the ability to use same code on React Native for mobile apps.
I found the clues and I’m going to share them with you. So be sure you follow the clues and get more information about them to reach advanced level.
There are some cool stuff which I used in React Social Network such as Redux, Material-UI, redux-saga, InversifyJS, etc. which I would talk about through this blog. I will talk about my experience and issues which I faced with creating this project in a nutshell. Seems a long story, however I will try to update this blog every time is possible and add more.
Before starting if you are new to React I recommend you to take a look at [react-howto](https://github.com/petehunt/react-howto) article and be sure you have general idea of React/React tools.
Setup React Project in a nutshell
To run your react project you need to use build tools.
1- Using Babel for ES6+
Almost all browsers are able to understand ECMAScript 5 of javascript version.
But there are not so many browsers supporting all features of ECMAScript 6 or later version.
Above code can’t be executed in all browsers. So what if you want to use ECMAScript 6 in our React Project. Here is the place Babel come. Babel is a JavaScript compiler.
Babel compile the code left side (ECMAScript 6 version) to the code right side (ECMAScript 5 version). With this we are able to write our code in ES6+ and before using in our html code compile to ES5 which is supported with all browsers.
To make it simpler we use ES5 instead of ECMAScript 5 and ES6 instead of ECMAScript 6
We write the code in ES6 so the time all browsers support ES6+, we are able to use the exact the code without compiling.
2- Using Babel for JSX
React using JSX syntax to have html and JavaScript at the same place .It is a syntax extension to JavaScript.
However this is an unknown syntax for browsers and also JavaScript. Here Babel has a transform-react-jsx library and also React preset of Babel support React compiling to JavaScript as above code.
3- Using CSS extensions
CSS extensions that make the css code more flexible such as Sass and less.
Above left side Sass code is not readable for browser. Browser only understand CSS code. So before run our project in a browser we need to convert the Sass code to pure CSS.
Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.
4- Using Modular Solution
Nowadays with Single-page application (SPA) most of the code render on the client side. Therefor we have more than thousand line of code on the client side.
We can not write whole the JavaScript code in one file to manage a huge project. Because it’s too difficult to change and review the code.
In SPA we need modular solution. In a simple word we part the codes to separated files.
Good authors divide their books into chapters and sections; good programmers divide their programs into modules.
Here is what we would do normally.
<script src="module1.js"></script>
<script src="module2.js"></script>
.........
<script src="module10.js"></script>Now our code are in separated modules/files. So it’s more simple to review each part of our code.
To use each module in another module/file we can use some features like CommonJS. With CommonJS we have the power to set each module in a global variable which is called module.
Then we can use each module in other modules or apps.
As you see with CommonJS managing module is easier.
In ECMAScript 6 modules we have a little bit different syntax.
And then we are able to import in another file.
To learn more about export in ES6 please check out this page by Mozila.
I also Recommend JavaScript Modules: A Beginner’s Guide published by @Preethi Kasireddy
5- Using Webpack
Webpack is a module bundler. Webpack takes modules with dependencies and generates static assets representing those modules.
Why we need to bundle files?
Bundling improves load time by reducing the number of requests to the server.
If you use many JavaScript file in modules and also CSS files, it’s better combine them in a file before sending to the client. As a result when users send a requests to the server users can receive whole the code in a request.
Here Webpack gives you the ability to combine all files in one file or some chunks file.
Webpack do everything for you, using custom folder structure, plugins to use Babel , minification, web server, etc.
Assume that you have main file named index.js. You import another module (here bar.js) in index.js .
Then in webpack.config.js from your project root folder you should set entry file which is your main file (index.js) and the output file address which is the bundle file, Webpack create from entry file.
There are so many features which you can use for your React project but I recommend you to learn how to start your React project using Webpack 4, read this article published by @Linh Nguyen My
If you need Webpack examples in real world you can try with react-blog, js-react-social-tutorial and react-social-network pre next version.
5- Using Create React App
As you see, building React app project with Webpack needs so many configuration to be done and sometimes it could be a pain as a new user. Maintaining the build tools could be another trouble .
Facebook team officially published a package named create-react-app which is responsible for creating a new React app without configuration. They add all configuration and the Webpack internally and capsulated.
To create your React app and start, you only need three commands.
npx create-react-app my-app
cd my-app
npm startEasy!
Create React App has a great community which make you sure about maintaining. Create React app has enough features to support your needs. Even if you feel that you need to customize your build tools, you are able to use eject command and it takes back everything to your custom Webpack with configurations.
To learn about Create React App you do not need to look for any article. Create React App has a great user guid which help you to use whole the features even how to deploy your React app.
You can check out React Social Network project as a real world example.
Track my open source projects on Github/Qolzam.
If you it’s helpful to you and you want me to continue this topic series, let me know by hitting clap 👏 button.
If you see any thing which improve my knowledge and the audience please let me know by your comment. I appreciate your feedback.
