Open webinar “Creating an application on Webpack + React + Express”

    Hello!

    In July 2018, our teacher of the JavaScript Developer course , Yuri Dvorzhetsky, conducted an open webinar on “Creating an application on Webpack + React + Express”, albeit in the second year , where he acts as a teacher in one of the JavaScript modules. In this material you can get acquainted with the video recording and a brief retelling of the past master class.

    Work in the open lesson was carried out according to the following plan:

    1. Meet Node JS and Express JS.
    2. Meet the Webpack.
    3. Meet React.

    So let's go!


    Node JS


    With the advent of the new standard ES6, the popularity of JavaScript has noticeably increased, as evidenced by the same statistics on the number of pull-requests on GitHub for 2017, where JS ranks first.

    One of the JS drivers was Node JS, a software platform based on the V8 engine (translating JavaScript into machine code) and turning JavaScript from a highly specialized language into a general purpose language. Many people call Node JS “server-side” JavaScript, however, the definition is not appropriate “server-side”, but “computer-based”. For example, Node JS has a very rich environment, including its own package manager called npm, which you can safely run on your machine (the repository is available at npmjs.com). And this is not the only package manager, there are others. The configuration file is package.json and it is easy to guess that it is configured in JSON format.

    As part of the introduction to Node JS, users were asked to perform the following actions:

    • download NodeJS from the official nodejs.org/en/ site ;
    • install on a computer and check the version;
    • make sure that the node –v works in the console.

    The next stage is the creation of the first Node JS project. This could be done in one of two ways:

    • the npm init command (and further agree with everything by pressing enter);
    • by downloading the repository via a link in GitHub and introducing the git checkout 0 command.

    The next step is getting to know Express JS.

    Express js


    Express JS is a popular web server for the Node JS environment. In terms of Python, this is something like Django, only there, in fact, there is nothing but REST methods. Express JS is perfect for creating REST services that accept and send JSON, but in general it is quite ascetic, so everything you need is taken, as they say, “screw”. By the way, other web servers are made on its basis. At the same time, you need to understand that Express is something like an intermediate (middleware), which still needs to be configured and filled with logic.
    During the webinar, Express JS was installed using the npm install express command with the –save key added. It was also possible to simply drop out in the gita (git checkout 1) with writing npm install. As a result, the node_modules / folder was created, and the contents of package.json changed (the corresponding dependencies appeared).

    After the preparatory work, it’s time to write the server itself:

    1. Creating the /server.js file in the project root.
    2. Placing in it a certain code written in JavaScript. The purpose of this script:

    - getting express from the "mysterious" node_modules /;
    - add handler to URL /;
    - launch Node JS (using the node server.js or npm start command).

    You could also just drop the tag number 2 (git checkout 2).

    JS, ES6 and transpiling


    As mentioned earlier, ES6 is a modern JS standard. It is a set of features that are not fully supported by any browser (only part of the set is supported). As a result, the question arises: what to do if we want to write on modern ES6, and in browsers only ES5.1 is supported? This is where transpiling comes to the rescue. His idea is this:

    1. we have code written in ES6;
    2. we compile it (ES6 is converted to ES5.1);
    3. The resulting JS-ku can be placed on the pages of browsers.

    As a result, it is possible to use not only ES6, but also different dialects and extensions, thereby increasing the power of JS, for example:

    • "Typed" JavaScript TypeScript (TS);
    • JSX - XHTML in JS (React base);
    • Flow - static type checker.

    One of the most popular and powerful transpiling is Babel. It was he who was used to solve the problems of an open lesson.

    The advantages of assembly:

    • You can collect all JS-files in one bundle;
    • can be minimized and obfustsirovat bundles;
    • you can simultaneously run LESS-> CSS, etc.

    Webpack


    Webpack - one of the most clever collectors. It is conceptually complicated, especially in terms of terminology, but it has no equal, and the latest version is simpler than the previous ones. However, you should not be afraid of it, because making a config with it is a one-time job. And without any exaggeration, the number of buns included in the Webpack can be “overeat”.

    For example, the webinar listeners were shown webpack.config.js and examined each line of the file in detail to understand the terminology as a whole.

    The next step is to create a client with ready configured React and Webpack (the npx minimal-react client or git checkout 3 command for lazy people). After this, you could go to the cd client / folder created in this way and open the webpack.config.js file, a fragment of which was shown a little earlier.

    React


    Gradually, the time has come for exploring React, an open source JavaScript library for developing user interfaces.

    For a first look at React and a “soft” immersion in its environment, the listeners were asked to open client / src / index.js and, if nothing happened, open client / src / component / app.js.
    The basis of React is JSX. This is the JS and XHTML dialect written in JS. Despite the fact that React can be used without JSX, all its power is in JSX. As for React itself, this is one of the most popular Hackernoon frameworks based on the component approach. He has a large number of support packages and a huge infrastructure. The application itself is a collection of components containing their own markup and behavior.

    React features:

    • components can use each other;
    • This JS runs in the browser;
    • in fact, there is no markup in the browser, but it appears when the client’s browser executes this code;
    • the components render their note, and the components used - their own inside;
    • the markup does not have to be static and is not;
    • information can be passed to child components;
    • components can be conditionally rendered.

    After getting acquainted with React, the practical part of the webinar continued, resulting in the following steps:

    1. launching webcam in the client folder (client / npm run dev);
    2. writing your own simple component according to the instructor’s instructions or via git checkout 4 (the Webpack could not be stopped).

    Next, the audience was asked to use props objects and do type-dynamic rendering (git checkout 5).
    Nuances of props:

    • contain the properties of components;
    • it is possible to transfer not only strings, but also objects;
    • ideally, communication on the reactant component line is always built on props.

    At the final stage of the practical lesson, a backend and a web server were connected (git checkout 6).

    THE END

    Thank you for your attention and as always we are waiting for your comments and suggestions.

    Also popular now: