Scribd
Upload
7 views

Intro to React

This document serves as an introduction to React, outlining prerequisites such as JavaScript and detailing what learners will gain, including understanding React's purpose and JSX syntax. It covers the history, popularity, and installation of React, as well as basic project setup and best practices for file structure. Additionally, it provides practical exercises for creating components and debugging common errors in React projects.

Uploaded by

carolina.e.klein
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

Intro to React

This document serves as an introduction to React, outlining prerequisites such as JavaScript and detailing what learners will gain, including understanding React's purpose and JSX syntax. It covers the history, popularity, and installation of React, as well as basic project setup and best practices for file structure. Additionally, it provides practical exercises for creating components and debugging common errors in React projects.

Uploaded by

carolina.e.klein
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 32

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?

You might also like