Mentor Léo: meet the frontend React ecosystem (Week 2/Day 1)
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
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.
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 ;)
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.
First of all, initialize your project with npm:
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:
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>:
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:
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:
Next day we will configure the preprocessor Sass for your CSS and we will enter deeply into React ;)
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