Nathan Wailes - Blog - GitHub - LinkedIn - Patreon - Reddit - Stack Overflow - Twitter - YouTube
React (JavaScript framework)
Table of contents
Child pages
Related pages
- Development frameworks (Mobile)#ReactNative ← All info about React Native should go here.
Pros and Cons
Courses / Tutorials
React 16 - The Complete Guide (incl. React Router 4 & Redux)
Section 1: Getting Started
1. Introduction
- React is an amazing library for creating highly-reactive and super-fast JavaScript-driven web applications.
- React is the most popular JavaScript library you can learn these days.
- You'll learn what React is about, how it works, (he goes on).
- We will build a React application throughout this course.
2. What is React?
- What is React? Quoting the official page, "It's a JavaScript library for building user interfaces."
- React is all about using components for building user interfaces.
- He gives an example of a website and how it could be broken into components.
- By breaking the website into components, we can have the code better organized. We can also easily re-use the code.
- Components can be thought of as custom HTML elements.
3. Real-World SPAs & React Web Apps
- Let's look at some components in action. We'll go to reactjs.org, which is built with React.
- The header is a component, and within it are single navigation components, there's a call-to-action component, there's an info section component, there are code-snippet components.
- All of these are reusable building blocks.
- Another good example is Udemy: it has a header, a search result summary / filter component, reused list-item components.
- Again, this approach makes it easier to develop, maintain, and update the website.
4. Adding the Right React Version to Codepen
- No video, just text.
- If you add React as shown in the next video, you'll encounter a bug.
- Instead, use these links:
5. Writing our First React Code
- CodePen.io is a like an online playground for writing code.
- Click Create → New Pen.
- Let's create a simple demo to see how we'd create something with normal HTML and JavaScript, and how we could add React to make it easier.
- He creates "person card" divs that have the person's name and age.
- We can see one limitation: we're always re-using the same HTML code.
- He then adds React and React DOM.
- Click the gear icon next to the word "JavaScript".
- React is focused on the logic of components, while React DOM handles the rendering.
- In the JavaScript preprocessor option, choose Babel so that we can use ES6 syntax.
- In its basic form, a React component is just a function.
- The name needs to start with a capital letter.
- React uses a special syntax called "JSX" that lets us put HTML where the "return" statement is.
- He puts a new div in the HTML that has an id of "p1".
- He then adds "ReactDOM.render();" to his JavaScript section, which is what takes our function and renders it to the page.
- He passes his function in a special syntax: "<Person />", and passes in a second argument which has the selector it should look for in the HTML.
- The finished code looks like this:
ReactDOM.render(<Person />, document.querySelector('#p1'));
- He loses the styling at first because "class" is a reserved word in JavaScript, so he needs to change "class" to "className" in his JSX code.
- Another issue is that his "inline-block" styling isn't working (his new React person card and his old HTML person card are not inline with each other), because we're effectively wrapping the div within the new <Person /> custom element.
- Within your React function, you'll have access to an argument (which is known as "props" but can be named whatever you want) which contains all of the key-value attribute pairs within the <Person /> tag that shows up in the .render() function.
- To access the props variable within your JSX code, use a single pair of curly braces, so {props.name}, {props.age}, where those values are passed in via the .render() call. So, for example,
ReactDOM.render(<Person name="Max" age=28 />, ...) - He then shows how to have a single
.render()function by creating a single "app" div, and then having an "app" variable in his JavaScript code that contains the JSX code.- NW: So this is very similar to Vue.js
6. Why Should we Choose React?
- UI state becomes difficult to manage with vanilla JavaScript.
- It allows us to focus on our "business logic". The framework creators can be trusted to write reliable code.
- It has a huge ecosystem, an active community, and high performance.
7. React Alternatives
- Angular and Vue.js are the most popular alternatives.
- Ember and Backbone are also alternatives but are not as popular.
- All three (React, Angular, Vue) are great for building large dynamic UIs.
- jQuery is not much of an alternative for these kinds of reactive apps. It focuses on traversing the DOM and targeting elements in the DOM.
8. Understanding Single Page Applications and Multi Page Applications
- There are two kinds of applications we can build: a single page application and a multi-page application.
- In a single-page application, the user gets a single HTML file. After that, everything is managed with JavaScript.
- In a multi-page application, we are sent multiple HTML pages as we navigate through the website.
- The SPA approach is more popular nowadays because it can make things seem faster, and even if the user needs to wait for data, you can show a spinner rather than just seeing a blank screen while the new page loads.
- In an SPA, you typically have only one
ReactDOM.render()call. In a multi-page approach you would make one call for each isolated React widget.
9. Course Outline
- His summary isn't much more than what you can infer from the reading the names of the sections.
10. How to get the Most out of This Course
- Code along
- Check his source code
- Ask and answer in Q&A
- Practice
11. Useful Resources & Links
- No video, just text.
- Official docs: https://reactjs.org/