Hello,
My name is Lynden Kidd. I am a Video Creator, and Software Development student, currently studying at the Southern Alberta Institue of Technology.
As an up and coming developer I recognize that it is important to continuously expand my skills. Learning new tools will give me the edge I need to excell in the ever evolving tech industy.
For my fourth semester "Emerging Trends" class, I was tasked to pick a technology and learn it by myself. I chose an exciting modern web application technology called React. I decided to learn React because I was looking for a way to implement and build out some of my many app ideas. I knew it would take me a million and one years to build beautiful interfaces in Java so I needed to learn something more efficient. I was looking for the easiest and most realistic way I could work on my projects in small teams. Soon enough I stumbled across React and React native (mobile). As I progress through this journey of discovery, I will share what I’ve learned on this blog. I will also dive into some interesting concepts and show you some some of the interesting projects that I have started working on. I hope it inspires you to also learn a new tool and build your first project as well!
As you tread through this, please recogonize that I am not yet an expert… I still have so much to learn. If you spot any mistakes feel free to let me know in the feedback thread at the bottom of the page. Okay, okay, enough chit chat. Let’s get started!
So what exactly is React?
React is a powerful javascript library. It is designed to simplify the front end UI’s. React uses a declarative, component based design architecture, ensuring your code is easier to debug and more predictable. It was designed to make code and components reusable. Instead of using older technologies such as J-unit to build clunky, and frankly unappealing Gui’s, React takes a more portable and reusable approach; simplifying the design process. React works by creating a virtual DOM in the memory instead of changing things directly in the browser. This allows React to change things that only need to be changed, instead of rerendering an entire page.
Pre-requisites:
Before learning React it is important that you have sufficient experience with HTML, CSS and Javascript. When I first started learning React I realized quickly that I needed to sharpen my JavaScript skills as there were concepts like arrow functions, ternary operators and array methods that were completely foreign to me. If you also find yourself in that boat, check out some of these links. It may be useful.
Arrow Function:
Ternary Operators:
The Traditional Way:
In the past a developer would have to use HTML, CSS, and vanilla Java script to develop a web application. The HTML controlled the elements on the page, the CSS styled, and java script controlled the logic and event handling. This made for the logic to be separated from the components. Forcing developers to select elements using events. It is not done declaratively.
It wasn’t until 2013 that Facebook came out with a solution that would change the tech industry. Although the fundamental software design techniques are still important, React provided a way to simplify the process so that smaller development teams could make modern applications.
React is Component Based:
To understand what I mean by component based, let’s start by breaking down the popular Canadian food ordering platform, Skip The Dishes.
Everything circled in red is a component. Components are tidbits of code that ultimately combine together to make up a usable application. In the top left corner there is a function (similar to a class) that returns the directory or web address containing their logo file, most likely a PNG. In the top center of the screen there is a JSX component that renders a search bar. Just below you will notice that they are structurally similar but with different content. The beauty of React is that instead of having to program every single menu option individually, you can recycle your code by reusing your isolated functions.I was so thrilled to learn this! It makes programming less tedious and more enjoyable.
React is State Based:
Although each menu container (div) has the same structure, each one displays different information that is unique to that restaurant’s menu. This is because React can render something different based on the state that it is given, even if it is the same component. This built in React object allows pages to be more dynamic. When the state changes, the component will re-render. This allows the application to “React” to changes in real time. We will go over the more advanced implementation details of the state React object in the next blog post.\
React uses Props:
Just like in JavaScript, you can pass arguments in your functions. These are called props. They allow you to pass information from one function to another. Following a parent child relationship in a component tree. You can use props to display text or destructure the object by using JSX. To use JSX you just need to put the code into curly braces { }.
What the heck is JSX?
JavaScript XML enables element creation. It was created to combine the logic of Javascript and couple it with a markup language such as HTML. JSX expressions are placed inside of your functions, making it easier to build dynamic user interfaces. It is especially useful when trying to create HTML elements. Instead of having to use “createElement” you can just directly assign HTML tags to a Const or Variable.
JSX expressions look a little funky, but it is actually a lot more convenient!
Getting Started:
That should cover the 4 main pillars of React. Now it’s time to get started!
To begin any application you must have an IDE (Development Environment) such as VScode, MyEclipse, Code Sandbox, Codux, or WebStorm. You will also need to install Node JS. To actually create a barebones template of your web application you should run the command “ npx create-react-app <the name of your app> “ This will set up all the initialization directories and dependencies. To run the basic program you must enter into the directory of your app name using the command “cd <the name of your app>. Next you can run npm start or yarn start. This will launch a page on your localhost:3000 of your next available port number. You will see the app logo as well as a link to learn more about react
File Structure:
It is important that each .js or .jsx file that makes up your application should contain a couple of things.
Optionally import React from ‘react’
Import any libraries, style sheets, or external elements
Each file should have a function
Each file must export the function so that it can be rendered by the parents function
Building The First Application:
To prepare for my first project I spent a week refreshing my Java Script skills . After that I started watching YouTube Tutorials. I found a Youtber by the name of "Web Dev Simplified" that I really like. The only issue was that the content was not linear, just random videos that get recommended. I wanted to take a more structured appraoch so I tried out some classes on Skillshare. I soon found out it wasn't a certified course with a certificate so I ultimately opted for a Udemy course called "React - The Complete Guide (incl Hooks, React Router, Redux)". This set me up with all the tools I needed to build my first React application. I chose to build a simple dynamic web page. I followed a tutorial and came out with a To-Do List.
In this blog post I won’t walk you through all the steps for creating a To-Do List. There are plenty of great tutorials on Youtube. However below you will find a link to my Github. There you can access my public repository and play around with my code. I hope it inspires you to start your first project too!
Final Thoughts:
That concludes my first blog post on React! I hope you learned something new in the world of front end app development. I have a couple more blog posts for this topic on the way! If you have any questions or want to leave some feedback please let me know in comments!
See ya again soon!
Comments