Getting started with React

Getting started with React
0

#1

What’s a good tutorial/website to get started building websites with React? I’ve tried Youtube, Lynda.com, etc, and every tutorial I find and follow along with I run into issues with Webpack not being configured properly due to new stuff coming out since the tutorial was made.

A Lynda.com tutorial I followed along with was updated A MONTH AGO and there’s already issues with Webpack configuration.

Is there no standard for how a React project needs to be set up? I’ve searched online, sifted through a ton of Stack Overflow articles, and it seems like there’s 9 million different ways to set a project up, all of which change daily.

React seems cool and worth learning but setting up a project with Webpack is like building a Frankenstein monster.


#2

Setting up webpack, babel, hot-reloading etc is a bit tedious. To start learning React you can always install (via npm or yarn) create-react-app.

It is a really fast was to get a react template on your machine with some nice features (ES6 classes/imports, hot reloading, there’s a linter, etc)

Once you have react under your belt you can focus on learning webpack!

Good luck


#3

Yeah that sounds reasonable. I actually went and did that right after posting that and within a minute or two I had a basic set up.

But is create-react-app a good place to start? It won’t limit what I’m able to do?


#4

It doesn’t really limit what you’re capable of doing.

I’ve written some of the “backend” projects with create-react-app (for the front end), node backend, mongo server, etc. If you want EXTREME customization of your app you’ll need to learn webpack.

However, if you’re just looking to get the syntax and basic patterns of react under your belt create-react-app will suit you fine.


#5

Create-react-app also has an ‘eject’ feature that essentially breaks apart all of the magical bits like webpack and gives you back 100% control - but you do need to know what you are doing before you eject.

I’m currently working through Andrew Mead’s React course on Udemy ($15*) and so far I’ve been impressed with his method of teaching and explanation. He also answers questions if you hit problems, so you are not on your own doing it.

*$15 Aussie Dollars, at the ‘special offer rate’ you get by visiting with a new account, having cleared your cookies…


#6

I’m using React in anger at the moment. (And often it is in anger :slight_smile:

My experience also. React and its (many) modules are evolving so rapidly at the moment that tutorials cannot keep up. I used create-react-app to get started quickly, which was good, but I had to eject and learn to configure webpack just to be able to use SASS. I think the team behind create-react-app are trying to address these issues, so fewer people end up having to eject, but they aren’t there yet.

However, I suspect that for serious use (something that is hard to define, of course), you will eventually need to eject and learn to configure webpack and other stuff anyway. I think the information is there on the Internet; you just have to dig. Of course, I get a lot of very useful information from Stack Overflow.

I should add that I feel React is usable for serious (professional, commercial, industrial) stuff – I guess it is used for Facebook, after all – but a lot of the modules for it are not (yet), and you need to be intrepid, and even a little ruthless, to tame it. I’ve already decided to ditch Bootstrap (not enough control over formatting). YMMV

PS: I cannot wait for React 16 to come out. The current diagnostics are so bad it is almost funny.


#7

If by “get started building website with React” you mean you can’t even output anything, then try this one:

Can confirm that it works.
Follow step by step – if something’s not working, you have a typo somewhere. I think the only relevant changes from webpack since this tutorial is that they changed ‘loaders’ to ‘rules’, and you can apply an array of loaders using “use” property in lieu of “loader”, but even then the old code works just as well.

Don’t over-complicate webpack if you’re just starting out. A lot of the confusing options are, well, optional.
All you really need is an entry point, an output, and loaders.

The HTML plugin in that link is optional if you src to the build js correctly in your index.html afaik (I could be wrong, but for the purpose of getting something to run it seems to work).

Your entry point is your main,app,index,whatever.js.
Your output is the built,build,distribution,whatever.js.
Loaders take in a regex which tests which files it will apply loader(s) to, and a loader property (e.g. loader: “babel-loader”).

To use SCSS, take a look at the documentation for sass loader

Likewise for plain CSS and CSS-loader

Here’s a sample webpack config:

module.exports = {
	entry: "./scripts/app.js",
	output: {
		filename: "./build/build.js"
	},
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }]
        },{
			test: /\.js$/,
			exclude: /node_modules/,
			use: [{
				loader: "babel-loader"
			}]
		}]
    }
};

Ironically, I think part of what makes webpack so confusing is that it does so much stuff for you that it’s hard to believe it’s as simple as it is.

Common mistakes:
Improperly re-arranged webpack config properties
Wrong path
Forgetting to npm install something
Not setting up .babelrc
Not googling your error messages
A typo literally anywhere


#8

I used jscomplete to get familiar with react. They have already setup webpack etc for you.


#9

Here is a video that shows how to create a complete React project using create-react-app. Just released today!


#10
  • create-react-app is very good, but there is the caveat that it’s magic, and therefore hard to debug; the moving parts are deeply hidden. You aren’t likely to hit that problem while learning, so it’s a very good tool for that.
  • an option is don’t use Webpack. Just include React and ReactDOM on a page in script tags, and work away. You’ll hit a point where you want a module bundler and all the goodies you get with Webpack, but you don’t need it learn React at all, it’s not a prerequisite.

#11

I concur with @DanCouper, there really is no need to mess with Webpack, at least to finish the Data Viz projects, it’s enough of a headache to learn the fundamentals of react as is, and for that, codepen or embedding script tags in the html file referencing React and ReactDom is sufficient.


#12

1) Learn webpack : 2 Webpack free courses from Sean larkin , the core developer of Webpack team.
https://webpack.academy/

2) Best React course on internet :
https://www.udemy.com/learn-and-understand-react-and-redux-i/

3) Reactjs has pretty good documentation : https://reactjs.org/
4) free Redux course from the creator of Redux itself
https://egghead.io/courses/getting-started-with-redux
4) Wes bos free redux course https://learnredux.com/


#13

Hello Jackson,
I am also taking Andrew’s code right now, but in initial lectures it doesn’t seems he is using create-react-app. Does he makes his projects using this or he makes his own development enviroment.


#14

He does it without create-react-app and shows you how to roll your own webpack bundle from scratch.

It really demystifies webpack (it’s nowhere near as hard as people like to make out) and gives you a strong sense of what is going on in the background.

Once you have learnt this method, you’ll be able to use create-react-app without much trouble…but if you are like me, you probably won’t bother and just keep using the relevant parts from your own customised webpack set up.