React - Getting Started

React

• React is a framework for building modern single-page applications

Official docs
Tutorials

www.react.org

www.luv2code.com © luv2code LLC

React Features

• Component-based framework

• Declarative views

• Component logic is written with JavaScript

• Supports responsive web design and modern frameworks

• Bootstrap, Google Material Design and others …

www.luv2code.com © luv2code LLC

 React Architecture

Renders HTML Components JavaScript

Single Module
Child Child Child
Components Components Components

State my-component.js

www.luv2code.com © luv2code LLC

Key Terms
Term Definition
Main player in an React application. Has two parts:
Component 1. View for user interface
2. JavaScript that contains application logic / event handling for the view

Props How we will pass data from a parent component to a child component

Contains data about the component.

State When the state changes, the component will re-render.

Hooks A way to use local state and other React features without writing a new class

Module A collection of related components, that create a specific view.

www.luv2code.com © luv2code LLC

Application UI Composition

Header Component
Main Content Component
Todo List Component

Page Navigation Component

Footer Component

www.luv2code.com © luv2code LLC

Application Interaction

React Project

REST API
component.js Spring Boot
back-end

www.luv2code.com © luv2code LLC

React Project
• An React project is composed of multiple les

HTML HTML Images Images

CSS CSS
HTML HTML Others …
CSS CSS

JavaScript JavaScript
Config Config

JavaScript JavaScript
Config Config

www.luv2code.com © luv2code LLC

fi
Creating an React Project

• React provides a command-line tool to generate a project

• Generates the starter les to help you bootstrap your project

Creating a React App is easy

www.luv2code.com © luv2code LLC

fi
Creating a new React application

> npx create-react-app my-app

www.luv2code.com © luv2code LLC

Running your new React application
> cd my-app

> npm start

www.luv2code.com © luv2code LLC

Creating a new React application

> npx create-react-app my-app

Creates a brand new React application without

you having to do any build configurations!
Running your new React application Sweet!!

> cd my-app Jump into your new React application directory

1. Builds the app (compile / transpile)

> npm start 2. Starts the server
3. Watches the source files
4. Rebuilds the apps when source is updated (hot reload)
www.luv2code.com © luv2code LLC

Changing the Server Port

> set PORT=5100 && npm start

Server listens on port 5100

http://localhost:5100

www.luv2code.com © luv2code LLC

Project Files Holds all installed libraries from

node pack manager (npm)

React
The HTMLLogo
andwithin
DOM the favicon
for the React
application
React logo at a specific size
React logo at a specific size
Provides information about the project. Name,
Used to author,
preventicon
search
etc.engine anda bots
all inside JSON tofile
crawl
on the React application
Global CSS for your React application
Global JavaScript component for your
Global React
tests directory for your React
application
The main root
CSS application
component.
for Hooks
index.html file onto the
index.html file to be able to start rendering
components
We can skip
Files for Git to ignore if you plan to use Git
Lock dependencies to a specific version
& remote repositories
Used number
for dependencies,
and records defining project
versioning for
properties, description, author, licensing
installation
Your personal README for your React
and more
project :-)

www.luv2code.com © luv2code LLC