Scribd
Upload
3 views

React Introduction 2

React.js is a JavaScript library developed by Facebook for building user interfaces with reusable components. It features a component-based architecture, supports JSX syntax, and allows for easy installation and setup through tools like Create React App. The library promotes better performance, easier debugging, and compatibility with other libraries while utilizing ES6 features.

Uploaded by

valentinadespodova5
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

React Introduction 2

React.js is a JavaScript library developed by Facebook for building user interfaces with reusable components. It features a component-based architecture, supports JSX syntax, and allows for easy installation and setup through tools like Create React App. The library promotes better performance, easier debugging, and compatibility with other libraries while utilizing ES6 features.

Uploaded by

valentinadespodova5
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 34

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

You might also like