JavaScript by example modern JavaScript programming with real world web apps
A project based guide to help you get started with web development by building real-world and modern web applications About This Book Learn JavaScript from scratch by building clones of popular web applications Understand the core concepts and techniques surrounding JavaScript with this power-packed...
Otros Autores: | |
---|---|
Formato: | Libro electrónico |
Idioma: | Inglés |
Publicado: |
Birmingham, [England] ; Mumbai, [India] :
Packt Publishing
2017.
|
Edición: | 1st edition |
Materias: | |
Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009630687206719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Customer Feedback
- Dedication
- Table of Contents
- Preface
- Chapter 1: Building a ToDo List
- System requirements
- Text editor
- Node.js
- For Windows users
- For Linux users
- For Mac users
- Google Chrome
- ToDo List app
- Chrome DevTools
- Getting started with ES6
- Arrow functions
- let, var, and const
- Loading the tasks from data
- Template literals
- Managing task status
- Adding new tasks to the list
- Adding tasks by hitting Enter button
- Persisting data in the browser
- Compatibility with older browsers
- Node.js and npm
- Setting up our development environment with Node and Babel
- Shipping the code
- Summary
- Chapter 2: Building a Meme Creator
- Initial project setup
- Responsive designing with flexbox
- Flexbox - a quick introduction
- Designing the Meme Creator
- Navigation bar
- Content area
- Webpack module bundler
- Modules in JavaScript
- Bundling modules in Webpack
- Loaders in Webpack
- Bundling Bootstrap in Webpack
- Plugins in Webpack
- Webpack dev server
- Optimizing Webpack builds for different environments
- Creating .env file in Windows
- UglifyJsPlugin
- PurifyCSSPlugin
- ExtractTextPlugin
- Cache busting
- Clean dist folder before generating a new build
- Source maps in production
- Building the Meme Creator
- Event handling
- Rendering an image in the canvas
- Reading a file using JavaScript
- Rendering text on the canvas
- Making a canvas responsive to show large images
- Summary
- Chapter 3: Event Registration App
- Event - JS meetup
- Initial project setup
- Adding styles to the page
- Validating and submitting the form using JavaScript
- HTML forms
- Reading form data in JavaScript
- Form validation module.
- Working with regular expressions in JavaScript
- Submitting the form using&
- #160
- AJAX
- Making network requests in JavaScript
- What is a Promise?
- Creating the API call module
- Constructing the request details
- Other network request methods
- Back to the form
- Adding charts to the website using Chart.js
- Adding charts to the canvas elements
- Setting up tab sections
- Adding Google Maps to the web page
- Adding Google Maps with a marker
- Generating a production build
- Shipping the code
- Summary
- Chapter 4: Real-Time Video Call App with WebRTC
- Introduction to WebRTC
- History of WebRTC
- JavaScript WebAPIs
- JavaScript WebRTC API
- MediaStream
- Using Adapter.js library
- RTCPeerConnection and&
- #160
- RTCDataChannel
- Building the Video Call application
- Initial project setup
- Adding styles to the page
- Building the Video Call app
- Creating a room
- Adding participants to your room
- Click to copy text
- Joining a room
- Setters and getters
- Adding and removing videos
- Selecting a video
- Video Call in action
- Summary
- Chapter 5: Developing a Weather Widget
- Can you build a Weather Widget?
- Introduction to web components
- HTML templates
- HTML imports
- Building the Weather Widget
- Working of the Weather Widget
- Retrieving the geolocation
- Creating the weather custom element
- Testing the custom element
- Attaching a shadow DOM
- Working with the custom element
- Adding dependency modules
- Retrieving and displaying weather information
- Adding the current time to the widget
- Responding to changes in element attributes
- Using setters and getters
- Fixing browser compatibility
- Essential things to know
- Summary
- Chapter 6: Building a Blog with React
- Why use a framework?
- Selecting a framework
- React
- Immutable state
- Props.
- Building the Counter
- The React crash course
- Adding and managing states
- Managing the state for the input field
- Managing the state for the tasks
- Adding new tasks
- Preventing mutations using the spread syntax
- Advantages of using React
- Performance
- Maintainability
- Size
- Building a blog with React
- Creating the navigation bar
- Implementing routing and navigation using React Router
- The routes file
- Adding routes in the app component
- Managing history using withRouter
- Proptype validation
- Seamless navigation with NavLink
- Blog home page
- Using child components
- Displaying post details
- Adding a new blog post
- Submitting the post
- Generating production builds
- Summary
- Chapter 7: Redux
- What is Redux?
- Flux
- Introduction to Redux
- Store
- Actions
- Reducers
- Implementing Redux in the blog
- The folder structure
- Initial state
- Action types
- Actions
- Get all posts
- Adding a new post
- Reducers
- The Root Reducer
- Store
- Connecting Redux with React components
- The App component
- Home component
- Post component
- The NewPost component
- The Redux data flow
- Persisting Redux store
- Summary
- Index.