react
what is Module?
- A piece of reusable code
- A modern web application might depend on hundreds of modules
- What will happen when you have too many modules?
- How would you manage 1000 modules
- The official implementation of module is relatively new in JavaScript (introduced in ES6), but the concept is never new
- Popular module patterns: anonymous closure, global import, object interface, revealing module pattern
- Popular module systems:
- CommonJS: server-side first approach, commonly seen in Node.js
- AMD (Asynchronous Module Definition): client-side first approach
- UMD (Universal Module Definition): both sides
- ES6 Module: official, YEAH!
module bundlers
- Help us manage complex module dependencies
- Popular bundlers: Webpack (for web app) and Rollup (for library)
- Since we will be building web applications, we will focus on Webpack in this course
- Transpiling, bundling, or packaging modules with dependencies into static assets for browser usage
- You can customize what loaders to include when bundling your application. E.g. If your code is written in JavaScript with ES6 syntax, you might need a Babel loader
- A transpiler for transforming your JavaScript source code written in advanced syntax into plain JavaScript that all browsers can understand
- Compile vs transpile (blurry definition)
- compile: from higher abstraction level to lower abstraction level
- transpile: modify source code within same abstraction level
- A popular library for building user interface
- Currently the most popular and demanding front-end framework
- Advantages:
- Efficient virtual DOM
- Fast DOM re-rendering
- Component-based approach: welcome to modern web application
- Tutorial: https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3
set up
- React team has made it super easy to create a modern web application with React via create-react-app command
- Recommended for most personal React projects or people who are lazy to learn Webpack
JSX
- Stands for JavaScript XML, a syntax extension to JavaScript for describing UI elements
- Just a syntax sugar to React.createElement() function. It is not HTML. It is a JavaScript expression
- Example:
<h1 className='title'>Hello, world!</h1>;
// compiles into
React.createElement(
'h1',
{className: 'title'},
'Hello, World!'
);
Creating new components
- There are two types of components in React: class component and stateless functional component
// Class component
class MyComponent extends React.Component {
render() {
return (
<h1>Hello, World!</h1>
);
}
}
// Stateless functional component
const myComponent = () => {
return (
<h1>Hello, World!</h1>
);
};
class component
- Use class component when you need:
- Access to lifecycle methods
- Manage component state or local data
- Not encouraged because they are hard to test and less performant, only use it when necessary
Stateless functional component
- Use functional component when you need:
- Describe simple UI with data passed by parent component
- Write some HTML
- Encouraged to use it as much as possible
- State: component local data
- Prop: data passed by parent component
- Example:
const Title = (props) => <h1>{props.text}</h1>
class App extends React.Component {
state = {
data: "Hello, World!"
}
render() {
return (
<Title text={this.state.data} />
)
}
}
- Represents the lifecycle of a component (when it is created, updated, destroyed, and etc.)
- Only class component has lifecycle
- Lifecycle methods are hard to test and reason about. Only use them when necessary
class App extends React.Component {
render() {
return (
<h1>Hello, World!</h1>
)
}
componentDidMount() {
console.log("App is created");
}
componentDidUpdate() {
console.log("App is updated");
}
componentWillUnmount() {
console.log("App is destroyed");
}
}
advanced react
- There are much more to React. It is a powerful framework that allows us to create performant UI
- React has been evolving rapidly. New APIs are announced every few months. Keep learning and stay on top of the trend
Assignment
Chat application
Coding Ninjas Bootcamp - Class 5: React
By Zico Deng
Coding Ninjas Bootcamp - Class 5: React
Introduction to React
- 140