Intro to React.js

RISD X ACM Outreach Hackathon: WS 2

We’ll get started at 5:15 :)

​

Table of contents

01

04

02

03

Why React.js?

What is React.js

Code Environment Set Up

React.js Demo

What is React?

• More specifically, it’s a javascript library that allows web developers to build reusable “components”

In short– a UI library that allows us to create front end pages!

• Facebook
• Instagram
• Netflix
• Uber
• And many more!

Some companies that utilize React.js for their front end:

Why React?

As a web developer, you’ll see a lot of companies seeking out those with experience in React principles.

• Highly sought after skill in the job market
• Versatility in other supporting libraries (Next.js, React Native, and many more)
• Ease of Use
• Combination of HTML/JS (.jsx)

Let’s get started.

Code Environment Set Up

Go to codesandbox.com

• Once you create an account and sign in create a “+Sandbox”
• Press the React button to create your project! (Javascript, not Typescript!!)

Code Environment Set Up

Code Environment Tour!

• File Directory (left hand bar)
• Terminal (bottom middle)
• Page Render (right hand bar)
• Coding environment (middle)
• Navigation bar + Project Title (top)
• Additional Resources (far left hand bar)

Let’s get started.

Code Environment Set Up

File Directory Breakdown

• Public
• Source (Src)
• App.js !!!!!
• App.css
• Main.js
• Index.html
• index.js
• Package-lock.json
• Package.json
• README.md

Pro-Tip (pay attention to the extensions of each file! This will tell you the language of that file. You will mainly be coding in .jsx files)

Code Environment Set Up

Let’s build our first components together!

• Create an Employee component
• Invoke the component onto the App.jsx to render the component

​

Adding logic to our code:

​

• Make a console message (this is useful when debugging!)
• Ternary Operations (if true → show)

Some things that may be on your mind:

Why is the page ugly?

React allows us the create a general map of what our application is going to look like. Think: a blueprint for the final product

​

You’ll start getting into making things pretty once we go over CSS libraries like TailwindCSS (tomorrow!)

​

Note:

Stackblitz is a good coding environment for more elementary projects– for this weekend you may be interested in setting up React (downloading it) on your laptop for ease of use!

​

There will be volunteers there to help you with this :)

Code Environment Set Up

Let’s make properties for our Employee component together!

• Pass in “props” as an argument to our Employee component
• Assign a name to our employee
• More ternary operators!

Code Environment Set Up

Let’s utilize “usestate” together!

Note: props are not meant to change. We can get over this hurdle with a function called usestate!

• Usestate syntax
• Import usestate

​

Questions/ Comments/Concerns?

What is a pitch deck?

A pitch deck is a short presentation that entrepreneurs use to describe their business and present it to potential investors. It usually consists of about 10 slides that provide:

​

• An overview of the company's mission, product and service
• Market opportunity
• Team, financials, etc.

​

The goal is to garner enough interest from investors so that they are motivated to invest in the business

Main ideas of a pitch deck

Presentation

Value

A great presentation for a pitch deck should be concise, clear and easy to understand. Visual elements such as charts, graphs, images, and videos can help to make the presentation engaging

When it comes to picking investors for a pitch deck, it's important to research potential investors and understand their preferences, goals and interests

The value of a product is determined by how much customers are willing to pay for it. It's a combination of factors, including the quality of the product, its features, and how well it meets customer needs

Investors

Six recommendations

Structure your pitch deck clearly and make sure all the important points are easy to understand

Incorporate visuals or graphics to illustrate your message and keep the audience engaged

Include impactful stories, statistics, or facts that will help your audience remember your message afterwards

Practice presenting your deck beforehand with friends or colleagues for feedback, then use this input to refine it further

Keep it simple

Use visuals

Keep it short

A good pitch deck should be concise and clear; avoid trying to cram in too much information

A pitch deck is an overview of your business; focus on key points that get the most important ideas across

Make it memorable

Test & iterate

Main points

9h 55m 23s

333,000

386,000 km

Estimated delivery time per unit

Users bought our product

Avg. distance travelled by logistics team

4,498,300,000

Number of users analyzed in our market research

Revenue by quarter

Q4

Q3

Q2

Q1

October - December

July - September

April - June

January - March

40%

24%

20%

16%

Follow the link in the graph to modify its data and then paste the new one here. For more info, click here

Competition comparison

Product infographic

Visuals

Price

Availability

Features

Users

Updates

Showcase the design of your product

Share the cost and price with investors

When is the product expected to be ready?

What makes you product unique?

Speak about the target audience

Do you plan on updating it?

Timeline of your presentation

Provide a brief overview of the pitch deck's content

Engage the audience with a concise and compelling company introduction

Identify the target customer's pain points and challenges in a brief manner

Describe how your product or service can solve the problem

Highlight the unique value proposition and benefits of your solution

Analyze the target market size, growth potential, and competition briefly

Explain your financial needs and briefly outline your funding allocation

End with a clear and concise call to action

Organizational chart

John Doe

CEO

Jane Smith

Department Head

Mark Willson

Department Head

Steven Ander

Manager

Sarah Williams

Manager

Richard Taylor

Manager

Emma Miller

Manager

William Young

Employee

James Scott

Employee

Michelle García

Employee

Brian Clark

Employee

Alan Turner

Employee

Market size overview

$100M

$20M

$5M

Outer circle

Include the total size of the market, which represents the entire potential customer base for the product or service

Middle circle

Identify the target market for the product or service, which may be a subset of the total market. This could be based on factors such as demographics, geography, or specific needs

Inner circle

Indicate the current market size, which represents the portion of the target market that the company has successfully captured

Roadmap infographic

Old Hollywood Style Pitch

Deck

Here is where your presentation begins

Contents of this template

You can delete this slide when you’re done editing the presentation

For more info:�SLIDESGO | BLOG | FAQs

You can visit our sister projects:�FREEPIK | FLATICON | STORYSET | WEPIK | VIDEVO

Table of contents

01

04

02

05

03

06

Problem & solution

Introduction

Market opportunity

Product demo

Team & timeline

Financial & metrics

What is a pitch deck?

A pitch deck is a short presentation that entrepreneurs use to describe their business and present it to potential investors. It usually consists of about 10 slides that provide:

​

• An overview of the company's mission, product and service
• Market opportunity
• Team, financials, etc.

​

The goal is to garner enough interest from investors so that they are motivated to invest in the business

Introduction

01

Introduction

Our company

The introduction of your company in the pitch deck should include a brief overview of who you are and what you do. It should also include a brief description of why your product or service is unique and the value it provides to customers

The “our idea” part of a pitch deck should include an explanation of your product/service, how it works, and what the customer value is. You should also explain the market opportunity for your product/service

Our idea

Main ideas of a pitch deck

Presentation

Value

A great presentation for a pitch deck should be concise, clear and easy to understand. Visual elements such as charts, graphs, images, and videos can help to make the presentation engaging

When it comes to picking investors for a pitch deck, it's important to research potential investors and understand their preferences, goals and interests

The value of a product is determined by how much customers are willing to pay for it. It's a combination of factors, including the quality of the product, its features, and how well it meets customer needs

Investors

Key ideas in market opportunity

Analyze existing customer needs and identify gaps in the market to find new opportunities

Utilize technology and customer feedback to come up with novel solutions that meet your customer’s demands or needs

Innovative solutions

Research new markets

Monitor changes in the marketplace, such as shifts in consumer behavior or emerging technologies, to stay competitive and capitalize on new opportunities and trends

Identify times of year when demand for certain products may spike, such as holidays or special occasions, and use these times to target customers or maximize sales

Stay ahead of trends

Seasonal spikes

Six recommendations

Structure your pitch deck clearly and make sure all the important points are easy to understand

Incorporate visuals or graphics to illustrate your message and keep the audience engaged

Include impactful stories, statistics, or facts that will help your audience remember your message afterwards

Practice presenting your deck beforehand with friends or colleagues for feedback, then use this input to refine it further

Keep it simple

Use visuals

Keep it short

A good pitch deck should be concise and clear; avoid trying to cram in too much information

A pitch deck is an overview of your business; focus on key points that get the most important ideas across

Make it memorable

Test & iterate

Main points

9h 55m 23s

333,000

386,000 km

Estimated delivery time per unit

Users bought our product

Avg. distance travelled by logistics team

4,498,300,000

Number of users analyzed in our market research

Revenue by quarter

Q4

Q3

Q2

Q1

October - December

July - September

April - June

January - March

40%

24%

20%

16%

Follow the link in the graph to modify its data and then paste the new one here. For more info, click here

Competition comparison

Product infographic

Visuals

Price

Availability

Features

Users

Updates

Showcase the design of your product

Share the cost and price with investors

When is the product expected to be ready?

What makes you product unique?

Speak about the target audience

Do you plan on updating it?

Timeline of your presentation

Provide a brief overview of the pitch deck's content

Engage the audience with a concise and compelling company introduction

Identify the target customer's pain points and challenges in a brief manner

Describe how your product or service can solve the problem

Highlight the unique value proposition and benefits of your solution

Analyze the target market size, growth potential, and competition briefly

Explain your financial needs and briefly outline your funding allocation

End with a clear and concise call to action

Organizational chart

John Doe

CEO

Jane Smith

Department Head

Mark Willson

Department Head

Steven Ander

Manager

Sarah Williams

Manager

Richard Taylor

Manager

Emma Miller

Manager

William Young

Employee

James Scott

Employee

Michelle García

Employee

Brian Clark

Employee

Alan Turner

Employee

Market size overview

$100M

$20M

$5M

Outer circle

Include the total size of the market, which represents the entire potential customer base for the product or service

Middle circle

Identify the target market for the product or service, which may be a subset of the total market. This could be based on factors such as demographics, geography, or specific needs

Inner circle

Indicate the current market size, which represents the portion of the target market that the company has successfully captured

Roadmap infographic

KPI dashboard

$4,000,000

$100,000

$5,000

Revenue

General costs

Benefit

Follow the link in the graph to modify its data and then paste the new one here. For more info, click here

Thanks!

Do you have any questions?

youremail@freepik.com

+34 654 321 432

yourwebsite.com

Please keep this slide for attribution

​

CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik

Alternative resources

Here’s an assortment of alternative resources whose style fits the one of this template:

​

Vectors:

​

• Walk of fame star background
• Fantastic theater signs with decorative stars

Resources

Did you like the resources on this template? Get them for free at our other websites:

​

Vectors:

• Walk of fame star background
• Fantastic theater signs with decorative stars

​

Photos:

• Vintage movie camera with popcorn
• Movie clapper on red background with popcorn all around

​

​

Instructions for use

If you have a free account, in order to use this template, you must credit Slidesgo by keeping the Thanks slide. Please refer to the next slide to read the instructions for premium users.

As a Free user, you are allowed to:

• Modify this template.
• Use it for both personal and commercial projects.

You are not allowed to:

• Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content).
• Distribute Slidesgo Content unless it has been expressly authorized by Slidesgo.
• Include Slidesgo Content in an online or offline database or file.
• Offer Slidesgo templates (or modified versions of Slidesgo templates) for download.
• Acquire the copyright of Slidesgo Content.

​

​

​

​

For more information about editing slides, please read our FAQs or visit our blog:

https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school

Instructions for use (premium users)

As a Premium user, you can use this template without attributing Slidesgo or keeping the "Thanks" slide.

You are allowed to:

• Modify this template.
• Use it for both personal and commercial purposes.
• Hide or delete the “Thanks” slide and the mention to Slidesgo in the credits.
• Share this template in an editable format with people who are not part of your team.

You are not allowed to:

• Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template).
• Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in any other product or service that offers downloadable images, icons or presentations that may be subject to distribution or resale.
• Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this Template.
• Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an intellectual property registry or similar.

​

For more information about editing slides, please read our FAQs or visit our blog:

https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school

Fonts & colors used

This presentation has been made using the following fonts:

Gloock

(https://fonts.google.com/specimen/Gloock)

​

Quicksand

(https://fonts.google.com/specimen/Quicksand)

​

#f4ebda

#52271

#921c0e

#d76b00

#f0b863

#ef5236

#f3e5e4

#f09813

Storyset

Create your Story with our illustrated concepts. Choose the style you like the most, edit its colors, pick the background and layers you want to show and bring them to life with the animator panel! It will boost your presentation. Check out how it works.

Pana

Amico

Bro

Rafiki

Cuate

Use our editable graphic resources...

You can easily resize these resources without losing quality. To change the color, just ungroup the resource and click on the object you want to change. Then, click on the paint bucket and select the color you want. Group the resource again when you’re done. You can also look for more infographics on Slidesgo.