ReactJS

Examples illustrating key concepts in ReactJS. Includes minimal Webpack 4 configuration where required.

Instructions

For JSX, component, properties, state, stateless functional components, inches to centimetres calculator, router DOM, form field validation and form validation on submit examples.

1. Install dependencies: npm install
2. Compile and watch: npm run compile-watch

Router DOM example depends on a server side environment.

Render

Rendering an element.

JSX

Combining JSX to render elements.

Component

Component based architecture.

Properties

Utilising props to render content.

State

Assinging state to a class.

Inches to Centimetres Calculator

Assinging state to a class that converts inches to centimetres.

Stateless Functional Components

Presentational and container components.

CSS Modules

Modular Sass, where class names are scoped locally by default.

Router DOM

Uses React Router v4 to render components on the server. This needs a server like localhost for routes to work.

Form Field Validation

Returns warnings and disables submit button if form field are left empty.

Form Validation On Submit

Returns warnings if field are left empty or email is invalid after submitted.

Instructions

For server router, data, meta, router fade in fade out, contact form SMTP, CRUD, CRUD redux and OAuth Redux examples.

1. Install dependencies: npm install
2. Compile client: npm run compile
3. Compile server: npm run compile-server
4. Start server: node server.js
5. Visit: http://localhost:3000

Server Router

Uses React Router v4 for universal routes to render components on the server.

Data

Components to render JSON data, includes universal routing with React Router v4 and pagination.

Meta

Uses React Helmet to render meta titles and descriptions.

Router Fade In Fade Out

Uses React Router v4 and React Transition Group v2 to fade routes in and out.

Contact Form SMTP

Uses Nodemailer to send email over SMTP. Requires a configuration file with your email credentials; IP address, port, user email and password.

config/keys.js

const keys = {
  mtHost: '1.1.1.1',
  mtPort: 111,
  mtUser: 'you@example.com',
  mtPass: 'password'
}

export default keys

CRUD

Requires a MongoDB installation. Listening on default port: 27017.

Create, read, update and delete, uses MongoDB to store data.

N.B.

Data is not persisted in this example, therefore to update state from the database a browser refresh is required. This example is intended as a stepping stone for the following CRUD Redux example.

CRUD Redux

Requires a MongoDB installation. Listening on default port: 27017.

Create, read, update and delete, uses MongoDB to store data and Redux to persist state.

Passport OAuth redux

Authorised routes, user login using Passport and Google OAuth 2.0, uses Redux to persist state.

Instructions

For server code splitting example.

1. Install dependencies: npm install
2. Compile client: npm run dev
3. Visit: http://localhost:3000

Code Splitting

Uses React Loadable to split and load code.

Licence

Licensed under the MIT License.