What is React? Why Learn It?
When selecting which framework or library you want to learn, pay attention to its reviews, longevity, future, hiring demand, and how it is being supported. Angular was created and is being supported by Google. React was created and is being supported by Facebook (it was open sourced in 2013). Vue was created by Evan You (an ex-Google employee) and is being supported by an open source community.
More About React
For a quick targeted introduction, skim the
React pages from W3Schools, but you
can skip certain topics...
- We will not set up a React IDE using Node.js and NPM (Node Package Manager). We can just continue to use our current IDE and include useReact CDNs in our HTML pages (even though this is not as efficient as pre-compiling React code). Whenever you sample code with import statements, learn how transform that into what we need using CDNs.
- Our example React code will not use JS ES6 classes (and life cycle methods) even though there is plenty of React sample code on the net that does use this. Instead, we will use a newer (cleaner) approach called "hooks".
- You can stop (reading about React from W3Schools) around where it talks about React Components (just a function that returns HTML code) and Props (just input parameters to Components).
- Then review definitions from React's official Web Site. You can stop around where it defines React Elements, Components, and Props. I believe that the qualify of React's documentation contributed to React's popularity (that, and its good code reuse and speed of execution). However, their current document still includes older (and more confusing) techniques that use "classes" and life cycle methods whereas my sample code only uses the newer/cleaner "hooks" approach. You can search for "hooks" on their documentation to see some sample code on that (or just look at my sample code).
My React Tutorial
Click here for my
React Tutorial (pdf) and
here for the associated React Sample Code.
Because React sample code uses the latest JS features, my React Tutorial (and
- Fat Arrow Functions (IMPORTANT for React)
- Destructuring (objects and arrays - IMPORTANT for React)
- Binding and Back Tick (allows you to specify multi-lined HTML Strings and accomplish templating by injecting variable values using binding).
- You can skip over my coverage of JS ES6 classes and inheritance, because the new React examples use "Hooks" instead of classes.
examples (JS built-in list processing methods and the benefits of
having "immutable" variables/objects):
- For Each: iterate over each element in an array (IMPORTANT for React).
- Filter: create new array that is a subset (based on filter criteria) of another array.
- Map: create a new array where each element is some transformation of the elements in an original array (IMPORTANT for React).
- Sort: rearrange the elements in an array (usually in a copy of the first array). We already used the JS sort in the click sortable HTML table homework. We passed the sort function an extensive comparison function that checked the type of the value and converted to that type so the comparison would be correct.
- Reduce: quick way to specify common design patterns like summing up all the elements of an array into a single total or concatenating all elements of an array into a single String variable.
Click here if you want to learn more about functional programming from James Sinclair. This tutorial starts out simple, gives lots of examples and explanations, then continues past list processing into more advanced topics such as higher order functions (functions that make other functions).
Dig Into React
After learning React "pre-req" concepts (new ES6 JS features, JS functional programming),
you are ready to study the rest of
My React Tutorial and its
Associated Sample Code
which includes the following concepts (numbers tie to the code examples in the zip file):
- tie 03: React Components (functions that return React elements) with and without ES6 "fat arrow" functions.
- 04: Sending input parameters (called "props") to React Components - with and without destructuring.
- 05: Nested components and components generated using map functions from a list of data.
- 06-07-08: examples getting input data from the user (using "hooks" not classes and life cycle metods), making ajax calls, showing validation error messages to the user.
- Click here for a project that demonstrates Simple Navigation using React (does not use routing).
- Click here for a React project that demonstrates Display Data functionality (with no server side code - it converts JSON to a plain HTML table, not click sortable, no search filter).
- Click here for a React project that demonstrates Insert (includes server side database access code and server side validation).
React Development Environment
- If you find that you like React and really want to get into it (e.g., over the summer), I recommend that you follow the instructions on many sites (like React official web site or w3schools) to download and install node.js along with NPM package manager. There's a little learning curve to this, but many other coders do this so you should be able to do it too.