INTRODUCTION TO
REACT.JS
TABLE OF CONTENT
• React • JSX Syntax
Overview
• Installation • Compositio
n
Overview
WHAT IS REACT.JS?
•React is a JavaScript library,
created by Facebook for building user
interfaces (UI), focused on creating
reusable components.
Feautures
Open-
source
Declarative
• Design simple views for
each state in your app.
• Easier to debug.
Component-Based
• Encapsulated components
that manage their own
state.
• Keep state out of the
DOM.
Native support
• Compose rich mobile UI in
Android, iOS.
Isomorphic
• JavaScript that runs on
both client & server
• Better user experience.
Advantages
Use all ES6
Easy to Fast features
learn performance
Great error
Compatible with reporting
other libraries
REACT INSTALLATION
Create React App
• Less to learn - instant reloads help you
focus on development.
• Only one dependency - no complicated
version mismatches.
• No Lock-In - under the hood Webpack,
Babel, ESLint.
• Install the React app creator.
Install and Run the React
App Creator
• Run the React app creator
npm create vite@latest my-
app
• Starts your React app from the
command line
cd my- npm
app start
• Browse your app from
http://localhost:3000
Finding Information
• Visit the official • Online sandbox
website
https://reactjs.org/ https://
codesandbox.io/
• Documentation
https://reactjs.org/docs/
installation.html
React App Structure
package.json - project configuration
• Module name, dependencies, build
actions
index.html
• App main HTML file
index.js
App.js, App.css, • App main JS file
App.test.js (startup script)
• React component "App"
Preview
JSX Syntax
JSX Overview
JSX is React's JavaScript superset language,
that
has all of JavaScript's features and more.
It has unique approach to mixing HTML and
JS, and compiles to plain JavaScript.
JSX Syntax
<div className=“yellow">Children
Content</div>
<MyCounter count={6 + 7} EXPRESSIO
/> N
let roundScore = {
player1: 6, CUSTOM PASS
player2: 7 COMPONEN VARIABLE AS
}; T PROP
<Dashboard index=“1" onClick={() => {}>
<h1>Score</h1>
<Scoreboard className="result" score={roundScore} />
</Dashboard>
JSX Rules and Principles
STANDARD ELEMENTS USE
LOWERCASE NAMES
• div, span, form, input
CUSTOM COMPONENTS ALWAYS
USE PASCAL CASE
• CustomComponent, Footer, DashBoard
COMPONENT NAME CANNOT BE AN
EXPRESSION
• Use a variable instead
THERE MUST BE A ROOT ELEMENT
Compilation
• JSX compiles to function
calls
<div className=“yellow">Children
Content</div>
PROPERTIES
ELEMENT TYPE (HTML TAG NAME) OBJECT
React.createElement("div",
{ className: “yellow" },
"Children Content" [, …]);
LIST OF CHILDREN
Composition
• React components can be nested, like DOM
function Welcome() { elements
return <h1>Welcome</h1>;
}
function Goodbye() {
return <h1>Goodbye</h1>;
}
function ComponentBlender() {
return (
<div>
<Welcome />
<Goodbye />
</div> ReactDOM.render(<ComponentBlender
);} />,
document.getElementById('root
Advantages
• Encapsulate logic.
• Separate your code.
- Easier to maintain and
debug.
- Allows reusability.
• Components are neat.
Summary
• React is a JavaScript library
for building user
interfaces.
• React uses all ES6 features.
• JSX is React's JavaScript
superset.
• React components can be nested
(composition).
1/7
