React Crash Course

About this React course

Welcome the my React Crash Course.
In this course you will learn all the basics of React JS witch will set you up with the necessary knowledge to get starting creating applications using the React Framework.

This course has two parts:

theoretical part (definitions, explanations and resources ).
practical part ( build a work out planer web application using React and React Router).

What will you learn in this course

In this course you will learn:

What React is and why learn a JavaScript Framework.
How React works
What is a single-page application aka (SPA)
What are React components.
What are React Hooks and how to use them.
How to installing and run React.
How to Create & Build a React Application.

Is there any prior knowledge required for learning React?

Before you start learning React you should have a good knowledge of HTML, medium knowledge CSS, just because you can also use CSS frameworks like Tailwind CSS or Bootstrap witch we will also use in the project. But most importantly, is to have a basic knowledge of ES6 JavaScript and most array methods.

Also you need to have the latest versions of Node.js and npm installed in order for React to work. If you don’t have them then pls follow my tutorials on How to install and run NodeJS with NPM on Windows and Mac.

Who is this course for?

If you asking your self if this course is for you then just ask yourself the following questions:

Do you want to expand you knowledge base from vanilla web development technologies like HTML CSS and JS to more powerful ones.
Are you looking for a JavaScript Framework but you don’t know witch is the right one?
Are you curious about what a JavaScript Framework is, how it work and why they are useful?
Is the React Framework a popular or in demand technologies in your area?

If you can answer one or more from the above questions with YES, then this course is for you so lets get started with the course.

What is React

Def: React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components

React is commonly known as a framework, and there is nothing wrong with it if you call it one. Aldo it dose not come upon installation with all the features that Angular JS comes with, for example the routing system and many more, this are later on easily installed using npm package manager.

But more on this later on when we will create our application.

Here a simple way to understand what react actually dose.

By using the React library you can easily create interactive single-page application with the help of stateful components.

Why learn React

Why you should learn ReactJS? Why not Angular or Vuejs. And personally I would recommend to learn a bit of all of them, just for comparison reason and understanding other people point of view.

But you need to focus most of your energy on just one.

Witch brings me to my number one reason for learning React.

Demand

Looking for a job or just want to freelance, it doesn’t mater.
My number #1 recommendation for learning anything is to ask the question. Dose anyone need what you know, or the skills that you have?
Look around in your regional job marked or of the place you want to move to and search for job requirys, if it is React then learn React, if it is something else, then learn something else.

There is nothing harder to sell then something that nobody is looking for to buy.

Popularity

React is the most popular JavaScript framework on the market along side to Angular and VueJS.

Popularity not only means high demand but also excellent documentation and support from the community.

In other works if you have a problem someone else also had that problem and probably found the solution to it, so just google it.

Time = Money

React saves you time and money on development because it’s component-based. You can break down an interface into reusable components that allow you to build dynamic user interfaces. This taps into the current thinking behind ‘Design Systems’.

I hope that by now, I convinced you that React at least deservers to be given a chance!

How React works

As I mentioned before, we use React to build single-page applications aka (SPA), so first lets understand what a SPA is.

What is a SPA

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

React language JSX

In react we write a combined language called JSX. But JSX is optional and not required to use React.

Also Browser can not read the JSX language, this is why it is then complied in to regular JavaScript using a compiler like Babel.

In JSX you can use regular HTML tags, inline style, and JavaScript with some small differences, but more on this in the project.

What are React components

Components in React, are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components, in this Course we will only use on Function components with hooks.

For me personally classes are extremely of putting due to there reference to the “this” keyword.

Components can refer to other components in their output.

Components use props to send data up and down the application.

Don’t worry for now about components, you will have a more deeper understanding abut components and props as soon as we start the project.

What are React Hooks and how to use them.

React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side-effects. React provides a bunch of standard in-built hooks like

useState : To manage states. Returns a stateful value and an updater function to update it.
useEffect : To manage side-effects like API calls, subscriptions, timers, mutations, and more.

There are many more hooks, but this two are the most often used and the rest of them are outside of the scope of this Crash Course.

Useful resources:

React-Crash-Course-Post Download

Project – Workout planner Web App

This project is just a small portion of a more large project from my React Course for beginners, where I take you from HTML CSS and JS to react. This react crash course will take to the next level

Resources:

App.cssDownload

homeImgDownload

1. How to installing and run React.

Create a new react application by using:
npx create-react-app app-name

Change directory in to your application in order to have access to the node modules and scripts:
cd app-name

Start your application in production mode on local host using:
npm start

2. The React File and Folder structure explained

node_modules
public
src … clean up
files
css file will be downloaded later on

3. Writing JSX code

create jsx syntxt with classes for the main div container
create navigation and Home html

4. Images in React

5. Using CSS and Bootstrap CSS framework in React

inline css
style using variables
CSS file
Bootstrap CSS with classes on home

6. Creating components and props in React

create title component and move code to title comp adding props
create home component and move code to home ( home compo will be later on moved to routs)
create button component

7. React icons

go to react-icons
instal React icons using npm install react-icons --save (mai require restart)
use icons for the navigation

8. React Hook – useState

What is a Hook? A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components. We’ll learn other Hooks later.
useState returns a pair of values: the current state and a function that updates it. This is why we write const [workoutTime, setWorkoutTime] = useState(0);.

9. React Hook – useEffect

The Effect Hook lets you perform side effects in function components:
workoutDifficulty

10. React Router – Client Side Routing

React routing in a nutshell
- React Router enables “client side routing”. In traditional websites, the browser requests a document from a web server, downloads and evaluates CSS and JavaScript assets, and renders the HTML sent from the server. When the user clicks a link, it starts the process all over again for a new page.
- With React Router the Client side routing allows your app to update the URL from a link click without making another request for another document from the server. Instead, your app can immediately render some new UI and make data requests with fetch to update the page with new information.
Install npm install react-router-dom ( look in your package.json for “react-router-dom”: “^6.3.0”, latest)
index.js
- import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
- create routes folder and move home.js to it
- create No path found for the routing system
App.js
- import { NavLink, Outlet } from "react-router-dom";
- convert nav li to NavLinks and add Outlet

11. Create Routes

in /routs create file Workout.js, import { NavLink, Outlet } from "react-router-dom";
create folder training days
create components for
- Workout
  - WorkoutDropdown
- WorkoutDay
- WorkoutTypeCard
  - Generate unique Id’s for each workout
  - useState() to
    - add a new workout
    - remover a specific workout

12. Build the React Application

npm run build

13. Deploy React Application using Node.js and Express

create new file script.js in the main app folder
create script
- const path = require("path"); const app = express(); app.use(express.static(path.join(__dirname, "build"))); app.get("/", function (req, res) { res.sendFile(path.join(__dirname, "build", "index.html")); }); app.listen(9000);
start your node server using the terminal node server this is targeting your newly created server.js file

For more information check out the video tutorial on YouTube.

Watch the full tutorial on YouTube and get step by step excellent education information about this project.

Coming out on Monday !

Source Code & GitHub Repository

Link – https://github.com/NorbertBM/react-crash-course-2022-with-workout-app-project

Want to become a web developer ?

Get complete web development courses on HTML, CSS , JavaScript, Bootstrap, Visual Studio Code, Responsive design and much more…

Web Development Courses

Love Podcast about web development?

Podcast