Can you learn react before JavaScript - reactjs

I am planning to learn react.js before JavaScript. I know that react is built off of js, but would there be any problems if i just jump straight into react?

No you can't learn React before JavaScript. React is a JS library.
From React documentation on "A Note on JavaScript":
React is a JavaScript library, and so it assumes you have a basic
understanding of the JavaScript language. If you don’t feel very
confident, we recommend refreshing your JavaScript knowledge so you
can follow along more easily.

One thing I learned as a student who likes to jump around from one topic to the next, is that a lot of times while you are coding a project, it's going to get stuck at some point. If you don't understand what is coded in whatever library of code, that you're using, you won't know how to fix it. I agree, you should learn JavaScript before React.

Related

Is React With TypeScript Still Worth While Now That React With Hooks Has Arrived?

The team and I are embarking on a React project. We are primarily a Microsoft team who are all experienced with .Net for decades!
We have been really impressed with React and feel like we are going down that route. We have done all the Angular vs Vue vs other options to death.
As we are all C# developers we are planning to use React with TypeScript. Mainly for two reasons
We are used to a strongly typed code bases coming from C#, so we have been more successful with the React with TypeScript.
The code base has the potential to become quite large and we plan on sharing React components and TypeScript interfaces between teams/projects via an internal NPM registry. We think TypeScript will highlight typing issues early especially when refactoring and allow sharing more effectively.
I have talked with another similar sized team who did not start out with TypeScript (or Flow) they ran into refactoring problems when their solution got large and retrofitted in TypeScript.
I would like to start out with TypeScript from day one as a result
However, I am getting some push back from the more Javascript orientated developers. Who say:
TypeScript not required in modern ES6 JavaScript applications
The wider React community does not use TypeScript
Hooks which are new to React compound the points above
Have I wandered into a religious argument rather than a technical one (static typing vs dynamic) or are there points justified?
Happy to admit I am a JavaScript novice compared to my C# experience so I could be totally missing the point.
I thought I would pose the question to the community and find out some educated opinions. Please be kind
TypeScript not required in modern ES6 JavaScript applications
It depends on what the requirements are. You say you anticipate refactoring, I have some experience with refactoring my own javascript and TypeScript projects. I can say that without TypeScript, refactoring takes more effort - you have to look at the implementation code a lot, just to be able to understand what the interface is. This can be alleviated by extensive amount of API documentation and unit tests, but - how many projects out there have those, and how many projects maintain the API doc so that it matches 100% with the actual code? Type annotations are a nice way to express what the expectations in the code are, and have a side benefit to be maintained together with the code.
The wider React community does not use TypeScript
Everyone uses what's best for their needs. In reality, there is no "community", there's just a bunch of people working on different projects. What's suitable for a majority of people might not be the best for you.
Hooks which are new to React compound the points above
The recent version of typings for React does seem to support hooks. The result of google search for "react hooks with typescript" shows that a lot of people are using React hooks with TypeScript. I'm not aware of any specific problems, but if there are any, there's a chance they will be sorted out, eventually.

Can typescript be used only in a few files in React project?

Given there is a React project that uses plain javascript, is there a way to use typescript partially only to define models?
So, lets say there are a few models that map to server responses, can only those be defined in typescript while the rest of the project remains in javascript.
If its possible, how to do it?
Typescript can definitely be implemented gradually into an existing JS project, and I know a few people who have gone through the process on some monoliths, it can be a really boring process but usually low risk.
I'll link you straight away to this:
https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
The key is to understand what your goal is, and how to set everything up properly to accommodate for it, as you go it's as simple as toggling a few settings to unblock/check work as you go.
As for your question about some files being JS and some being TS, typescript handles pure JS perfectly fine, so you can switch every file to TS and even if it's pure js there won't be an issue :)
Have a read and if you need any more help on some specifics feel free to comment

Do I need a localization framework for a small PWA in React?

I'm working on a small web application in React and I want it to be in two languages. I've seen several localization libraries like react-i18next and react-intl but I'm hesitant to install something maybe too big for such a simple application. Is there a lightweight library to do simple localization or should I look into a more straightforward approach like a string replacing component?
Thanks!
If it is a small project you probably do not need it.
However, it would be a really good experience to write your own localization component, integrate it with redux and opensource it.
Also, there are some simplified versions already available so you can reuse it and/or contribute into.
Here is a simple react-localization implementation.

VueJs 2 with Vuex vs React with Redux

I've spent the past few days looking at VueJs 2 with Vuex and i really like it.
Having only had a brief introduction to React, I've found vue js 2 has been easier to pick up.
React seems to be growing in popularity, but I can't see the benefits of React over Vue 2.
Both are component based frameworks with routing and state management tools.
So can someone explain which are the main differences between those frameworks?
This is an opinionated and subjective question. And it often starts holy-wars than really answering anything and thus it is not really suitable for StackOverflow. However, I will try to answer this in an objective manner as possible. (Note: I am purely comparing Vue with React and deliberately avoiding Vuex vs Redux)
Why Vue.js?
It is designed to be an approachable framework. It is suitable for beginners and advanced users alike. When you are starting with Vue.js, it is as simple as adding a script tag to your page. For the advanced developer, the possibilities are endless. You can start with any sophisticated build tools - TypeScript, Babel, Webpack, etc.
Vue.js is developed much after Angular and React. It has learned from both and managed to pick many best things from them into Vue. For a beginner, Angular's idea of components, services, dependency injection, bootstrapping application, etc can feel overwhelming. Same is applicable to React; JSX can feel odd (Even after years, I still find it weird.). Now, Vue.js is a cross-path. You can use angular like templates or you have the freedom to choose React like JSX.
Vue.js reactivity is very well abstracted. With Angular (digest cycle in v1 and zones in v2) or React, it is bit different. It takes time to learn these concepts.
There are tons of other reasons why Vue.js should be your choice. Sometime back, I had written an article explaining why Vue.js:
https://blog.webf.zone/vue-js-answering-the-why-after-15-months-62db797f75cc
Why React?
React is a pioneering library (It is not a framework) just like Angular. It introduced the ideas of uni-directional architecture, virtual-dom, components (stateful and stateless), etc.
React Native is another reason why you may want to consider React. It allows you to take the same code that you wrote for Web and build native mobile applications. Now solutions do exist in the Vue.js world. But definitely not as mature as React Native.
Functional programming: No way React is a library based on functional programming. But doing React right way means you need to use immutability, explicit state management and all these allied concepts stemming from functional world.
Redux: Redux is the darling of React world. It has unlocked wonderful architectural patterns for front-end world like time-travel debugging, explicit side-effects, functional components, etc.
Innovation: React has some crazy ideas like Relay, Next.js (Vue.js has Nuxt.js). I also heard about some Drap-n-drop editor for React; first class TypeScript and Flow support (You just cannot get TypeScript + Vue.js + JSX working together even in 2018).
Why not React?
Using only React is not enough. Very soon, you will end up with using Redux, Redux middleware, Immutable.js, etc. Doing all of that at once can be intimidating.
Redux. It is wonderful but it is verbose.
Most important: Using React without any sophisticated build system is cumbersome. To do anything serious, you will need Babel, Webpack, etc.
Again, which one is better?
There is no better solution. I will choose Vue.js if I need to accommodate a vast array of developers (beginners-advanced). I will choose React if my team is versed with all the extra overload that comes with React and team loves everything JavaScript approach to web development (Even CSS is JS).
Finally, there is one another angle to it. Programming in React needs discipline and hence, there is a good chance that you will find it easier to bring homogeneity to your codebase. With Vue.js, there is often more than one solution to a problem. That makes it good and bad at the same time.
You will not go wrong with either of them.

MeteorJS Tutorial & detailed explanation

I just finished the JS course on codecademy and started learning meteorJS for Angular 2 now for building my first real application. I started with the simple-todos tutorial but noticed that the tutorial isn't for real noob beginners but instead for intermediate programmers. I do not understand what the single lines of code do
for example:
angular.module('simple-todos', [
angularMeteor
]);
This is one of the many examples which are not clearly explained in the tutorial.
Do you know a source where I could learn all this noob stuff before I continue with Meteor?
Thank you!
Personally, I think the official Meteor tutorials do a really good job of explaining all the meteor specific stuff that it covers. One thing you could do is also pull up the Meteor API and read the details about a specific function it asks you to use as you progress. This will certainly provide some more meat to the tutorial.
The piece of code that you provided in your question is actually Angular specific code. Angular itself has a somewhat steep learning curve so by doing that tutorial, you are taking quite a big step by trying to learn Angular and Meteor at the same time.
Instead, I highly recommend you follow the Meteor Blaze tutorial. It provides much more detail and it covers ONLY meteor specific stuff. Once you finish that then read the Meteor guide and if you have the funds, buy the Discover Meteor book and follow that tutorial. This approach is exactly how I learned Meteor and it was very successful for me.
Be sure to just read along in the Meteor API and Blaze API as you progress thru any tutorial and you will be well on your way (and then later you can jump into learning Angular or React with Meteor if it suites your fancy)! Honestly, I have had a lot of success with Blaze and use it for Meteor apps 99% of the time.

Resources