The Complete Beginner’s Guide to
React
By Kristen Dyrr
Software Engineer and Web Developer
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from
zero to Full-Stack engineer.
© Zenva Pty Ltd 2018. All rights reserved
,Table of Contents
Chapter 1: Beginner’s Guide to React.js, With Examples
Download the source code
Learn React online
Tutorial requirements
Downloading React and getting started
Why React is better with JSX
Understanding React components
React component states
How to use props
Organizing your interface
Chapter 2: Form Validation Tutorial with React.JS
Download the source code
Tutorial requirements
Getting started with the tutorial
Setting up for form submission
Creating abstract form elements
Creating input fields
Chapter 3: How to Submit Forms and Save Data with React.js and Node.js
Download the tutorial files
Tutorial requirements
Making revisions to a React user interface
Displaying new data from everyone
Submitting form data
Emptying fields on form submission
Saving data to the server
Chapter 4 Creating a Crossword Puzzle game with React.JS
Download the source code
Tutorial requirements
Intro to JSFiddle
Downloading React
Defining Components
Rendering Components
Populating Props
Populating Properties in the Game
Composing Components
Events
Forms
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from
zero to Full-Stack engineer.
© Zenva Pty Ltd 2018. All rights reserved
,Chapter 1: Beginner’s Guide to React.js, With
Examples
React.js is a JavaScript library that was created by Facebook. It is often thought of as the “view”
in a model-view-controller (MVC) user interface. This makes sense when you consider the fact
that the only function that must be implemented in React is the “render” function. The render
function provides the output that the user sees (the “view”).
Let’s take a look at why you may want to use React and how to set up a basic interface.
Download the source code
You can download all of the files associated with this tutorial from here.
Learn React online
If you are keen to learn React from the ground-up feel free to check Learn and Understand
React JS on Zenva Academy which covers all the basics + lots of bonus topics like React
Router and Flux.
Tutorial requirements
● This tutorial assumes that you have at least a beginner’s grasp of HTML and JavaScript.
● You will need to download the React library if you want to go beyond the testing phase.
We show you how to get around this during testing.
● You will need a text editor of some sort. Notepad++ is popular for those on Windows
machines, and TextMate is popular on a Mac. Editors that highlight code are preferable.
● Normally, you would incorporate React into a larger application. If you want to test the
basic code with external data files at the end of the tutorial, you will need to use a local
or remote web server to get the page to work. MAMP is popular on Mac, and WAMP is
most common on Windows machines. You can also use a lightweight Mongoose web
server, or Python’s HTTP server. Many people use React with Node.js, so you can also
use a Node.js server. The React library download page (above) also includes a server
and other options.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from
zero to Full-Stack engineer.
© Zenva Pty Ltd 2018. All rights reserved
, Downloading React and getting started
There are many options for downloading and installing React and its various add-ons, but the
fastest way to get started and begin playing around with React is to simply serve the JavaScript
files directly from the CDN (as described on the React GitHub page… the most common CDN
options are listed there):
Both the download pages go into detail on the various ways to download, install, and serve
React in various formats, but we’re going to stick with this most basic option so we can focus on
learning how to code with the React library itself. It’s a good idea to have the React API open
while you work for reference.
From there, we create an index.html file, and a main.js file. I’ve also included a css file for basic
styling:
In order to get around using a server while testing, I’m calling the React.js, react-dom.js, and the
browser.min.js babel-core files from the CDN. You wouldn’t want to do this in production. The
babel-core file allows us to use JSX, and the script type must be “text/babel” in order for it to
work properly. Our main JavaScript code goes in main.js, and that’s where it all starts.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from
zero to Full-Stack engineer.
© Zenva Pty Ltd 2018. All rights reserved
React
By Kristen Dyrr
Software Engineer and Web Developer
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from
zero to Full-Stack engineer.
© Zenva Pty Ltd 2018. All rights reserved
,Table of Contents
Chapter 1: Beginner’s Guide to React.js, With Examples
Download the source code
Learn React online
Tutorial requirements
Downloading React and getting started
Why React is better with JSX
Understanding React components
React component states
How to use props
Organizing your interface
Chapter 2: Form Validation Tutorial with React.JS
Download the source code
Tutorial requirements
Getting started with the tutorial
Setting up for form submission
Creating abstract form elements
Creating input fields
Chapter 3: How to Submit Forms and Save Data with React.js and Node.js
Download the tutorial files
Tutorial requirements
Making revisions to a React user interface
Displaying new data from everyone
Submitting form data
Emptying fields on form submission
Saving data to the server
Chapter 4 Creating a Crossword Puzzle game with React.JS
Download the source code
Tutorial requirements
Intro to JSFiddle
Downloading React
Defining Components
Rendering Components
Populating Props
Populating Properties in the Game
Composing Components
Events
Forms
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from
zero to Full-Stack engineer.
© Zenva Pty Ltd 2018. All rights reserved
,Chapter 1: Beginner’s Guide to React.js, With
Examples
React.js is a JavaScript library that was created by Facebook. It is often thought of as the “view”
in a model-view-controller (MVC) user interface. This makes sense when you consider the fact
that the only function that must be implemented in React is the “render” function. The render
function provides the output that the user sees (the “view”).
Let’s take a look at why you may want to use React and how to set up a basic interface.
Download the source code
You can download all of the files associated with this tutorial from here.
Learn React online
If you are keen to learn React from the ground-up feel free to check Learn and Understand
React JS on Zenva Academy which covers all the basics + lots of bonus topics like React
Router and Flux.
Tutorial requirements
● This tutorial assumes that you have at least a beginner’s grasp of HTML and JavaScript.
● You will need to download the React library if you want to go beyond the testing phase.
We show you how to get around this during testing.
● You will need a text editor of some sort. Notepad++ is popular for those on Windows
machines, and TextMate is popular on a Mac. Editors that highlight code are preferable.
● Normally, you would incorporate React into a larger application. If you want to test the
basic code with external data files at the end of the tutorial, you will need to use a local
or remote web server to get the page to work. MAMP is popular on Mac, and WAMP is
most common on Windows machines. You can also use a lightweight Mongoose web
server, or Python’s HTTP server. Many people use React with Node.js, so you can also
use a Node.js server. The React library download page (above) also includes a server
and other options.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from
zero to Full-Stack engineer.
© Zenva Pty Ltd 2018. All rights reserved
, Downloading React and getting started
There are many options for downloading and installing React and its various add-ons, but the
fastest way to get started and begin playing around with React is to simply serve the JavaScript
files directly from the CDN (as described on the React GitHub page… the most common CDN
options are listed there):
Both the download pages go into detail on the various ways to download, install, and serve
React in various formats, but we’re going to stick with this most basic option so we can focus on
learning how to code with the React library itself. It’s a good idea to have the React API open
while you work for reference.
From there, we create an index.html file, and a main.js file. I’ve also included a css file for basic
styling:
In order to get around using a server while testing, I’m calling the React.js, react-dom.js, and the
browser.min.js babel-core files from the CDN. You wouldn’t want to do this in production. The
babel-core file allows us to use JSX, and the script type must be “text/babel” in order for it to
work properly. Our main JavaScript code goes in main.js, and that’s where it all starts.
This book is brought to you by Zenva - Enroll in our Full-Stack Web Development Mini-Degree to go from
zero to Full-Stack engineer.
© Zenva Pty Ltd 2018. All rights reserved
