reacttraining / react-router-5-course Goto Github PK

Learn React Router 5 - by ReactTraining.com

Home Page: https://courses.reacttraining.com

JavaScript 75.17% HTML 1.16% CSS 0.02% Shell 0.32% SCSS 23.33%

react-router-5-course's Introduction

React Router 5 Course Material

React Router 5 is out and we have created this course so you can learn all about it. The course covers basic and advanced topics. We'll be building a Firebase-looking app that has complex nested layouts and interesting problems to solve.

What's New?

If you're wondering what's new in React Router 5? Not a lot, except internal optimizations and fixes for React 16.x. So you could also think of this as a React Router 4 course since the API is the same. See more info on the React Router 5 release.

Download and Install

After downloading the repository from Github, enter the following commands into your command line from the project folder:

npm install
npm start

Then go to localhost:8000

Be sure to see notes on Lesson Branches below...

Each Lesson is a Git Branch

To view the code for a given lesson, checkout the appropriate branch name. The branch will have the finished code from that lesson.

Installing lesson branches

All the branches are checked out to your local machine automatically when you do npm install. Just do a git branch to verify and see all branches after. If they didn't appear, try running npm run branches to download all the branches.

To view a branch: git checkout [branch-name]

Branch names are minimal for easy typing:

01-basics - JSX Routing with BrowserRouter and Route
02-basics - Route Matching - Inclusive vs Exclusive (exact) and Switch
03-basics - Link (anchors)
04-basics - BrowserRouter vs HashRouter
05-basics - Dynamic (Parameter) Matching
06-basics - Nested Layout Strategy
07-basics - match.url
08-basics - match.path
09-basics - NavLink
10-basics - withRouter HoC
11-basics - Programmatic Navigation (History Object)
12-basics - URL Query Strings
13-advanced - Route Render Methods
14-advanced - React Router - Just Components ™
15-advanced - Authentication Strategy with Context
16-advanced - Authenticated Routes (Dynamic Routes)
17-advanced - Navigation With State
18-advanced - Prompt Before Route Changes
19-advanced - Animating Route Changes (Part One)
20-advanced - Animating Route Changes (Part Two)

Fake Database

Just so we can mimic some data and pretend it's asynchronous, there's a src/database.json. Feel free to add more "Firebase Projects" if you want.

The CSS

I used className. Who cares, it keeps the styling clutter out of the JS files since this is teaching material for routing.

Code Organization

In /src you'll see:

layouts for highly re-usable app-wide layouts
styles for Sass modules
ui is where I like to put re-usable "leaf-types" of components
utils is a catch all for React components that are more utilitarian in nature (and less UI in nature) and other general utils.

Any other folders in /src is a section of the site, like /auth and /projects which correspond to localhost:8000/auth etc. I guess I could organize those into a /pages folder, but who likes deep nesting anyways?

react-router-5-course's People

Stargazers

Watchers

react-router-5-course's Issues

Failed to compile

./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/styles/main.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'

can't get branch 06-basics to build

Not sure what you need to debug?
I'm using node v12.20 (I figured it might work with a lower version of node?) I have all the branches, in fact, I had to do an npm install node-sass -D to get one other branch to work. Here's what the terminal shows after npm start
ERROR in ./src/wireframe/wireframes.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/wireframe/wireframes.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
Require stack:

/Users/tony/Documents/Development/ReactTraining/react-router-5-course/node_modules/sass-loader/lib/loader.js
/Users/tony/Documents/Development/ReactTraining/react-router-5-course/node_modules/loader-runner/lib/loadLoader.js
/Users/tony/Documents/Development/ReactTraining/react-router-5-course/node_modules/loader-runner/lib/LoaderRunner.js
/Users/tony/Documents/Development/ReactTraining/react-router-5-course/node_modules/webpack/lib/NormalModule.js
/Users/tony/Documents/Development/ReactTraining/react-router-5-course/node_modules/webpack/lib/NormalModuleFactory.js
/Users/tony/Documents/Development/ReactTraining/react-router-5-course/node_modules/webpack/lib/Compiler.js
/Users/tony/Documents/Development/ReactTraining/react-router-5-course/node_modules/webpack/lib/webpack.js
/Users/tony/Documents/Development/ReactTraining/react-router-5-course/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
at Function.Module._load (internal/modules/cjs/loader.js:667:27)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.sassLoader (/Users/tony/Documents/Development/ReactTraining/react-router-5-course/node_modules/sass-loader/lib/loader.js:46:72)
@ ./src/wireframe/wireframes.scss 2:14-131
@ ./src/wireframe/App.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:8000 ./config/setup.js ./src/index.js
ℹ ｢wdm｣: Failed to compile.

make failed

Hi,

I wanted to try your course but faced a compilation error when doing npm install. Here is the error log:

Dans le fichier inclus depuis /usr/lib/gcc/x86_64-pc-linux-gnu/9.2.0/include/g++-v9/cassert:44,
                 depuis /home/stephane/.node-gyp/12.13.0/include/node/node_object_wrap.h:26,
                 depuis ../../nan/nan.h:55,
                 depuis ../src/binding.cpp:1:
../../nan/nan_object_wrap.h: Dans le destructeur « virtual Nan::ObjectWrap::~ObjectWrap() »:
../../nan/nan_object_wrap.h:24:25: erreur: « class Nan::Persistent<v8::Object> » n'a pas de membre nommé « IsNearDeath »
   24 |     assert(persistent().IsNearDeath());
      |                         ^~~~~~~~~~~
../../nan/nan_object_wrap.h: Dans la fonction membre statique « static void Nan::ObjectWrap::WeakCallback(const v8::WeakCallbackInfo<Nan::ObjectWrap>&) »:
../../nan/nan_object_wrap.h:127:26: erreur: « class Nan::Persistent<v8::Object> » n'a pas de membre nommé « IsNearDeath »
  127 |     assert(wrap->handle_.IsNearDeath());
      |                          ^~~~~~~~~~~

Do you have an idea of what the problem is?

reacttraining / react-router-5-course Goto Github PK

react-router-5-course's Introduction

React Router 5 Course Material

What's New?

Download and Install

Each Lesson is a Git Branch

Installing lesson branches

Fake Database

The CSS

Code Organization

react-router-5-course's People

Stargazers

Watchers

Forkers

react-router-5-course's Issues

Failed to compile

can't get branch 06-basics to build

make failed

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent