cristian1706/globant-bootcamps-react

React Bootcamp

UI Bootcamps

HTML - CSS - JavaScript (React oriented 😉)

IMPORTANT DISCLAIMER

This is not your typical crash course, this is a Bootcamp.

What does that mean?

You will give your best
We will give our best
We will all have a good time

But most important, there will be A LOT of humor, because a happy developer (student, pupil, padawan, you get the point...) is a great and hard working developer.

That said...

Welcome to the bootcamp, learning time has begun

Important: Please, use this repository as a base for all your work. The idea is to fork this project so everyone uses the same folder structure for the exercises.

Index

Objective
Who Should Attend
Duration
Technical Assistance
Performance Measurement
Handling advanced Developers
Materials
Bootcamp Schedule
General Guidelines
Learning Days

10.1 Week 1: HTML, CSS and Javascript + Basic React concepts, components and JSX
10.2 Week 2: Diving into React 101
10.3 Week 3: Here comes Redux! (and more)
10.4 Week 4: React native

Objective

We will teach you the basics (and a bit further too) of Web development using React and React Native.

Who Should Attend

HTML, CSS and JavaScript materials start at an intermediate level. Basic knowledge of this technologies is required since it will not be part of the course. React and React Native materials will start at a low level and does not require in depth knowledge of the library/framework in question. Desirable participant profile: trainees and outside Globant candidates. A basic knowledge on OOP is desired, though.

Duration

Four weeks total. (20 days)

Technical Assistance

You can contact other Bootcamp participants or any available tutor if you need technical assistance. Communications will take place over Slack on our own Bootcamp Workspace

Performance Measurement

Code review after each practice.
Checkpoint completion after Learning stage with your assigned tutor.
Final Application after Bootcamp.

Handling Advanced Developers

Developers that move faster than average can go ahead and complete as much exercises as wanted.

Materials

You will need to install Node.JS (Version 10) (NVM is strongly recommended - Unix / Windows
The recommended IDE is Visual Studio Code. However, you can use any IDE of your preference.
Gmail Account + headset (For hangout calls)
Create your own GitHub account. Follow this guideline to setup your account. Also you can read further about Git in Try Git or Learn Git Branching
Fork this repo to use as a base to host the project code.

Bootcamp Schedule

The Bootcamp is organized in the following way:

The last week will be focused on starting an app and learning some shiny cool stuff. You need to present your work at the end of the week, however you can keep working on it (more on that later).

General Guidelines

Team play is encouraged but the work will be evaluated per person.
The instructions will be vague as they generally are in real life projects. You must look for support and guidance from your PM, teammates and tutors.
All code and documentation must be in English.
HTML syntax must adhere to Globant's HTML Style Guide.
CSS code must adhere to Globant's CSS Style Guide
JS code must adhere to Globant's Js Style Guide.

Learning Days

Each day you will grab the fundamentals of building blocks for usual JS/React applications.

On each learning day you will have to:

Read: We will provide you with documentation related with current sprint content so you can have a background reference, guide and examples to complete the following practice.
Practice: You will implement the previously gathered knowledge in simple coding activities.
Commit: You will commit all your code on a daily basis, when you finish your practice.

Introduction

This repository contains inside the src directory the project structure for all exercises/challenges that you will need to do.
All .js code can be opened directly on the browser. For React code you will need to run a Liteserver with the Create React App CLI. Just running npm start:dev will be enough
Once the server is running, all the modifications you make will be automagically synced and the app will reload.
Basic GIT concepts
READ THAT ⬆️ ⬆️ ⬆️
Extra GIT material

Now let's get down to business

Week 1: HTML, CSS and Javascript + Basic React concepts, components and JSX

Chapter 0: Some ole HTML, CSS and JS

Whay chapter 0?

We as developers know that every structure starts at 0 (any other dev or language that says the contrary is WRONG) so this is the first thing you'll need to master before even trying to fight with the future topics.

Let's get on with it

HTML describes the content semantics and structure of a web page. It was designed as a markup language, if you know XML ~~(the ugly father)~~, you could consider HTML as a subset of XML with a predefined semantic (and soooo much friendly).

On the other hand, CSS allows to define the look and feel of the content. It's used to set colors on HTML elements, customize sizes, define the layout of the document content, among others. (e.x. "The following list of elements must be shown as a menu", "The main title of the page should use this particular font", "make things pretty").

JavaScript is a programming language that runs in all Web Browsers. Using JavaScript we can create full-fledge web applications (and some magic).

Reading:

Not so Optional Reading

Eloquent JavaScript
Responsive Design
Web Components
Why use Web Components
This is your new best friend, Flexbox. The best responsive-friendly CSS model.

Have you spent all night going through all those?

Now lets dive into some serious JavaScript!

There are two core JS concepts that we need to understand before we enter the React world.

First, we will talk about the Event Loop. Sounds familiar? If not, you will find out that you have been working with it more than you think! This 5-years-old draw will help us a lot.

Well, it doesn't look like a 5-years-old draw, but it's still pretty helpful!

If you still have some doubts, check this video! https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=2s

The other key concept is: Promises

What is a promise?

In JavaScript, “[...] A Promise represents an operation that hasn’t completed yet, but is expected in the future.” — MDN Promise Reference.

To put it simple, a Promise is an object that holds a value that is promised to be given to you at some point in time. One can retrieve the value a Promise is holding by calling the Promises then method. A promise starts out in the pending state, then on success it will be in the fulfilled state, or if an error occurs, it will be in the rejected state.

Great, nice work with the definitions, but why should I use them?

Well, there's a little something called CALLBACK HELL and it looks like this

Nah, seriously, it goes like this

And now, this is how our code lookes like when we uses promises. It's not only nicer to see, but also to debug.

  let promise = fetch('api/give-me-json');
  
  promise.then( (response) => {
     console.log(response);
  }, (err) => {
      console.log(err)
  });
});

Also, you can create your own promise, like:

function promiseThatResolvesToTwo() {
  return new Promise( (resolve, reject) => {
    setTimeout( () => {
      resolve(2);
    }, 2000);
  });
}

let promise = promiseThatResolvesToTwo();

promise.then((value) => console.log(value));

To fulfill the Promise, we invoke resolve passing in the value that will be passed into the first parameter of the Promise’s then method, when it is called. Reject works similarly except it is for any errors. It is passed either to the 2nd parameter of the Promise’s then method, or the parameter of the Promise’s catch method.

We also have Promise.all, which takes in something that is iterable like an Array. This iterable object must contain a list of Promise objects, and returns a Promise which resolves when all of the Promises passed into the method resolve. This allows us to kick off multiple async calls and wait to execute further code until all of the async calls are completed.

const p1 = new Promise( function(resolve, reject) {
  setTimeout( () => {
    resolve( "2quick" );
  }, 1000);
});

const p2 = new Promise( function(resolve, reject) {
  setTimeout( () => {
    resolve( [ 1, 2, 3] );
  }, 4000);
});

const p3 = Promise.resolve(1337);

Promise.all([p1, p2, p3]).then((values) => {
  // 4 seconds later...
  // values: ["2quick", [1, 2, 3], 1337]
  console.log(values);
});

Well, looks like Promises are good enough and it's a topic already solved by JavaScript, right? WROOOONG. We always can do better.

There's something called async/await. This feature is already included in Ecmascript's last draft, and also now available using transpilers such as Babel.

async function tryToFetch() {
  try {
    const response = await fetch('/api/data', options);
    return response.json();
  } catch(err) {
    console.log(`An error occured: ${err}`);
    // Instead of rethrowing the error
    // Let's return a regular object with no data
    return { data: [] };
  }
}
tryToFetch().then(data => console.log(data));

It looks pretty sync, doesn't it? That's the beauty of this. However, the code above is all async. It also provides a really clean and intuitive way for handling asynchronous errors, because it uses try/catch syntax, which is exactly how regular synchronous JavaScript handles errors.

Also, you can is it along with Promise! Check this.

// Ideal: This will happen concurrently
async function parallel() {
  const promises = [
    task1(),
    task2(),
    task3(),
  ];
  const [output1, output2, output3] = await Promise.all(promises);
  return combineEverything(output1, output2, output3);
}

Is there another way to do some async stuff in JS? GENERATORS.

That's a topic we all should read about, so here is another not so optional reading:

Generators 101

Exercise

TBD

Chapter 1: Basic React stuff

After a lot of reading, asking and explaining, we are finally here. So, brief introduction to React.

REACT IS NOT A FRAMEWORK.

React is a JavaScript library, that aims to simplify development of visual interfaces. This library divides the UI into a collection of components, with their own interface and state.

Reading

Exercise

Create a Car component to some car information.

Week 2: Diving into React 101

Chapter 2: We are going deeper

I'm sure that some words mentioned in the reading stuff made no sense or didn't ring any bell. Don't worry, we will cover them in a sec. The fun is about to start!

Reading

Exercise:

Add a button to buy a car. Also, below the car information you have to display a label saying "You have X cars", incrementing the value of X everytime you hit the buy button.

Chapter 3: Moving stuff around

Well, so far we've talked about some basic concepts, most of them related to components. But there are two things we haven't talked about yet: how to organize and communicate all this stuff.

We can't leave them 'floating', so let's do some magic.

Reading:

Exercise:

Lets refactor the Car component. We will create two new components:
- CarInfo: this component will recieve all car information from props, and display it.
- CarActions: this one will recieve from props the amout of cars owned and the necessary handlers, and it will show: the amount of cars, a buy button (working), and a sell button (also working).

Note: Car component must not be deleted.

Chapter 4: Cycle of life

As life itself, react components have a lifecycle. And in each cycle we have access to different methods that can be called, allowing us to update the UI and app states. Also, we will see how React handles events and the DOM reference.

Reading:

Exercise:

Refactor Car, CarInfo and CarActions components so now any type of vehicle is accepted. The vehicle name will be taken from props.

Note: Components must be renamed.

Create a list of vehicles, passing each name via props. Remember to define the Key prop for each list element.
Create a Home screen, in which the user will be asked to fill a form. This form has to ask for the username, the amount of money the user has, and if the user already has a vehicle.
The user must be redirected after filling the form to the vehicles list.

Note: There will be two routes:

'/': starting route, where the form is.
'/vehicles': vehicle list route

Week 3: Here comes Redux! (and more)

Chapter 5: Improving what we have

I'm sure that you've heard about this A LOT. But since we are UI devs, we get overwhelmed by the amount of new techonolgies and frameworks that came across almost every day and it's hard to keep updated.

If that's the case, don't worry, you will learn all you need to know about.

Redux is another library, that is usually tied up to React, but it can be used with any other JS view library.

What is it for?

It's a state manager. But why do we need it? Well, if you remember what we've been talking about state and props, you could notice that, in small apps, you could move your state up in the tree and then use props in some cases.

In more complex apps, you will be forced for sure to move all the state up, not in some cases.

So, here comes Redux! It provides a way to manage an application state, and move it to an external global store.

Also, in version 16.3 React introduced Context API, making Redux redundant. If you work with this version of the library or higher, avoid using Redux and use Context API.

Reading

Exercise:

Make the necesarry code changes to add Redux to your app.
Create a HOC to create a component to fetch data.
Implementar Redux Thunk

Note: You can use mockAPI to create your own API.

Chapter 6: Code once

There's no point in reinventing the wheel, and also in coding the same things over and over. For example, just imagine having to run a bunch of commands every time you want to start a development server to work locally; or all what have to do each time you make a release.

We developers are ~~lazy~~ clever, that's why we have tools to do all this things just once, and sometimes we get them done already changing just some pieces of code.

Last but not least, we will have to cover some testing concepts. That's why we will use a framework called Jest

Reading

Not so optional reading

Week 4: React native

Chapter 7: I still have a Nokia 1100

Did you think that you had reached the end? Let's go get a snack and have fun 😉

How does React Native work?

React Native lets you build mobile apps using JavaScript. It’s based on React, but instead of targeting the browser, it targets mobile platforms. In other words: you don't build a mobile web app, an HTML5 app, or a hybrid app. You build a real mobile app that's indistinguishable from an app built using Objective-C.

Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

The focus of React Native is on developer efficiency across all the platforms you care about

Learn once, write anywhere.

Get started in seconds

Are you still bored? Here we go! You’ll need to have Node 8.10.0 or later on your local development machine (but it’s not required on the server).

You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

Just create a project, and you’re good to go.

To create a new app, you may choose one of the following methods: npx, npm or yarn. It will create a directory called name-app inside the current folder.

Inside that directory, it will generate the initial project structure and install the transitive dependencies:

name-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

No configuration or complicated folder structures, just the files you need to build your app.

Inside the newly created project, you can run some built-in commands like: npm start or yarn start.

Reminder: Runs the app in development mode.

You can find detailed instructions on using Create React App and many tips in its documentation.

Reading

Not so optional reading

Chapter 8: Final

Exercise:

For this final step, you will have to take the ReactJS app that you've been developing so far and turn it into a React Native app!

Hey, don't panic. This excercise is for this week and on...

You have until the last day of this week to keep pushing changes. After that you can keep workin on the app, but please create a new branch for it:

lucas.diaz@AR-IT09768:~/bootcamps/ui/week4$ git checkout -b 'post-bootcamp'

lucas.diaz@AR-IT09768:~/bootcamps/ui/week4$ git push origin post-bootcamp

Some advices

Dont't get scared. Even the most successfull Software Engineers and Architects forget things sometimes.
Google is your friend, independence and curiosity are great values that every developer needs to have.
The only way to learn is to fail, so keep failing.
Theory is nice, but you need to get your hands dirty if you want things to stick.
Remember, a happy developer is a great developer (also, coffee is your best friend)

Kudos and keep ~~failing~~ learning!

BONUS

So... you've got your React going, you read a LOT of stuff, you started a SPA. So... What's next?

There're still a lot of stuff to read, some of them really work better under specific conditions or requirements. Remember:

KEEP IT SIMPLE

If there's a more advanced or complicated way to get to a solution it doesn't always mean that's the better approach.

With that in mind, here are some more advanced (or not, this whole beatifull mess was made by a bored developer on a few days span) features that every one should know, and at least being able to explain them.

Hey, If you need a place to kill time try Medium, there's a lot to read about pretty much anything (specially development related topics).