7 - Intro to React.
Speck Academy 2021
Basics
JSX
Components
Props
SCSS (Sass)
Basic routing
1
2
3
4
5
6
Overview
1
Basics
Basics overview
About React
Development environment
Create a React App
File structure
Import and export
About React
React is a JavaScript library for building user interfaces maintained by Facebook.
With React you can:
Some of the key terms to understand:
About React
Single-page Application is an application that loads a single HTML page and all the necessary assets (such as JS and CSS) required for the application to run.
Virtual DOM is a programming concept where an representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.
Development environment
Development environment for React Apps consists of the following technologies:
A plethora of Node.js libraries and applications are published on npm, and many more are added every day.
Development environment
npm comes bundled with Node.js, so there is no need to separate installation.
How to use npm?
Development environment
How npm works?
When executables are installed via npm packages, npm creates links to them:
To conclude, if you are using npm, each package must be installed, then you can run it if it’s available in package.json or in global PATH variable.
Development environment
Sometimes you’ll use npx instead of npm, so don’t be confused with it:
Working with Node.js, npm, and npx can be tedious at times, so be patient and research the errors on the Internet and try to find the solution that works for you.
Development environment
package.json vs package-lock.json
Development environment
package.json vs package-lock.json
Create a React App
In order to create React App you’ll need to have development environment which consists of Node >= 8.10 and npm >= 5.6.
To create a project, run the following commands:
create-react-app doesn’t handle backend logic or databases, it just creates a frontend build pipeline, so you can use it with any backend you want.
File structure
/node_modules - all of the installed dependencies
/public - root folder served by the server
/src - source files and folders of App
package.json - list of all dependencies
File structure
/node_modules - all of the installed dependencies
/public - root folder served by the server
/src - source files and folders of App
package.json - list of all dependencies
Additional folders, we can group folders for pages , components and assets on this way (not required).
File structure
React doesn’t have opinions on how to put files into folders.
There are a few common approaches popular in the ecosystem:
Grouping by features or routes
Grouping by file type
Import and export
React applications are basically a collection of interactive components.
If we want to create fully-fledged React app created of collection of components, we first need to know the way to use and reuse components that may have been defined elsewhere.
Inside React app usually we will import user-defined components or modules installed with npm.
When we are importing user-defined components we are using relative path to file. In case of importing npm module, then name of module is enough.
Import and export
Importing default export
Importing named values
Library installed inside node_modules
Importing style, this runs module (css,scss...)
Relative path to file
Exporting default export
2
JSX
JSX
JSX stands for JavaScript XML.
JSX allows us to write HTML elements in JavaScript and place them in the DOM without a createElement() method.
Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.
JSX is converted into JS with Babel.
JSX
JSX
JSX prevents injection attacks.
By default React DOM escapes any values embedded in JSX before rendering them.
You can never inject anything that’s not explicitly written in your application.
Everything is converted to a string before being rendered.
This helps prevent XSS (cross-site-scripting) attacks.
3
Components
Components
About components
Class components and State & Lifecycle
Functional components and Hooks
About components
Component let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Conceptually, components are like JS functions.
They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
React component can be:
Class component
Must use class keyword and inherit Component.
Class based component can have state and lifecycle methods.
Implement constructor if you need to initialize state and/or bind methods. The constructor for a React component is called before it is mounted.
When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor.
Class component
You should not call setState() in the constructor, use local state instead. Constructor is the only place where you should assign this.state directly.
In all other methods, you need to use this.setState() instead.
Method setState() merges the object you provide within setState() into the current state object you are working with. In other words only properties inside setState() will be changed inside state object.
Avoid copying props into state!
Class component
Method componentDidMount() is invoked immediately after a component is mounted (inserted into the tree).
Initialization that requires DOM nodes should go here, or if you need to load data from sa remote endpoint, this is a good place to instantiate the network request.
Method componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method.
Class component
Method render() is the only required method in class component. When called, it should examine this.props and this.state and return one of the following types:
The render() function should be pure, meaning that it doesn’t modify component state, it returns same result each time it’s invoked.
Find more about React.Component state & lifecycle.
Functional component
Functional components are used in most cases.
Hooks are introduced in 16.8 version of React and they provide us similar behaviour such as State and Lifecycle methods in class components.
Almost any task can be implemented by use of Functional components.
useState() hook is used to setup initial state of functional component.
useEffect() hook is used instead componentDidMount() in class component.
Functional component
There is no equal hook to lifecycle method componentWillUnmount(), but we can use return inside useEffect() and empty array as an second argument to achieve same behaviour.
Also, useEffect() hook and lifecycle method componentDidMount() are not equal.
Hook useEffect() fires after layout and paint, in most cases this is not the problem.
If you are converting class component to functional component, try to use useEffect() first.
Functional component
If useEffect() causes problem, then use useLayoutEffect(), it fires in the same time as and componentDidMount() and componentDidUpdate().
4
Props
Props
Special keyword in React, which stands for properties and is being used for passing data from one component to another (parent to child component).
5
SCSS (Sass)
SCSS (Sass)
Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax.
Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
Inside our React App we can use Sass module (npm install node-sass --save) and convert all of our CSS files into SCSS.
Basic syntax will be show on the Hands-on, for more in-depth understanding read the documentation on Sass website.
6
Basic routing
Basic routing
React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without page refreshing as the user navigates.
React Router uses component structure to call components which display the appropriate information.
When not using React Router, App is often the highest parent component in React apps. With React Router, however, the Router component needs to be the highest parent.
Basic routing
Install React Router: npm install ‘react-router-dom’
Three main parts of React Router:
Router has a lot more functionalities and you can read more here.
Basic routing
Implementation step 1 (index.js):
Basic routing
Implementation step 2 (App.js):
Basic routing
Implementation step 3:
7
Hands-on
Hands-on
8
Homework
Homework