SlideShare a Scribd company logo
Introduction to React
Zhenghui (Zheng) Wang
Boston University DSC
Boston University Developer Student Club
What is React?
React is an open-source, front end, JavaScript library for building user interfaces or UI
components.
AI
Projects
Showcase
Prototypes &
Solutions
Solutions to
Local
Problems
Practical
Application
What will we do?
Machin
e
Learnin
g
Android
iOS
Workshops
React
Firebase
UI/UX
Git
GCP
What will we make?
React App (bu-dsc-chatroom-demo.web.app)
At the end of this workshop series, we will have built an application like the one linked
above. We will be using React and Google Firebase as our front-end/back-end technology.
What will you need?
Tools Skills
● Your favorite text editor (VScode)
● Node.js LTE
○ npm (comes with Node.js)
● Programming experience
● Terminal navigation
● Some familiarity with JavaScript
and HTML
Before we start...
This little thing takes a while
1. In your favorite directory, run the following
command in the terminal:
npx create-react-app my-app
const name = 'Zheng';
const element = <h1>Hello, {name}</h1>;
JSX is simply an syntax extension that allows you to write HTML
and JavaScript together at the same time
JSX
<div id="root"></div>
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
To display an element, just call the ReactDom.render function
Rendering Elements
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Components are just functions/classes that returns some element.
Props are the arguments passed to the component.
Components and Props
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
States
States are like props, but is private and fully
controlled by the component
<a onClick={handleClick}>
Click me
</a>
function handleClick(e) {
console.log('The element was clicked.');
}
Event handling can be done through method implementations in
the code
Handling Events
Let’s Build Something!
Interactive Tic-Tac-Toe
1. In your favorite directory, run the following command in the terminal:
npx create-react-app my-app
2. Delete all files in the src/ folder of the new project (not the folder itself!)
Let’s Build Something!
Interactive Tic-Tac-Toe
3. Add a file named index.css in the src/ folder with this code:
https://pastebin.com/raw/jugYeS1Q
4. Add a file named index.js in the src/ folder with this code:
https://pastebin.com/raw/Q3r2R1uf
5. Run npm start in the project folder and open http://localhost:3000
Now I should share
my screen...
Zhenghui (Zheng) Wang
Boston University DSC
Boston University Developer Student Club

More Related Content

What's hot

Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop
Ahmed rebai
 
React js for beginners
React js for beginnersReact js for beginners
React js for beginners
Alessandro Valenti
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
 
React js
React jsReact js
React js
Jai Santhosh
 
React js
React jsReact js
React js
Alireza Akbari
 
React and redux
React and reduxReact and redux
React and redux
Mystic Coders, LLC
 
Web Performance & Latest in React
Web Performance & Latest in ReactWeb Performance & Latest in React
Web Performance & Latest in React
Talentica Software
 
"Technical Challenges behind Visual IDE for React Components" Tetiana Mandziuk
"Technical Challenges behind Visual IDE for React Components" Tetiana Mandziuk"Technical Challenges behind Visual IDE for React Components" Tetiana Mandziuk
"Technical Challenges behind Visual IDE for React Components" Tetiana Mandziuk
Fwdays
 
A Brief Introduction to React.js
A Brief Introduction to React.jsA Brief Introduction to React.js
A Brief Introduction to React.js
Doug Neiner
 
The complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrThe complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrr
AfreenK
 
Necto 16 training 20 component mode &amp; java script
Necto 16 training 20   component mode &amp; java scriptNecto 16 training 20   component mode &amp; java script
Necto 16 training 20 component mode &amp; java script
Panorama Software
 
React Fundamentals - Jakarta JS, Apr 2016
React Fundamentals - Jakarta JS, Apr 2016React Fundamentals - Jakarta JS, Apr 2016
React Fundamentals - Jakarta JS, Apr 2016
Simon Sturmer
 
7 Redux challenges
7 Redux challenges7 Redux challenges
7 Redux challenges
reactima
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
Sergey Romaneko
 
React js Rahil Memon
React js Rahil MemonReact js Rahil Memon
React js Rahil Memon
RahilMemon5
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
Varun Raj
 
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOMReact.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
Jimit Shah
 
React JS part 1
React JS part 1React JS part 1
React JS part 1
Diluka Wittahachchige
 
Building Autonomous Services
Building Autonomous ServicesBuilding Autonomous Services
Building Autonomous Services
Matthias Noback
 
Reactjs
Reactjs Reactjs
Reactjs
Neha Sharma
 

What's hot (20)

Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop
 
React js for beginners
React js for beginnersReact js for beginners
React js for beginners
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
React js
React jsReact js
React js
 
React js
React jsReact js
React js
 
React and redux
React and reduxReact and redux
React and redux
 
Web Performance & Latest in React
Web Performance & Latest in ReactWeb Performance & Latest in React
Web Performance & Latest in React
 
"Technical Challenges behind Visual IDE for React Components" Tetiana Mandziuk
"Technical Challenges behind Visual IDE for React Components" Tetiana Mandziuk"Technical Challenges behind Visual IDE for React Components" Tetiana Mandziuk
"Technical Challenges behind Visual IDE for React Components" Tetiana Mandziuk
 
A Brief Introduction to React.js
A Brief Introduction to React.jsA Brief Introduction to React.js
A Brief Introduction to React.js
 
The complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrThe complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrr
 
Necto 16 training 20 component mode &amp; java script
Necto 16 training 20   component mode &amp; java scriptNecto 16 training 20   component mode &amp; java script
Necto 16 training 20 component mode &amp; java script
 
React Fundamentals - Jakarta JS, Apr 2016
React Fundamentals - Jakarta JS, Apr 2016React Fundamentals - Jakarta JS, Apr 2016
React Fundamentals - Jakarta JS, Apr 2016
 
7 Redux challenges
7 Redux challenges7 Redux challenges
7 Redux challenges
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
 
React js Rahil Memon
React js Rahil MemonReact js Rahil Memon
React js Rahil Memon
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
 
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOMReact.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
 
React JS part 1
React JS part 1React JS part 1
React JS part 1
 
Building Autonomous Services
Building Autonomous ServicesBuilding Autonomous Services
Building Autonomous Services
 
Reactjs
Reactjs Reactjs
Reactjs
 

Similar to Intro to React

How to create components in react js
How to create components in react jsHow to create components in react js
How to create components in react js
BOSC Tech Labs
 
react-slides.pdf
react-slides.pdfreact-slides.pdf
react-slides.pdf
DayNightGaMiNg
 
react-slides.pdf gives information about react library
react-slides.pdf gives information about react libraryreact-slides.pdf gives information about react library
react-slides.pdf gives information about react library
janet736113
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
Eric Deng
 
react-slides.pptx
react-slides.pptxreact-slides.pptx
react-slides.pptx
DayNightGaMiNg
 
Fundamental concepts of react js
Fundamental concepts of react jsFundamental concepts of react js
Fundamental concepts of react js
StephieJohn
 
React - Start learning today
React - Start learning today React - Start learning today
React - Start learning today
Nitin Tyagi
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applications
Matteo Manchi
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
Knoldus Inc.
 
Introduction to React for Frontend Developers
Introduction to React for Frontend DevelopersIntroduction to React for Frontend Developers
Introduction to React for Frontend Developers
Sergio Nakamura
 
React native
React nativeReact native
React native
Vishal Dubey
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
Chiew Carol
 
ReactJS.pptx
ReactJS.pptxReactJS.pptx
ReactJS.pptx
SamyakShetty2
 
Content-Driven Apps with React
Content-Driven Apps with ReactContent-Driven Apps with React
Content-Driven Apps with React
Netcetera
 
How To Integrate Native Android App With React Native.
How To Integrate Native Android App With React Native.How To Integrate Native Android App With React Native.
How To Integrate Native Android App With React Native.
Techugo
 
React native
React nativeReact native
React native
Omid Nikrah
 
React native
React nativeReact native
REACT pdf.docx
REACT pdf.docxREACT pdf.docx
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 

Similar to Intro to React (20)

How to create components in react js
How to create components in react jsHow to create components in react js
How to create components in react js
 
react-slides.pdf
react-slides.pdfreact-slides.pdf
react-slides.pdf
 
react-slides.pdf gives information about react library
react-slides.pdf gives information about react libraryreact-slides.pdf gives information about react library
react-slides.pdf gives information about react library
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
 
react-slides.pptx
react-slides.pptxreact-slides.pptx
react-slides.pptx
 
Fundamental concepts of react js
Fundamental concepts of react jsFundamental concepts of react js
Fundamental concepts of react js
 
React - Start learning today
React - Start learning today React - Start learning today
React - Start learning today
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applications
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 
Introduction to React for Frontend Developers
Introduction to React for Frontend DevelopersIntroduction to React for Frontend Developers
Introduction to React for Frontend Developers
 
React native
React nativeReact native
React native
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
 
ReactJS.pptx
ReactJS.pptxReactJS.pptx
ReactJS.pptx
 
Content-Driven Apps with React
Content-Driven Apps with ReactContent-Driven Apps with React
Content-Driven Apps with React
 
How To Integrate Native Android App With React Native.
How To Integrate Native Android App With React Native.How To Integrate Native Android App With React Native.
How To Integrate Native Android App With React Native.
 
React native
React nativeReact native
React native
 
React native
React nativeReact native
React native
 
REACT pdf.docx
REACT pdf.docxREACT pdf.docx
REACT pdf.docx
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 

More from SheilaJimenezMorejon

Add a backend and deploy!
Add a backend and deploy!Add a backend and deploy!
Add a backend and deploy!
SheilaJimenezMorejon
 
Build a chatroom!
Build a chatroom!Build a chatroom!
Build a chatroom!
SheilaJimenezMorejon
 
Introduction to Applied Machine Learning
Introduction to Applied Machine LearningIntroduction to Applied Machine Learning
Introduction to Applied Machine Learning
SheilaJimenezMorejon
 
Building Beautiful Flutter Apps
Building Beautiful Flutter AppsBuilding Beautiful Flutter Apps
Building Beautiful Flutter Apps
SheilaJimenezMorejon
 
Git & GitHub WorkShop
Git & GitHub WorkShopGit & GitHub WorkShop
Git & GitHub WorkShop
SheilaJimenezMorejon
 
Information session
Information sessionInformation session
Information session
SheilaJimenezMorejon
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
SheilaJimenezMorejon
 

More from SheilaJimenezMorejon (7)

Add a backend and deploy!
Add a backend and deploy!Add a backend and deploy!
Add a backend and deploy!
 
Build a chatroom!
Build a chatroom!Build a chatroom!
Build a chatroom!
 
Introduction to Applied Machine Learning
Introduction to Applied Machine LearningIntroduction to Applied Machine Learning
Introduction to Applied Machine Learning
 
Building Beautiful Flutter Apps
Building Beautiful Flutter AppsBuilding Beautiful Flutter Apps
Building Beautiful Flutter Apps
 
Git & GitHub WorkShop
Git & GitHub WorkShopGit & GitHub WorkShop
Git & GitHub WorkShop
 
Information session
Information sessionInformation session
Information session
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
 

Recently uploaded

Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptxAI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
Sunil Jagani
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Ukraine
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Discover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched ContentDiscover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched Content
ScyllaDB
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
DianaGray10
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
AlexanderRichford
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 

Recently uploaded (20)

Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptxAI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Discover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched ContentDiscover the Unseen: Tailored Recommendation of Unwatched Content
Discover the Unseen: Tailored Recommendation of Unwatched Content
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 

Intro to React

  • 1. Introduction to React Zhenghui (Zheng) Wang Boston University DSC Boston University Developer Student Club
  • 2. What is React? React is an open-source, front end, JavaScript library for building user interfaces or UI components.
  • 3. AI Projects Showcase Prototypes & Solutions Solutions to Local Problems Practical Application What will we do? Machin e Learnin g Android iOS Workshops React Firebase UI/UX Git GCP
  • 4. What will we make? React App (bu-dsc-chatroom-demo.web.app) At the end of this workshop series, we will have built an application like the one linked above. We will be using React and Google Firebase as our front-end/back-end technology.
  • 5.
  • 6. What will you need? Tools Skills ● Your favorite text editor (VScode) ● Node.js LTE ○ npm (comes with Node.js) ● Programming experience ● Terminal navigation ● Some familiarity with JavaScript and HTML
  • 7. Before we start... This little thing takes a while 1. In your favorite directory, run the following command in the terminal: npx create-react-app my-app
  • 8. const name = 'Zheng'; const element = <h1>Hello, {name}</h1>; JSX is simply an syntax extension that allows you to write HTML and JavaScript together at the same time JSX
  • 9. <div id="root"></div> const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root')); To display an element, just call the ReactDom.render function Rendering Elements
  • 10. function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Components are just functions/classes that returns some element. Props are the arguments passed to the component. Components and Props
  • 11. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } States States are like props, but is private and fully controlled by the component
  • 12. <a onClick={handleClick}> Click me </a> function handleClick(e) { console.log('The element was clicked.'); } Event handling can be done through method implementations in the code Handling Events
  • 13. Let’s Build Something! Interactive Tic-Tac-Toe 1. In your favorite directory, run the following command in the terminal: npx create-react-app my-app 2. Delete all files in the src/ folder of the new project (not the folder itself!)
  • 14. Let’s Build Something! Interactive Tic-Tac-Toe 3. Add a file named index.css in the src/ folder with this code: https://pastebin.com/raw/jugYeS1Q 4. Add a file named index.js in the src/ folder with this code: https://pastebin.com/raw/Q3r2R1uf 5. Run npm start in the project folder and open http://localhost:3000
  • 15. Now I should share my screen... Zhenghui (Zheng) Wang Boston University DSC Boston University Developer Student Club