React is a powerful, component-based JavaScript library that allows efficient building of large applications with rapidly changing data.
There's a ton to learn with React, but here's some of the basics to get you familiar with the framework.
Table of Contents
Benefits
Virtual DOM
- React is efficient because it employs the use of a Virtual DOM
- Typical DOM manipulation is slow and inefficient as it requires rebuilding of the entire DOM for each update (for instance, if you have a list of 10 items, update one item, it updates the entire list rather than only that item).
- A Virtual DOM, however, acts as a lightweight representation of the real DOM.
- All updates are instead made to the Virtual DOM, which then compares to a snapshot of the Virtual DOM prior to the update, in a process called "diffing". Through diffing, React can know exactly which DOM objects have changed, and then update only those objects on the real DOM, which in turn updates the user interface.
- This greatly increases the speed of processing large data changes.
Other Functionality
Webpack functionality is taken care of by default with React. Webpack functionality is essentially used to minify and then bundle Javascript files together to allow the application to load more efficiently.
Babel functionality is also built in with React, which allows Javascript to be written in ES6, ES7, or ES8 and converts it to ES5 which all modern browsers can understand.
Basics
- To create a React application, run
npx create-react-app my-app-name
npxis not a typo. It is a package runner tool that comes withnpm.
There is no need for a
server.jsfile with React. Instead, runnpm startto start the application.Nearly the entirity of the code is written within the
/srcdirectory (with the exception of adding fonts and other CDNs such as Bootstrap or jQuery to the<head>tag inindex.html).
Rendering
/public/index.htmlcontains only one line of native HTML:<div id="root"></div>. The entire virtual DOM is rendered in this element.This is done in
index.jsemployingReactDOM.render(), which is considered the entry point:
ReactDOM.render(
// What to render
<App />,
// Where to render it
document.getELementbyId("root")
);
-
<App />refers toApp.js. This is where you can begin building the app with your components.
JSX
- JSX (JavaScript XML) is a syntax extension to JavaScript which allows us to essentially write and visualize HTML in JS.
JSX is not specific to React, or required in React, but it makes things a lot easier. It is using
React.createElement()behind the scenes.
JavaScript expressions are written in
{}. With the exception ofif/else,switch statements, andfor loopsthat must be written in methods in class-based components, or using "hooks" (advanced concept)."Class" is a reserved keyword in JavaScript. All instances of the "class" property must be updated to
classNamein JSX.Any self-closing tags in HTML (such as
<img>or<input>) need to be updated to a closing tag in JSX:<tag / >.Comments in JSX can be written as
{/* comment here */}.Only one element can be returned by
return()at a time. Can wrap in an empty<div>container or use a fragment<>that will not add bloat to the DOM.
Inline Styling in JSX
- Style property must be an object rather than a string like in HTML
- All property names are camelCase, and values are strings
- Numbers default to "pixels" (eg. height, margin, padding, etc.)
- Styles are passed in as a prop
Exmaple:
const styles = {
card: {
margin: 20,
background: "#e8eaf6"
},
heading: {
background: "#9a74db",
minHeight: 50,
lineHeight: 3.5,
fontSize: "1.2rem",
color: "white",
padding: "0 20px"
}
};
function Navbar() {
return (
<div style={styles.card}>
<div style={styles.heading}>Home</div>
</div>
);
}
Components
Components are essentially reusable functions.
Each component must import react:
import React from "react"
Each component must include
export default componentNameto be used in other components, similar to the concept ofmodule.exports().There are two ways to write functions in components:
- Functional Components - these are just plain JavaScript functions and are stateless (unless you're using "hooks" which I don't cover here). They are easier to read and test than their Class counterparts and require less code.
- Typically functions native to React are written with regular functions:
function componentName(){
return ( JSX here );
}
- Otherwise, functions should be written as arrow functions:
const componentName = () => {
return ( JSX here );
}
- Arrow functions are important due to the scope of
this: In this case,thisis not restricted to the scope of the function itself but rather belongs to the outside object.
-
Class Components - The below is identical to the above functional components. However, Classes allow the use of
setState()
class componentName extends React.Component {
render() {
( JSX Here )
}
}
Props
- Props are like inputs into components which are like functions, allowing you to pass data from component to component.
- Props can be an arbitrary property name passed into the component:
<componentName propertyName=value />
- The value can be accessed in the component via the props object:
function componentName(props) {
return(
<div>
<span>{props.propertyName}</span>
</div>
)
}
- Props pass data from component to component in unidirectional flow (parent > child)
- Props can be passed through to more child components in a process called props drilling
There are many more advanced concepts for using React like State, Hooks, Context, and more. These are just the basics to get you started!
Top comments (0)