Scribd
Upload
39 views

React Basics

React is a JavaScript library for building user interfaces. This document discusses React basics including what React is, related tools like Babel and Webpack, routing in React, creating a new React app with Create React App, building components, and their props, state and lifecycle methods. It provides examples of exercises for creating a React app and building a single page React app.

Uploaded by

Camilo Loaiza Rios
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
39 views

React Basics

React is a JavaScript library for building user interfaces. This document discusses React basics including what React is, related tools like Babel and Webpack, routing in React, creating a new React app with Create React App, building components, and their props, state and lifecycle methods. It provides examples of exercises for creating a React app and building a single page React app.

Uploaded by

Camilo Loaiza Rios
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

React Basics

SERGIO CADENA
Software Developer
Información confidencial propiedad de ASIMETRIX
S.A.S. Esta información se comparte a los fines del
cumplimiento del contrato firmado por las Partes. Es
prohibido compartir este documento o la información
contenida en este con terceros o utilizarla para fines
distintos a los contratados sin autorización de su
titular. El incumplimiento de esta obligación se
considerará incumplimiento del contrato, sin
perjuicio de las consecuencias civiles y penales
dispuestas por las leyes de la República de Colombia.
CONTENTS
CONTENTS

1. Introduction

• What is React?
• Babel
• WebPack
• Router

2. Create React App

3. Components

• Props and PropTypes


• State
• Lifecycle

4. Practice
Introduction: What is React?
React is a JavaScript library created by Facebook

React is a User Interface (UI) library

React is a tool for building UI components


Introduction: Babel
Babel is a JavaScript compiler: ECMAScript 2015+. 🡪 backwards compatible version of
JavaScript

• Transform syntax

• Polyfill features that are missing in your target environment (through 


@babel/polyfill)

• Source code transformations (codemods)


Introduction: Babel
Introduction: Babel
JSX and
React
npm install --save-dev @babel/preset-
react
Introduction: WebPack
Webpack is a module bundler. What it does is it examines your codebase, looks at all the imports and
exports, then intelligently bundles all of your modules together into a single file that the browser can
understand.

npm install webpack webpack-cli --save-dev


Introduction: WebPack
What problem is webpack
solving?

Index.html • Tedious
• Error-prone:
1. Forgetting to include
a file
2. Order
Introduction: WebPack
What problem is webpack
solving?

Index.html
Introduction: Routing
React itself doesn’t come with a router 🡪 React is just a UI library
Most popular? 🡪 React Router

React Router’s whole job is to render specific components based on the current URL path of the
user.

What’s interesting about React Router is you’ll notice


the entire API is just components, this aligns nicely
with React itself.
Create a New React App

server-rendered static content- integrating with


Single-page app website with an existing
oriented website
Node.js codebase

Create React Next.j Gatsb Neutrin


App s y o
Parcel
Razzle
Create a New React App

server-rendered static content- integrating with


Single-page app website with an existing
oriented website
Node.js codebase

Create React Next.j Gatsb Neutrin


App s y o
Parcel
Razzle
Create React App
Create React App is an officially supported way to create single-page React applications.

Quick Start

Node >= 8.10 and npm >= 5.6

o Cabe en una sola página (experiencia más fluida).


Single-page
o Los códigos de HTML, JavaScript, y CSS se carga de una vez​
application
Create React App
More Options:
• Selecting Template:
You can now optionally start a new app from a template by appending --template [template-
name] to the creation command.

• Selecting a Package Manager:


When you create a new app, the CLI will use Yarn to install dependencies (when available). If
you have Yarn installed, but would prefer to use npm, you can append --use-npm to the
creation command
Components: Elements https://reactjs.org
/

Elemento Componente

Objeto Clase

<TutCard title=“React Basics


2”/>
Components: Props and PropTypes
Components: Props and PropTypes

npm install --save prop-types

import PropTypes from 'prop-types'

HelloMessage.propTypes = {
title: PropTypes.string.isRequired
}
Components: State
Components: Lifecycle
Exercise 1

Create Reat App:


1. Node >= 8.10 and npm >= 5.6
2. npx create-react-app app-name
3. cd app-name
4. npm start
Exercise 2

Single-page React app example:


1. Go to github: https://github.com/Sergio2357/ReactBasics
2. Clone the ReactBasics repository to your local
3. npm i
4. npm start
Now, let`s see an example
Requirements:
• Install Node?
• Install react, react-dom?
• Create project folder: cd folder-name
• run npm install react-bootstrap bootstrap
• run npx create-react-app app-name
THANK YOU!
• https://babeljs.io/docs/en/
https://learn.tylermcginnis.com
https://programmingwithmosh.com/javascript/react-lifecycle-methods/
https://webpack.js.org/
https://medium.com/swlh/react-lifecycle-hooks-71547ef4e7a8

You might also like