Getting Started Learning React.js

What is React

React has quickly become a very popular JavaScript library for Frontend development. The goal of this tutorial is to learn the basics of what React is and how to get started using it.

What you should know

To get the most of this introduction you should have a basic understanding of web development, that is how to create web applications using HTML, CSS and JavaScript.

JavaScript is the core of react! If you are learning React or any JavaScript framework for that matter it is important to have a solid understanding of JavaScript. React relies heavily on the use of JavaScript, so if you feel like you want to brush up on your JavaScript skills the React documentation provides this helpful tutorial with just that intended purpose.
A re-introduction to JavaScript

One thing to consider before diving into learning React is the ubiquitous nature of JavaScript. This is an introduction to React, but the reality of learning a new technology is that the tools we are learning are constantly changing and improving. In short JavaScript frameworks and libraries will come and go but having a solid understanding of the core language that these tools rely on is very important. This will also allow you to learn new JavaScript libraries in the future, as well as other technology’s that rely on JavaScript.

JavaScript libraries & SPAs

React was designed as a pure JavaScript representation of the DOM. React can also be used as a framework for creating SPAs (Single Page Application). Some examples of different but similar JavaScript Libraries and frameworks include AngularJS, Ember.js and Vue.js but there are many more. All of these are used to create complete web applications using JavaScript. In summary React creates a Virtual DOM in memory so your application can track what changes have been made and update and change only what needs to be changed.

What problems does React solve?

Before the advent of SPAs web applications relied heavy on server-side operations. A client would request HTML pages with the associated CSS and JavaScript files from a webserver, and the page would be rendered client side for the user to interact with. In this system for every new URL that is loaded, the request and rendering process starts again. In this model the essential processes are done by the server where the client simply renders the pages.

With the advent of modern SPA solutions, the distribution of processes shifted from the mainly server-side approach. SPAs are folders and files of Java script that create a whole application. The JavaScript application is delivered to the client when the client sends a request to your URL, and the SPA then takes over rendering in the browser, this allows developers to create more dynamic and reactive frontends for users to interact with, without the heavy reliance on server-side operations.

Setting up the development environment

Node.js & NPM

Node.js is a JavaScript runtime that enables you to run JavaScript outside of the browser. We also need to install Node package manager (NPM) both Node.js manage libraries or node packages that we are going to use in our React development.

Thankfully Node.js automatically installs NPM so you only need to download Node.js. Go to nodejs.org and install the latest stable build for your specific operating system.

Visual Studio Code ~ Append Section-Library

Visual studio code is the code editor we will do our React development in, it is possible to use other code editors however given the ubiquity and ease of use we are going to use Visual Studio code for this tutorial, but feel free to use another code editor if you see fit.

To install Visual Studio Code go to code.visualstudio.com and install the latest stable build for your specific operating system.

Checking Node & NPM Version

It is important to check the version of Node.js and NPM you installed. This will help you ensure that the installation process was successful.

It is not necessary that your version numbers are identical to the versions I have listed, having the version number will help you trouble shoot potential issues you might encounter in the installation process.

Terminal/Command Line

node --version
v16.13.2
npm --version
8.1.2

Creating the React application

Ok now we can start getting our hands dirty and start building our first React app! It is important to note that this is a not the only way to build a React app. The toolchain that you choose to build your react interface varies depending on your applications required outcome. We are going to build a simple single page application using create React app.

Frist create a folder where we can organize our React applications. The next step is to open your terminal and navigate to your newly created project folder. (I created a folder on my C-drive titled react)

Navigate to React application folder

cd C:\\react

We are going to use a toolchain or starter kit configuration npx create-react-app this will give us a jumping off point template project so we can focus on the actual development process of a React application. My in this example my application titled blank-canvas.

Bootstrap your Frist React application template

npx create-react-app blank-canvas

Navigate to our project in VSCode

Now we can open our newly created project in Visual Studio Code to get a bird’s eye view of our application.

Once the application is finished its creation process simply enter the command code . into the terminal to open the project in Visual Studio Code.

code .

Once we have our project open in Visual Studio Code, we can run the application to ensure that it is working and then explore the file structure.

NPM scripts

Press CTRL+SHIFT+` to open a terminal in Visual Studio Code and then enter the command npm start this will run the application in http://localhost:3000/.

To close the application in the terminal enter CTRL+C and enter Y confirm that you want to terminate the batch job.

One last script we will try out before refactoring our application is npm test this will run test scripts in our React app. Then enter A to run all tests and once the test has completed CTRL+C to exit out of the tests.

Scripts

#Starts react the React application @ http://localhost:3000/
npm start
#Runs the test scripts
npm test

Setup overview video

This video is an overview of the process of checking your node and npm versions, creating the react app, opening the app visual studio code and starting your application using npm scripts.

Creating a react element

Open src/Index.js & and alter it to looks like

import React from 'react';
import ReactDOM from 'react-dom'; 
import './index.css';   
ReactDOM.render(
   React.createElement(   
   "h1",   
   {style: {color: "red"}},   
   "Your Blank Canvas 🎨"   
),   
document.getElementById('root') 
);

lets breakdown ReactDOM.render to get a better understanding of how it works.

Our first argument that we send to ReactDOM.render is what we want to create so React.createElement(“h1”,{color “red”}},”Your Blank Canvas 🎨”),

The second argument that we send is where we want to inject this React code into our src/public/index.html so for our example <div id=”root”></div>

We are using the react library to create an element. So we are using JavaScript to create HTML elements to create our DOM on the page.

The Second argument in the React.createElement function is where we can add properties to our element in this example we are adding a style property to make elements text red.

JSX

JSX (JavaScript as XML) allows us to write tags directly in JavaScript. Lets render a list as a demonstration. Refactor the ReactDOM.renderso it looks like the example below.

ReactDOM.render(
<ul>
  <li>Take Out Garbage</li>
  <li>Study</li>
  <li>Exercise</li>
</ul>,
  document.getElementById('root')
);

It is important to note that the JSX syntax does not run in the browser natively. The reason that this is working for us is because babel is a tool that is running behind the scenes.

Components

in essence like a building block. component is like a piece of the UI that is used to describe one part of our application.

A typical React app is made up of multiple independent reusable components that are combined to create multifeatured user interfaces. Every react application contains at least one component, this component contains the entire application, this component then contains child components, this is a tree structure.

Lets import the app into our index file

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App" // Don't forget to import!
ReactDOM.render(
  <App />, // Replace the jsx with our App.js component
  document.getElementById('root')
);

Lets refactor the app component that was created for us

import './App.css';
function App() {
  return (
    <div className="App">
      <h1>Header</h1>
      <h2>Title</h2>
      <h3>SubTitle</h3>
    </div>
  );
}
export default App;

Lets make some new components now! Just think of a component a a function that returns UI.

import React from 'react';
import './App.css';
function Header() {
  return (
    <header>
      <h1> This is Your Website</h1>
    </header>
  );
}
function App() {
  return (
    <div className='App'>
      <Header />
			<h2>Title</h2>
      <h3>SubTitle</h3>
    </div>
  );
}
export default App;

Ok lets try making components for Main and footer

import React from 'react';
import './App.css';
function Header() {
  return (
    <header>
      <h1> This is Your Website</h1>
    </header>
  );
}
function Main() {
  return (
    <section>
      <p>What will you make?</p>
    </section>
  );
}
function Footer() {
    return (
      <footer> 👩🏽‍💻 </footer>
    );
}
function App() {
  return (
    <div className='App'>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}
export default App;

Breaking it down React components create React Elements through the render(){} Method. This is the way that react creates a virtual representation of the DOM, and this is the core problem that react solves.

React creates a dynamic representation of the DOM. As the user interacts with the virtual DOM and changes the state of a component the React application creates a new react element and react compares the new element and that element’s children with the previous element. React handles state changes to the virtual DOM and updates then Real DOM.

Displaying dynamic data with components

Every react components can access a object called props, The props object hold all of the different property’s for component. We are going to pass props into our header component. We can add a JSX expression {props.name} in place of our hardcoded name.

function Header(props) {
  return (
    <header>
      <h1> This is {props.name} Website</h1>
    </header>
  );
}

To add values to the component we need to ad values where the component is being rendered in our app. Now we can see that our name is displayed as Sam’s.

function App() {
  return (
    <div className='App'>
      <Header name="Sam's"/>
      <Main />
      <Footer />
    </div>
  );
}

Now Lets display the year created to the footer component

function Footer(props) {
    return (
      <footer>
        <p>Site created {props.year}</p>
      </footer>
    );
}
function App() {
  return (
    <div className='App'>
      <Header name="Sam's"/>
      <Main />
      <Footer year={new Date().getFullYear()} />
    </div>
  );
}

We can think of props as a bag to hold information for each component. When we render the components we pass the properties into the component. we are able to display using the JSX {props.} notation.

Displaying lists

Lets add a to do list to the Main component of our website.

function Main(props) {
  return (
    <section>
      <p>What will you make?</p>
      <ul>
        {props.todo.map((todo) => 
        <li>{todo}</li>
        )}
      </ul>
    </section>
  );
}
function App() {
  return (
    <div className='App'>
      <Header name="Sam's"/>
      <Main todo={todo}/>
      <Footer year={new Date().getFullYear()} />
    </div>
  );
}

Lets Add inline CSS to our Component to clean up our formatting. We could also add the CSS to our src/App.css if you prefer.

function Main(props) {
  return (
    <section>
      <p>What will you make?</p>
      <ul style={{ textAlign: "left"}}>
        {props.todo.map((todo) => 
        <li>{todo}</li>
        )}
      </ul>
    </section>
  );
}

This code works we are able to render a list dynamically however we do have a issue with keys in our console “Each child in a list should have a unique ‘key’ prop. Lets write a transformation function to turn our list items into object that also contains the keys for every item. Keys help us keep our application in sync as our application changes.

function Main(props) {
  return (
    <section>
      <p>What will you make?</p>
      <ul style={{ textAlign: "left"}}>
        {props.todolist.map((todo) => 
        <li key={todo.id}>{todo.title}</li>
        )}
      </ul>
    </section>
  );
}
const todoObjects = todo.map((todo, i) => ({id: i, title: todo}));
function App() {
  return (
    <div className='App'>
      <Header name="Sam's"/>
      <Main todolist={todoObjects}/>
      <Footer year={new Date().getFullYear()} />
    </div>
  );
}

Adding images

Lets place a Image local image in our header component that we have stored locally. lets start simply placing the image in our src folder then importing it.

import statue from "./statue.jpg";

Now lets place the image in our header. and give it a height value so it is displayed at a reasonable size.

function Header(props) {
  return (
    <header>
      <h1> This is {props.name} Website</h1>
      <img src={statue} height={300} />
    </header>
  );
}

We can also replace the image with a URL lets make a call to the GitHub API so we can display our Github profile picture.

function Header(props) {
  return (
    <header>
      <h1> This is {props.name} Website</h1>
      <img src={"<https://github.com/calzar1001.png>"} height={300}  />
    </header>
  );
}

Finally lets add an alt prop to make the images on our website accessible to using assistive technology’s.

function Header(props) {
  return (
    <header>
      <h1> This is {props.name} Website</h1>
      <img src={statue} height={300} alt="Black and white photo of a concrete statue in a park" />
    </header>
  );
}

Conclusion

Now we a have a basic understanding of what React is and how we can setup our own toolchain for simple SPA development. In the next tutorial we are going demonstrate our knowledge by taking the skills we learned in this introduction to develop a more feature rich application.