Intro to React.js

witty-tech-webinars.png

Wondering what all the hype is around this thing called React.js? Unsure what a React.js even is? You are in the right place. 

This week we introduced one of the most popular front-end, JavaScript libraries, React.js. Created by Facebook in 2013, React.js has taken the web development world by storm with its efficient time to render components, built-in functionalities, and reusable patterns. 

Here’s a recap of what we covered

We introduced the fundamental layers of web development: HTML, CSS, and JavaScript. HTML is how you define webpages with the content you see, CSS is how you style your webpage, and lastly, JavaScript is how you dynamically change elements on your webpage. If you are already like woah, never heard of these things before - take a beat and check out our intro to web development webinar. We then dove into React.js and a coding exercise. 

Before we hop into the coding lab. Here are some key items you need to remember:

JavaScript is a scripting language that supports both functional and object-oriented programming. This makes Javascript a pretty flexible language to use. It has a pretty neat relationship with something called the DOM. The DOM is what enables programming languages to connect to the web page and actually change the page. This is where what makes React.js special comes in, React.js has two features that basically makes it JavaScript on steroids, the virtual DOM and JSX. 

The virtual DOM is what makes react so fast and powerful. Instead of reloading every time you change an element like the regular DOM, it only reloads what changes. JSX is like HTML and JavaScript had a child (you’ll understand more once we start coding). We then took what we learned and applied it to an intro to React.js coding exercise. 

  1. ES6 - a newer version of JavaScript

  2. Compilers - how the code gets translated into the web browser

  3. Components - reusable pieces of code that render React elements to the page

  4. Props - inputs to a React component. They are read-only. 

  5. State - an attribute you add to a component when the data changes over time 

  6. Arrow Functions - a fun way to write a function i.e. (param1, param2, …) => { statements }

  7. Const vs Let - variables in ES6, consts can not be changed once assigned, lets can

Now. We are finally ready to get to the coding part of this webinar. 

  1. We kicked things off by going to GitHub and forking this repo (if you don’t know who to use GitHub check out webinar 2)

  2. Once the code was on our computers, we ran npm install

  3. After all the packages installed we did an npm start to see that our React.js project was working. 

  4. We then began the [tutorial]. Building a tic tac toe board! 

    1. In step one, Inspecting Your Starter Code, we made the basic components needed:

      1. A square

      2. A board 

      3. A game

    2. In step two, Passing Data Through Props, we filled the board with numbers! Populating each of our squares with numbers 0-8.

    3. In step three, Making an Interactive Component, we made the board interact with us. 

      1. We wrote our first arrow function, making the squares on the board clickable

      2. And then, we set the state of the squares to reveal ‘X’s’ when clicked

We stopped here, and we know we threw A LOT at you. If you are feeling a little lost and need a recap check out our slides or the recording of the entire webinar. 

Now what? 

Let all this information marinade! We will cover the rest of the tutorial in Intro the React.js Part 2 on May 20th 2020. In the meantime, check out our next webinar - A Data Science Case Study Part 2. Sign up for both here.

P.S. Were you hoping we’d cover something and didn’t get to it? Let us know in the comments below!

With love, 

The WIT Project

wittyTechWebinarsShylee Ezroniwebapplications, javascript, diversityintech1 Comment