Creating a web page
by Tom Bray, Ethan Holmes, Ryan Vice, Adam Horton, Narayan Prusty, Artemij Fedoseje
React: Building Modern Web Applications
- React: Building Modern Web Applications
- Table of Contents
- React: Building Modern Web Applications
- Meet Your Course Guide
- Course Structure
- Course journey
- The Course Roadmap and Timeline
- 1. Course Module 1: Reactive Programming with JavaScript
- 1. Introduction and Installation
- 2. Core JavaScript
- 3. Reactive Programming – The Basic Theory
- 4. Demonstrating Nonfunctional Reactive Programming – A Live Example
- 5. Learning Functional Programming – The Basics
- 6. Functional Reactive Programming – The Basics
- 7. Not Reinventing the Wheel – Tools for Functional Reactive Programming
- 8. Demonstrating Functional Reactive Programming in JavaScript – A Live Example, Part I
- 9. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part II – A To-do List
- 10. Demonstrating Functional Reactive Programming in JavaScript: A Live Example Part III – A Calendar
- Play it again Sam – an interesting challenge
- Classical Hijaxing works well
- Built with usability in mind, but there's still room to grow
- Plain old JavaScript objects are all you need
- Progressive disclosure that starts simply
- A render() method can easily delegate
- Boring code is better than interesting code!
- A simple UI for simply non-recurring entries...
- The user can still opt-in for more
- Avoiding being clever
- Anonymous helper functions may lack pixie dust
- How far in the future should we show?
- Different stripes for different entry types
- Now we're ready to display!
- Let's be nice and sort each day in order
- Let them use Markdown!
- One thing at a time!
- The holidays that inspired this calendar
- 11. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part IV – Adding a Scratchpad and Putting It All Together
- 12. How It All Fits Together
- 2. Course Module 2: React.js Essentials
- 1. Installing Powerful Tools for Your Project
- 2. Create Your First React Element
- 3. Create Your First React Component
- 4. Make Your React Components Reactive
- 5. Use Your React Components with Another Library
- 6. Update Your React Components
- 7. Build Complex React Components
- 8. Test Your React Application with Jest
- 9. Supercharge Your React Architecture with Flux
- 10. Prepare Your React Application for Painless Maintenance with Flux
- Decoupling concerns with Flux
- Refactoring the Stream component
- Creating CollectionStore
- Creating CollectionActionCreators
- Refactoring the Application component
- Refactoring the Collection component
- Refactoring the CollectionControls component
- Refactoring the CollectionRenameForm component
- Refactoring the TweetList component
- Refactoring the StreamTweet component
- Build and go beyond
- 3. Course Module 3: Learning ECMAScript 6
- 1. Playing with Syntax
- 2. Knowing Your Library
- Working with numbers
- Doing Math
- Working with strings
- Arrays
- Collections
- Object
- 3. Using Iterators
- 4. Asynchronous Programming
- 5. Implementing the Reflect API
- The Reflect object
- The Reflect.apply(function, this, args) method
- The Reflect.construct(constructor, args, prototype) method
- The Reflect.defineProperty(object, property, descriptor) method
- The Reflect.deleteProperty(object, property) method
- The Reflect.enumerate(object) method
- The Reflect.get(object, property, this) method
- The Reflect.set(object, property, value, this) method
- The Reflect.getOwnPropertyDescriptor(object, property) method
- The Reflect.getPrototypeOf(object) method
- The Reflect.setPrototypeOf(object, prototype) method
- The Reflect.has(object, property) method
- The Reflect.isExtensible(object) method
- The Reflect.preventExtensions(object) method
- The Reflect.ownKeys(object) method
- The Reflect object
- 6. Using Proxies
- Proxies in a nutshell
- The Proxy API
- Traps
- The get(target, property, receiver) method
- The set(target, property, value, receiver) method
- The has(target, property) method
- The isExtensible(target) method
- The getPrototypeOf(target) method
- The setPrototypeOf(target, prototype) method
- The preventExtensions(target) method
- The getOwnPropertyDescriptor(target, property) method
- The defineProperty(target, property, descriptor) method
- The deleteProperty(target, property) method
- The enumerate(target) method
- The ownKeys(target) method
- The apply(target, thisValue, arguments) method
- The construct(target, arguments) method
- The Proxy.revocable(target, handler) method
- Traps
- The uses of proxies
- 7. Walking You Through Classes
- Understanding the Object-oriented JavaScript
- Using classes
- Defining a class
- The prototype methods
- The static methods
- Implementing inheritance in classes
- The computed method names
- The attributes of properties
- Classes are not hoisted!
- Overriding the result of the constructor method
- The "Symbol.species" static accessor property
- The "new.target" implicit parameter
- Using "super" in the object literals
- 8. Modular Programming
- 4. Course Module 4: Mastering React
- 1. Dynamic Components, Mixins, Forms, and More JSX
- Dynamic components
- Mixins
- Forms
- Controlled components - the read-only input
- Controlled components - the read and write input
- Controlled components – a simple form
- Validation
- Validation types
- The react-validation-mixin example
- Getting the code
- Running the code
- Getting the code
- 2. Anatomy of a React Application
- 3. Starting a React Application
- 4. React Blog App Part 1 – Actions and Common Components
- 5. React Blog App Part 2 – Users
- 6. React Blog App Part 3 – Posts
- 7. React Blog App Part 4 – Infinite Scroll and Search
- 8. Animation in React
- 5. Course Module 5: Getting Started with React Native
- Index
- 1. Dynamic Components, Mixins, Forms, and More JSX
If you're starving for some React goodness, then I have great news for you! We're almost there. All that's left to do is to create index.html with a link to our snapterest.js script.
Create the index.html file in the ~/snapterest/build/ directory. Add the following HTML markup to it:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
<title>Snapterest</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id="react-application">
I am about to learn the essentials of React.js.
</div>
<script src="./snapterest.js"></script>
</body>
</html>Open ~/snapterest/build/index.html in a web browser. You should see the following text: I am about to learn the essentials of React.js. That's right, we have finished setting up our project, and it's time to get to know React!
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.