Intro to React
Prerequisites
● JavaScript
What you will learn
● I will be able to explain the purpose and
popularity of React.
● I will be able to identify React JSX syntax
patterns.
● I will be able to incorporate React into a project
and display data using React components.
What is React?
React
● Developed by Facebook
● First appeared on Facebook in 2014 and later on Instagram in 2015.
● A Javascript library for creating user interfaces -- WHAT DOES THAT
MEAN?
● The 'V' in 'MVC' -- HUH?
● Component-based -- OH MY GOD
Who is using React?
Why is React so popular?
TL;DR:
● It’s faster (Virtual
DOM)
● It’s modular
● It’s written in JSX
(a
JavaScript/HTML
hybrid)
Ok, I’m sold! So how do I use it in a project?
● We will be building some
sample apps using React in
class, but you should read
the documentation on React,
it’s GREAT!
● https://reactjs.org/
● Before we get started, let’s
make sure we have all of the
software that we need to use
React on our computers
React at its minimalist
https://repl.it/@ErnieAtWyncode/SimpleReactDemo
Install node.js (you should have this already) -- WHAT IS NODE?
Install yarn (you probably have this already)
$ npm install -g yarn
What is yarn?
yarn vs. npm
Don’t use both!
Install React Developer Tools
Real life dev opinion of React dev tools
React Dev Tools - Try it!
Creating your first React project
yarn create react-app my-shows
cd my-shows
code .
yarn start
Woahhh. We just made a whole app with 4 Terminal commands! Let’s take
a moment to see what our app looks like and inspect our project in VS
Code. What do you notice?
Basic React JS Directory Structure
Basic React JS File Structure -- index.html
● This is the index.html
file generated for us by
React JS. What do you
notice?
Basic React JS File Structure -- index.js
This is the index.js file generated for us by React
JS. What do you notice?
Basic React JS File Structure -- App.js
● Here is the App.js
file generated for
us by React JS.
What do you
notice?
Introducing JSX
Here is an example of JSX, the JavaScript syntax extension we will use to write
React. Look closely -- what’s happening here? Explain it in your own words.
JSX Sorcery Breakdown
https://gitpitch.com/wyncode/gitpitch_template/master?grs=
github&t=template&p=w4-react&n=#/7
React Class Component Written in JSX
This is a simple class component written in React JS. What are some common
errors you think new React users might make?
React Stateless Functional Component Written in JSX
How is this syntax different from the JSX in the previous
slide? How is it similar?
Functional Component with React Hooks Written in JSX
How is this syntax different from the JSX in the previous
slide? How is it similar?
Best Practice
● It is a standard convention in
React world to store all of your
components in a “Components”
directory, inside of your src
directory
● Create a “Components” directory,
and move App.js into your
Components directory
● People have strong opinions
about whether or not your
components should be capitalized
OH MY GOD EVERYTHING BROKE I GIVE UP
Take a deep breath. This is your first “Failed to
compile” error. You will see millions. Read your error
message! What is it telling you? How can we fix it?
index.js
OH MY GOD I HAVE ANOTHER ERROR WHAT IS HAPPENING
We have received a different error message!
Success! Which file should we also move to the
Components directory?
Last Error Message (for now)
Our pretty little animated React icon is lost! We’re not going
to move it because, since it’s a static image file, it shouldn’t
live in our src directory (why?). Let’s update the file path
instead. Where should we go to do that?
OH BOY EVERYTHING IS WORKING AGAIN
Now You Try
● cd back into your wyncode directory
● Follow the steps outlined in this slide deck to create a new project called my-
shows (you don’t need to re-install node or yarn)
● Make sure your file structure follows best practices outlined in this slide deck
● In your App.js file, you will see the parent <div className="App">
element (this is important!). Leave that.
● Erase the contents of the div (the <header> element and everything inside of
it) in App.js
● Instead, inside of your parent <div>, write a <p> tag that says hello world
● What questions do you have? What errors did you make? How did you debug
them?
● Help a friend :)
Now You Try (Part 2)
● Create a new file app/components/Shows.js
● (HUH?)
● Within Shows.js, create an array of strings of five of your
favorite TV shows
● Within Shows.js, create an ARROW FUNCTION (WHY?)
that will map through an array and display each element of
the array (HOW IN JSX?)
● Which kind of component is this? Why are we doing this?
● Add export default Shows; at the bottom
(BUHHHHH)
Our code in glitch format
https://glitch.com/edit/#!/wyncode-react-sandbox
How is our glitch sandbox environment different from
our React project in VS Code?
Check For Understanding
● What is the purpose of React? Why is it so
popular?
● What is JSX? What are some important things I
should know about using JSX in a React
project?
● How do I incorporate React into a project?
