meteor / react-tutorial

React Tutorial is the best place to learn how to use React and Meteor together

Meteor React Tutorial

If you are looking for the tutorial, please go to https://react-tutorial.meteor.com and check it there.

This repository is the place to check the code (src folder) and to make contributions.

Read in the tutorial home page where you should ask questions (spoiler: Forums or Slack).

This is a hexo static site used to generate the Meteor React Tutorial Docs.

Contributing

We'd love your contributions! Please send us Pull Requests or open issues on github. Also, read the contribution guidelines.

If you are making a larger contribution, you may need to run the site locally:

Running locally

• Install nvm to manage your Node.js (yes, this is an hexo project and not Meteor, in Meteor you don't need to worry about Node.js versions at all)

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

• Install Node.js 8.11.2:

  nvm install 8.11.2

• Install the project

  npm install

• Run it

  npm start

Styles and Lint

Make sure your changes are not breaking styles and lint rules, in the root project, run:

• npm install
• npm run quave-check

quave-check should not return any error or warning. If it does you need to fix them before sending a PR.

If you get an error because some npm modules are not resolved (import/no-unresolved) you need to run npm install inside the Meteor project that is throwing this error so you generate the node_modules folder for it.

We have a git hook to prevent commits that are not passing these rules but it's good to double-check as maybe your hooks set up can be messed up.

Making a Pull Request

• Create a fork and make your changes on it.

• Test your changes and make sure you sync your code changes (src folder) with your text changes (tutorial folder).

• Build your changes:

npm run build

• Create your Pull Request against master branch.

• Sign the CLA.

• Wait for feedback or approval.

react-tutorial's Issues

Add SSR tutorial

The most important issue in React is SSR.
And if one does not learn the SSR in the React , there is no reason to use React.
Especially with Next vs. React.
So practically if we do not learn SSR well in Meteor-React we have no reason to use Meteor-React

That's an important question. Why close it

Because of the SSR problem, a lot of people will switch to NextJS. Although I have now implemented the SSR with the help of the community, there is still the next problem, which is the SSR problem of code splitting. Also using the community package, I feel that Meteor is too small in this area, is Meteor just used for mobile apps, not SEO?

There was also no official solution for splitting the code, the app would be slow and the first screen would be sluggish, which severely affected the use of Meteor and caused more people to switch to NextJS

Update to Meteor 2.0

We need to update to Meteor 2.0

• Use meteor create without --react
• Update all the code to use Meteor 2.0
• Use HMR and Dev error overlay
• Use free deploy with MongoDB included

Update Windows install instructions

It's using yet choco install meteor

We need to update to npm install -g meteor

Prevent default issue on firefox

There seems to be an issue with using e.preventDefault(); on firefox and the app did not work until I changed it to event.preventDefault(); as per the suggestion on this Stack Overflow question.

https://stackoverflow.com/questions/40680019/event-preventdefault-in-meteor-app-does-not-work-for-firefox

Add code splitting

The React code split

loadable-components

has dropped support for Meteor. Are there other ways to split the code? This is very important for the speed of using React, right? Why hasn't anyone mentioned this problem, or there is a better way, who would like to tell me, thank you very much

If you can include the correct code splitting scheme in the tutorial, look forward to seeing it. Thanks

Outdated

It seems that the package is not working as expected in this tutorial.
version 15 of GraphQL is not available.
After the installation of those packages logging in and logging out is not working in real-time

Windows WSL

We can use WSL in Windows and vscode for packages that are not yet prepared for Windows. The problem is that We don't consider that from the beginning of the project. If you recommended using WSL from the beginning Windows users will take advantage of those packages.

Add SSR tutorial

The most important issue in React is SSR.
And if one does not learn the SSR in the React , there is no reason to use React.
Especially with Next vs. React.
So practically if we do not learn SSR well in Meteor-React we have no reason to use Meteor-React

Issues on getting Graphql to work with ToDoApp Tutorial

W20220407-09:55:04.615(-4)? (STDERR) This package has been deprecated and now it only exports makeExecutableSchema.
W20220407-09:55:04.626(-4)? (STDERR) And it will no longer receive updates.
W20220407-09:55:04.626(-4)? (STDERR) We recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.
W20220407-09:55:04.626(-4)? (STDERR) Check out https://www.graphql-tools.com to learn what package you should use instead!
W20220407-09:55:04.723(-4)? (STDERR) /Users/dtheus/.meteor/packages/meteor-tool/.2.7.1.1ebzwnf.mdfl++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:280
W20220407-09:55:04.724(-4)? (STDERR) throw(ex);
W20220407-09:55:04.724(-4)? (STDERR) ^
W20220407-09:55:04.724(-4)? (STDERR)
W20220407-09:55:04.724(-4)? (STDERR) TypeError: graphql.getDescription is not a function
W20220407-09:55:04.724(-4)? (STDERR) at pushComment (/Users/dtheus/Development/crossfiles/node_modules/@graphql-toolkit/schema-merging/index.cjs.js:117:29)
W20220407-09:55:04.724(-4)? (STDERR) at collectComment (/Users/dtheus/Development/crossfiles/node_modules/@graphql-toolkit/schema-merging/index.cjs.js:93:5)
W20220407-09:55:04.725(-4)? (STDERR) at /Users/dtheus/Development/crossfiles/node_modules/@graphql-toolkit/schema-merging/index.cjs.js:662:17
W20220407-09:55:04.725(-4)? (STDERR) at Array.reduce ()
W20220407-09:55:04.725(-4)? (STDERR) at mergeGraphQLNodes (/Users/dtheus/Development/crossfiles/node_modules/@graphql-toolkit/schema-merging/index.cjs.js:657:18)
W20220407-09:55:04.725(-4)? (STDERR) at mergeGraphQLTypes (/Users/dtheus/Development/crossfiles/node_modules/@graphql-toolkit/schema-merging/index.cjs.js:754:25)
W20220407-09:55:04.725(-4)? (STDERR) at Object.mergeTypeDefs (/Users/dtheus/Development/crossfiles/node_modules/@graphql-toolkit/schema-merging/index.cjs.js:709:22)
W20220407-09:55:04.725(-4)? (STDERR) at Object.mergeTypes (/Users/dtheus/Development/crossfiles/node_modules/merge-graphql-schemas/index.cjs.js:24:26)
W20220407-09:55:04.725(-4)? (STDERR) at Loader.getSchema (/Users/dtheus/Development/crossfiles/node_modules/graphql-load/dist/index.js:38:47)
W20220407-09:55:04.725(-4)? (STDERR) at startGraphQLServer (packages/quave:graphql/server.js:14:8)
W20220407-09:55:04.725(-4)? (STDERR) at module (imports/api/graphql.js:28:1)
W20220407-09:55:04.725(-4)? (STDERR) at fileEvaluate (packages/modules-runtime.js:336:7)
W20220407-09:55:04.726(-4)? (STDERR) at Module.require (packages/modules-runtime.js:238:14)
W20220407-09:55:04.726(-4)? (STDERR) at Module.moduleLink [as link] (/Users/dtheus/.meteor/packages/modules/.0.18.0.a4zpu9.4einq++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/@meteorjs/reify/lib/runtime/index.js:52:22)
W20220407-09:55:04.726(-4)? (STDERR) at module (server/main.js:1:270)
W20220407-09:55:04.726(-4)? (STDERR) at fileEvaluate (packages/modules-runtime.js:336:7)

Add security best practices

This is entirely weak: https://react-tutorial.meteor.com/simple-todos/12-deploying.html#12-3-Set-up-settings

Sensitive credentials should not be stored in git.

missing className="task"

In Step 5: https://github.com/meteor/react-tutorial/blob/master/tutorial/simple-todos/05-styles.md

The className="task" isn't set anywhere.

className="tasks" (with an s) is set, but the singular "task" is missing. I will issue a pull request.

Social logins missing in new tutorials

I think one of the powerful features of meteorjs is the whole accounts and how it can easily be done and you can easily plugin different third party logins.
If I remember correctly the old tutorials included on how {{> loginbuttons}} could be used, and there was also how this can be converted to react. while this wasn't the best approach, I think it will be great to add a section on how social logins can be achieved.

Most people who are new to meteorjs will likely go to the tutorials and it will be great to show them how easily this can be done.
ref: https://react-tutorial.meteor.com/simple-todos/07-adding-user-accounts.html#7-2-Create-User-Account
Thanks again for the great work