Mentor Léo: meet the frontend React ecosystem (Week 2/Day 1)

Work from anywhere, be a web developer
Learn by doing, become a Hero developer

This series is about teaching Léo to become a professional developer from scratch. Léo can be any of you, desiring to learn and grow. Apply here, it will always be free ♥ https://mentorleo.co

See the story of the project on medium

Week 2 — Day 1: Frontend ecosystem

This week will be about building a React frontend ! We will take what you did in the week 1, and make it using the tooling we use as professionals frontend developers.

Single Page Applications (SPA)

Most websites traditionally uses one html file par page (index.html, contact.html and so on). It means you have to reload the whole page each time you click on a link. Hopefully assets like CSS & images are cached by your browser (understand: saved for future loading) so that you only download them once. However the html itself is not cached.

SinglePageApplications refers to websites that use javascript to switch the inside of the pages. Clicks on links won’t reload the page, but will make the content be changed dynamically using javascript. SPA are heavier at first load (the javascript bundle contains a lot more stuff), but the page transitions are almost instant.

There are a lots of pros and cons, check out this link if you want to know more: http://www.eikospartners.com/blog/multi-page-web-applications-vs.-single-page-web-applications

For the sake of simplicity, we’ll stay with one html file per page ;)

React

Let’s write our first React lines of code. Create a file named “app.js” and copy/paste this code:

Using “require” you can get the code exposed by your dependency (here we have React and ReactDOM). Note that we don’t apparently use “React”, but “ReactDOM” needs it so we have to put it (try to remove the line that requires React and you’ll see :D).

The ReactDOM.render function takes two parameters: the element you want to put (in JSX notation), and the element in which we want to render the first argument.

WebPack

WebPack will generate a javascript/styles/images bundle for you (https://webpack.js.org/). You can configure “Loaders”, which are plugins that does the magic for you. We will be using the babel-loader which transforms recent javascript code (ES6) and React components notation (JSX) into code that is compatible with all the browsers. Benefits ? Your code is simpler and so easier to write/maintain.

First of all, initialize your project with npm:

npm init

Then we need to install the react & react-dom dependencies using npm:

npm install react react-dom --save

This will install react & react-dom in your local repository while saving it to the “dependencies” section of your package.json. It means that these dependencies are meant to be used in production (react is the core of your app!).

Then install the dependencies for webpack:

npm install webpack babel-loader babel-core babel-preset-es2015 babel-preset-react webpack-dev-server --save-dev

This will install webpack in your local repository while saving it to the “devDependencies” section of your package.json. It means that these dependencies are not needed in production.

Saving dependencies (npm install — save-dev <your-dep> or npm install — save <your-dep> for production dependencies), allow you to know which libs you need for your project and at which version. We use it a lot to maintain the same configuration inside a developper team.

Add a “webpack.config.js” file at the root of your project. Copy & paste this configuration file (everything is documented, you should understand the bevahiour of this configuration file):

Then in your terminal run:

webpack

Freaking easy right ? It will build your app in a “bundle.js” file while transpiling it with babel to make it compatible with all browsers (ES6 & JSX into ES5).

For more information, see the article from one of our Léos (Tushar Mehrotra) about Babel:

Now, link this bundle to your html page. Put this just before your </body>:

<script src=”bundle.js”></script>

Load your page in your browser and Taadaaaam ! You just implemented your first React code ! Congrats \o/

We can go even further. How boring it is to make changes to your code, then type that command ? What if we could have something that watches the changes in the folder and reload the webpack bundling ?

Well, you already downloaded something that does the job with the npm install command above (webpack-dev-server). Run in your terminal:

node_modules/.bin/webpack-dev-server

It will tell you where the content is served (by default http://localhost:8080/). Try changing a javascript file, it should reload the page ! Hurraaaaay ! Welcome on a professional frontend stack :D

Now it’s time to upload it on firebase (see here if you miss the article about setting up firebase). But problem: with NPM we have a huge folder “node_modules” that contains all the dependencies and their own dependencies. We need to tell firebase to not upload those. Edit your firebase.json configuration file. Here’s a good practice: ban everything “**”, but specify manually which files/folders to allow using a prefix “!” (index.html, your “assets” folder, your css file, etc).

Then launch your deployment:

firebase deploy

\o/

Next day we will configure the preprocessor Sass for your CSS and we will enter deeply into React ;)

Resources

→ click here to go to Day 2 👍

Call to action

Join us ! We are creating a community of motivated Léos helping each other. Apply here, it will always be free ♥ https://mentorleo.co