Mentor Léo: dive into React.js (Week 2 / Day 2)

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

CSS under steroids: meet Sass

We don’t use raw CSS anymore. You may have already experienced in week 1 that you have to change something at several places if you want to tweak a color, a size, a margin, etc.
CSS preprocessors like Sass (https://sass-lang.com/) will allow you to use variables, loops, etc to generate easily maintainable CSS. You can just define a variable once, and refer to it each time you need it. Then you just have to edit that variable to have your changes be seen everywhere on your page ;)
The only downside is that you have to build your Sass file to CSS, but webpack is here for this !

Need a recap about Webpack and Loaders ? Follow the previous day again.

If you had inline CSS (code inside <style></style> in your HTML), move this code inside a .scss file (Sass extension). Hint: if you move background-image properties into your external file, you’ll have to configure your webpack file like this to also bundle the images, otherwise you’ll get errors:

{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=dist/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}

(I told file-loader to generate the files in a dist folder, add it to your firebase configuration if you ignored all the files / folders by default)

And you’ll have to install those loaders:

npm install --save-dev file-loader image-webpack-loader

Traditionnal tools like Grunt or Gulp let you configure explicitly which files you want to build and you code the Loaders yourself. Grunt or Gulp are very flexible but you’ll almost never want to use them for this because you don’t need that level of flexibility (and they are slow as fuck).

Webpack is pretty powerful. You just specify the “entrypoint” of your application, here our app.js. From this file, it checks all the dependencies we have and he bundle them. You’ll never bundle stuff you don’t use (whereas Gulp/Grunt it may happen). See the official documentation if you want to know more.

So now we need to tell Webpack to build our .scss file. How do we do that ? By telling him explicitly that we have a dependency to this .scss file. In your app.js, add this line:

require(‘./your-style-file.scss’);

Your job right now is to add a Sass loader:
- find the right NPM package on google
- install the package with NPM with the — save-dev flag
- edit the webpack.config.js to add the sass loader on CSS files

React Components

React is not a framework. It doesn’t tell you which architecture/internal libraries/naming convention you should use (Angular is a framework). It’s a library, dedicated to render stuff (the View element in MVC — Model View Controller).

See more about framework versus libraries: http://www.programcreek.com/2011/09/what-is-the-difference-between-a-java-library-and-a-framework/

React is designed to handle what we call Components. It’s all about dividing interface elements into smaller pieces that we can reuse. This is very important.

What Components are there in your page ? Not that much in fact:
- Avatar: if we want to add multiple avatars, like your mentor’s ;)
- Labels: you have several of them, and you may want to interact with them dynamically

Titles are text are here too simple to be designed as components.

We could also create a Root Component that handles your entire page !

I write the Avatar one and the Root, you write the Label :D

Debugging tools

Before you turn insane trying to understand why your code doesn’t work, enable the DevTools in Chrome. There is a Console tab inside where you can see all the errors and warnings happening on the page. There are equivalent on the other browsers (but DevTools is the best !).

React Props

There are several ways to pass information down to sub-components. The most common is props. They are written like common HTML attributes.
Let’s say we have an Avatar react component. In JSX you can instanciate a component like this:

<Avatar url=”your-avatar-file.png”></Avatar>

I specified an “url” prop. You can use it inside the “render” method of your React class by using “this.props.url”. Take a look at the following code:

Got it ?
See how we defined our Props interface by specifying that URL is required. It will prevent us from forgetting it (otherwise an error will pop in the console).

I wrote the Root component below to let you understand how to import your own files:

Your turn ! Now import the Root component from app.js and replace the H1 we had by <Root></Root>.
Moreover, create a Label component using props to customize the label (text, color, other ?). Integrate HTML, CSS, Javascript, React, Webpack, Sass labels directly from the Root component ;)t

In Day 3 we’ll start to interact with those labels using React states \o/

Resources:

→ click here to go to Day 3 👍

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

Like what you read? Give Damien BRY a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.