Marvelous Thorough React Tutorial/Workshop — part 1

This series of articles is written as notes used during the workshop hosted in Gdańsk, Poland by OKE Software Poland. It does not pose as comprehensive and complete tutorial serie for anyone, yet it will be used for workshop aimed for developers that have none experience building SPA using React. I am posting it here as I think some people might find it useful. Please do not hesitate to correct my, if you find me writing nonsense. Also please bear in mind that english isn’t my native language, so forgive my any grammar and linguistic mistakes. My second article! Enjoy!
BTW here’s previous part ->
Plan
Part 1 — NPM, Node, Yarn, IDE Configuration and first React component
Ok, so lets agree on one thing: using jQuery isn’t enough for modern frontend projects as we have to handle many concerns like forms validation, lazy loading of assets, state management, animations and many others. It often ends up being a mess. Let’s try to find a better way using React :).
Node, NPM, Yarn
Lets handle Node.js first. Basically it’s another environment in which you can run JavaScript code. It’s especially useful when you are building server side solution with JS (using for example Express). For sure you can open browser and developers console and write some JavaScript code there.

And it’s really useful tool and works great when you’re debugging for example HTML elements that are rendered on page. But how to install and use Node?
Head over to:
and download node installer for macOS (I’ll be using that one) or Windows. If you’re on macOS and using brew, that’s even better. Just open your terminal and type:
brew install nodeand that’s it. It should automatically install Node and NPM (I’ll talk about NPM in a minute). Using Linux? Fine, too. Just type
sudo apt-get install nodejs
sudo apt-get install npmOk, let’s give it a whirl. Open any text editor of your choice and type:
var a = function(i) {return i * 2}console.log(a(5));
Save the file in any place you likeas test.js then open this location in terminal (I’m using iTerm, but check out this beast:
then run this command in your terminal:
node test.jsResults are astonishing, aren’t they? Great let’s move on to the NPM.
Most of the projects have their dependencies. You want to use jQuery or Bootstrap? Well, you have to download it and add it to your project or add it on the fly using CDN (Content Distribution/Delivery Network) and you end up with something like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>That’s fine, but we can do a little better. Many technologies have some solution that allows you to control what libraries are added to project, to lock their version or update it and to connect to some kind of global repository to incorporate them into your own code. Let me name a few just to ring the bell in your head:
- Java -> Maven, Gradle (Android)
- Rails -> Gems and Bundler
- PHP -> Composer
- iOS -> CocoaPods, Carthage
And of course Node Package Manager (NPM in short) which will be our concern. You can read more about it at:
NPM let’s you add packages locally, in your project scope, but even more it let’s you add node packages globally, which are exposed to your environmental variables. Basically this makes you able to run JS code from any location in you terminal, which can be really useful.
Let’s add one of those global packages right now. Go to your terminal and type:
npm install --global yarnThis makes you install Yarn globally. If you’d like to know more about Yarn go to:
Wait. We used dependency manager to install dependency manager?

Is there any real reason to use it? Let me list a few:
- It works offline — if you’ve ever installed a package you can install it again without internet connection
- It’s fast — I really recommend reading through: https://medium.com/@nikjohn/facebooks-yarn-vs-npm-is-yarn-really-better-1890b3ea6515
- It’ deterministic — The same dependencies will be installed the same exact way across every machine regardless of install order.
This are the reasons that convinced me to using it. Let’s see it in use. I’ve set up a repo at:
for you to follow along. Check out the branches (starting from step zero).
Ok, let us start a project. Move to the folder that will be the root of it and type:
yarn initYou’ll be asked to answer few question regarding the basic configuration of the project. You can always press Enter to confirm the default value given in parenthesis. As for the version I’d recommend changing it from 1.0.0 to 0.1.0, as we’re for sure not realising first complete version ;). Remember that any of this options can be edited later.
And (well) what do you know!! We have our very own first package.json file. What is it’s function? It’s easy. It’s dependency list/project description/configuration entry/script list. Piece of cake.
But for now, I’d really like to to run React bare handed. Open your favourite editor (I’ll be using VSCode, which I show how to configure with great set of packages a bit later) and create good, ol’ index.html and load React and ReactDOM from CDN.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Marvel</title></head><body><div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js" /></body></html>
Ok, let’s find a second to discuss what React is. It’s library for rendering dynamic UI. It is based on building independent components and connecting them using very minimal interface. It’s not complete solution like Angular (1.x) or Ember with their MVC approaches. It stands only for V, but as I intend to show you that is more than enough, to build complex UIs.
First Component
Ok let’s try to render our first component. Open terminal in the root of your project and we can add our fist two dependencies:
yarn add react
yarn add react-domYou will see that we get new automatically generated folder node_modules, containing the dependencies that we added as well as depenedencies of our dependencies.
You can open the file in any browser just to admire the marvelous view of your first component. Let’s discuss the stuff we just created. At the very basic level React exposes the createElement function, which takes 3 parameters. The first one is element to render. You can provide a string represeneting HTML5 elemenent like ‘span’, ‘div’, ‘h1’, ‘p’. Second one are params, meaning parameters that can be applied to created element. For example id, style, css class. The third one being the children of created element which enables you to create the representation of traditional DOM tree.
We can see two concepts here. First one is creating our own custom component ‘topBar’ using function and second rendering it to the page using
ReactDOM.render(...)Why are those two concepts separated? Well, React is not only a library, it is also kind of paradigm. React itself isn’t really concerned about where are you rendering the components. That’s why we have ReactDOM library as well as ReactNative (for Native Apps), React VR and even rendering to the Sketch App. Check out:
We are building web app, so naturally we’ll be using ReactDOM.
Ok let’s try to enhance it a little bit. Let’s create new file and call it index.js and move our code there and add it as a script. Let’s push a branch step1-indexjs.
Props
Writing React.createElement can seem a little tiring, but it’s only until we introduce JSX during this workshop. Let’s discuss props a little bit more as they are one of the core concepts. Props are objects, properties and functions passed from the children component to parent (remember that React Components are structured in a parent/children & sibling tree just like the DOM). They can be used to configure and differ the children based on parent need and state. The basic and very important idea is:
The deeper the component is in the components tree the less complicated it should be. This is the basic smart & dumb components idea. Of course there are some exceptions from this, but basically this is rule of thumb.
Ok let’s try adding some props to our component.
Wow! What is this magnificent piece of code?
Firstly we create topBarTitle component which will be used to create children for our topBar component. We create it as a function accepting props object, which will be used to create subset of different components. TopBart title is basically p html5 element that can be configured with style and title that we pass in. The topBar object is a function that createsElement representing standard div, with style of color red and having 3 topBarTitle children with different titles to render and different styles. The second topBarTitle child doesn’t have the style specified and it does inherit the color from the parent.
Well, that’s it. We’re pretty much done with React. Now go on and build great apps.
Nah, not really there’s much more to it, but the minimal React API is right there. You create components, configure it with different props and tell them where to render in components tree :).
Check out the step2-index.js-props branch to get to this stage.
IDE Configuration
Let me stray away from the React itself and discuss the IDE a bit. When I was starting my journey as a developer I was using RubyMine while working with JS and Ruby On Rails. It was great tool as any tool from JetBrains family. You can check them out right here:
But after short time I noticed that:
- It’s heavy
- I’m not using like 80% of functionalities built into it
I found out that Sublime with some packages can be great replacement. I’ve spent my fair share of time with it and it definitely was doing it job. Then the guys from github announced and introduced Atom. Another great IDE with lots of plugins and easy github integration. I decided to switch to it. One thing that it was lacking then was opening of large text files (like long concatanted js files or logs from server), while Sublime was dealing with them just fine. I was really happy with Atom for the long time. Additional layer of tools provided by Facebooks Nuclide was great while dealing with React and ReactNative. Check it out:
But then I decided to switch once again when I tried VS Code. After adding few packages I finally fell I have to search no more. Nice UI, IntelliSense integration, great integration with ESLint, Flow, React and JS. Built in support for git, debugger integrated with Chrome Browser. All of it made me settle with VS Code. I must say Microsoft really did good job on this one.
If you decide to carry on with this tutorial using VSCode, I encourage you to install those packages using the last left bar button in VSCode sidebar:
- Auto Rename Tag -> Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
- Babel ES6/ES7
- Babel JavaScript —> JavaScript syntax highlighting for ES201x, React JSX, Flow and GraphQL.
- Color Highlight —> This extension styles css/web colors found in your document.
- ESLint —> Integrates ESLint into VS Code
- Flow Language Support —> This extension adds Flow support for VS Code
- Guides —> A Visual Studio Code extension for more guide lines
- Indent-rainbow —> A simple extension to make indentation more readable
- JavaScript (ES6) code snippets →This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor
- JSX —> support for jsx in VSCode
- Output Colorizer → Language extension for VSCode/Bluemix Code that adds syntax colorization for both the output/debug/extensions panel and
*.logfiles. - Path Intellisense —> Visual Studio Code plugin that autocompletes filenames.
- Prettier — Eslint -> Format your javascript via Prettier and ESLint — fix. This uses
prettier-eslintto automatically format and fix on save. - Prettier — JavaScript formatter -> VS Code package to format your Javascript / Typescript / CSS using Prettier.
- Rainbow Brackets -> kinda speaks for itself ;)
- React Redux ES6 Snippets-> React-Redux snippets for Visual Studio Code using ES6 and arrow functions.
- VSCode-icons -> this one is for decoration purposes only. Displaying according icon next to your files.
- vscode-styled-components — Syntax highlighting for styled-components.
That’s one big pile of packages, but all of them are optionally and if you don’t feel like using it or using VSCode as IDE at all you can stick to any of your choice.
I’d like to finish the first part here. In the next one we’ll introduce another layer of complexity regarding React ecosystem: Prettier, ESLint, Npm scripts, Webpack and Babel, it’s a lot but as you already know you don’t need them to work with React. Yet, I hope I can convince you those tools help a lot :)
Previous Part:
https://medium.com/@wojciech.bilicki/marvelous-thorough-react-tutorial-workshop-part-0-7e23f93b8ad3
Cheers and stay tuned!
