I don’t think React is awful (ditto for Vue, Angular, Polymer, Aurelia, etc).
It is a radical departure from the one particular way of web programming. Just like ASP.Net was a radical departure from ASP. Just like ASP was a radical departure from just HTML.
It’s just different. I love that.
Using react-native-cli seems to work, but create-react-native-app, which is referenced by the “Getting Started” documentation and which generates a QR code for running on-device, doesn’t. Instead, you get the following error:
I was watching a tutorial on YouTube and the guy doing the tutorial suggested using this boilerplate on Github to get started with React and a pre-configured Webpack. Has worked well for me thus far.
I don’t know what to say - it works fine for me.
If you are looking for the QR code, then I assume that you are using Expo. I initially didn’t use that, instead creating a virtual device through Android Studio (which also lets me use my tablet). AS was a nightmare to get installed and get configured to work with CRNA, but that is an issue with AS, not CRNA.
I just set up Expo on my laptop the other day (before I was using the DT) and got it working last night. I notice that my LT has v3, but my DT is definitely v5.
I notice that your error says, “We recommend using npm 4 or yarn …” It seems that they are suggesting yarn as an alternative. Have you tried that?
A quick scan of similar issues on the internet, the common answers were either downgrade npm, use yarn, or make sure everything is up to date. Various people claim that each of those solved their problems.
I don’t know what to tell you - it works for me. To some extent, difficulties like this are to be expected in a rapidly growing software package that is dependent on other changing packages.
By coming from JEE / PHP world dealing with plain javascript (or jquery at least), at first this world is confusing. Lots of build pipeline tools, for this reason exists starter kits like create-react-app.
You should have time to tame all these beasts a bit every day.
After a month using it I still lack many features and sometimes I get stuck with silly things (comparing it with my previous experiences), but I can do many things in a nicer way than before.
I started learning React a week ago on my own, mostly because the ‘Roguelike’ project looked like a fun thing to implement. I wanted to learn react without using CodePen, as this would allow each page to stand on its own on my GitHub page.
I got a book on react and starting reading (my first mistake, never buy a book on a rapidly evolving API). I quickly realized I just needed to add a link to react.min.js and react-dom.min.js to my html file to use react. However, getting these files turned into a nightmare. The book mentioned a starter kit, but there is no sign of this on react’s web page. Nothing. I eventually used the CDN links to vomit the contents of these files into my browser, and saved the code to .js files by pasting into my code editor (DON’T use notepad). I didn’t want to use NPM. Why should I install another tool just to get two .js files? No thanks.
So I now had the two files I needed, so I coded the first few examples in the book. They didn’t work. Seems React.DOM no longer exists. Why would they change something so fundamental? Seems irresponsible. My book is now dogfood! Maybe they figured everyone in using JSX? Seems likely.
Ok, so I gota skip ahead and figure out JSX. What do I need to include to use it? I noticed a lot of examples on youtube included a file called browser.min.js. This file contains the Babel library that converts the JSX within the script tag. This is another file that’s hard to find. I searched GitHub for ‘ReactJS-Start-Kit’ and found it, and the react-min files also. I coded a few JSX examples and they worked. The basic ‘hello world’ html file looked like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<script type="text/javascript" src="js/react.min.js"></script>
<script type="text/javascript" src="js/react-dom.min.js"></script>
<script type="text/javascript" src="js/browser.min.js"></script> <!-- Babel core for converting JSX & ES6 to ES5 -->
</head>
<body>
<div id="container"></div>
<script type="text/babel"> // type tells Babel to transform below script.
ReactDOM.render(
<h1>Hello World!</h1>,
//React.createElement('h1', null, 'Hello World'), //Works...but ugly, JSX better?
//React.DOM.h1(null, 'Hello World'), //Dont work...React.DOM depricated?
document.getElementById('container')
);
</script>
</body>
</html>The three js files are in a ‘js’ subdirectory. I don’t use the CDN links for the react files, since I don’t know how these will change in the future. I don’t want my pages to explode in the future due to unexpected API changes in react (like the React.DOM change).
Anyway, I’d like to know if I’m going about this in the right way. Getting to this point was more difficult then I was expecting. How are react projects developed and deployed in the real world?
I think the I think the easiest way to build react apps is with create-react-app. Have you done npm yet? If not, then that may be too complicated of a step for you right now. That’s cool, you’ll get there eventually.
The other option is just to build it yourself out of frontend files, which appears to be what you’re doing. I might suggest doing a simple react app in codepen and then exporting it (export -> zip) and when you extract that, it will have a perfect file structure with all the proper script tags. I might suggest working off of that as a template. If you need something, I wrote a little pen to help people get started with react.
Here is the hello word pen I wrote to help me understand React and Redux. It just goes over the basics, but hopefully it can help someone.
Its pretty simple to get around the React setup usingCreate React App
There’s not alot of deprecation going on, unless maybe you’re using alot of React-based packages…? The library and the other things you listed, Node and Babel are quite stable.
React isnt MVC. However, MVC is one good way to build complex apps and JS MVC isn’t a trend, its part of a very common way of building apps. MVP is perhaps a bit better and would fit better with a React App. Even better, perhaps is the Flux paradigm.
One of the issues I had when starting with react (the data viz projects) was separating the idea of the framework with the idea of the setup, these are 2 separate things that are not necessarily contingent on one another, react can be simply added with just 3 CDN script tags on an html page, one for react, one for react-dom and another for the transpiler (babel), If you don’t know the framework, like me, then it is best to completely focus on just the framework and only the framework at first and not even learn about the setup part until you need to make a full stack application.
Once at that point, then this fantastic article here https://medium.com/@peterxjang/modern-javascript-explained-for-dinosaurs-f695e9747b70, helped in shedding a lot of light on the fundamentals of the setup part, not necessarily for only react but just setup in general.
Now I know this is not a very popular position to have, but I’m not a big fan of Create React App, it dumps too many things on my machine that I have no clue what they are doing, but if you have a decent understanding of the setup part, it should be relatively straight forward to setup a react app without using create react app.
Not using JS’ package manager is going to be a problem because it’s how you do this 99.99% of the time:
That being said, just using script tags is fine, but the canonical starter kit (create-react-app) needs you to use NPM to install dependencies.
https://reactjs.org/docs/installation.html
And
As you say, be careful when buying books on rapidly-evolving libraries. Setting up React should be painless, but it does expect you to use more recent methods to do so, I would ignore anything older than a couple of years.
I can’t tell if you’re being sarcastic…I’ve started using Vue and I picked it up very quickly. I freaking love it, it’s extremely easy to be productive and built pretty complex apps with.
Me too … i decided to try out vue … had being getting close to having to start react or angular … when i saw a video on line from one of the you tube channels i subscribe to about vue. So i decided to watch it and found it very easy to pick up (and im usually slow at picking things up) within the last month practically finished my voting app which is a backend project and a couple of weeks ago i decided to see if i could do it in vue … but needed to use server sided rendering … and found nuxt.js which is vue for server side rendering (will also do client side rendering) … and i have just finished my demo of project without too much hassel … it uses express for server side, passport for sign ups logins and passport sessions, and nuxt handels everything. All i have left to do is now look at how easy/difficult it will be to host on heroku.
I will still try to learn react / angular but at least i have vue so i can do projects in it to put on my portfolio
I used a lot of disparate sources. The biggest thing that I did was go to youtube and typed in “React tutorial”. I found the Brad Traversy ones to be very helpful, and FCC has some too.
It will be a little frustrating, as some of the videos do ES6, some do pre-ES6, some do single file apps, some do multi-file apps with things like webpack and create-react-app.
This is an example of a single page React app (but pre-ES6) and this is an example of a multi-file app (using ES6 and create-react-app).
If you want to keep things simple, you can just do a single file app in codepen with tutorials like this. For the DV projects codepen will be sufficient and might be a more gentle introduction.
I also mentioned my codepen example, but that is more an example of data passing and isn’t very explanative.
fullstack.io has a free course with all the material on github. You do have to sign up to the free ebook. They are up to date, building react apps with Create React App.
Try react + mobx and see if you get the “Spend 10 minutes setting up a project…" again. I think you will. React itself is simple, it’s the voldemort library that spoils the whole thing and costs us at least 5 years of whole industry’s productivity.