Sass, React and D3

So I just finished working through the front end course, and it was really well put together and helpful. I had never written a line of JavaScript before, and FCC got me caught up and making functional projects.

I’m now trying to move on to the data visualization module, and I’m disappointed to see that the tutorials for this section are all ‘coming soon’. I would like to keep making progress, so can you guys recommend any good beginner tutorials for Sass, React and D3?

6 Likes

I was in this position recently too, the Data Viz is definitely a step up from the Front End!

As far as Sass goes, to me it is really just adding some efficiency and optimization to your CSS. I use variables and nesting a lot, but it has other features as well. Sass is definitely the easiest of these three to learn and codecademy has a Sass tutorial they released recently.

For D3, this is a really, really good place to start. It walks through the very basics all the way through building some basic charts.

For React, there are tons of tutorials available online but I would recommend starting with Facebook’s React docs, and after that this is a good beginning tutorial series, but there are really a lot of React resources so look around to find something you like. Tyler McGinnis has some truly awesome material that is a more advanced.

You can use all of these technologies in Codepen. You load React and React-DOM as javascript libraries (be sure to add babel as a JS pre-processor), and you can write your sassy CSS by adding Sass or SCSS (I use this) as a preprocessor. This is a quick way to get up and running, however I would recommend getting some more experience writing on your own machine if you haven’t already because it will allow you to start working with more technologies you will definitely find useful later, e.g. webpack, and you’ll also have to figure out how to dealing with pre-processing Sass and JSX on your own.

Hope this helps, good luck!!!

6 Likes

I have found these two links very useful for learning sass:
http://tutorialzine.com/2016/01/learn-sass-in-15-minutes/,
http://www.tutorialspoint.com/sass/

2 Likes

If you don’t mind shelling out a few bucks, I bought the Modern React with Redux course by Stephen Grider on Udemy. It is really nice if you’re like me and you find the setting up of a React environment to be obtuse and opaque. He starts you out with a boilerplate so you can skip over all the Webpack and npm dependencies nonsense, and actually work on learning React.

Webpack was a big roadblock for me and I made zero progress for weeks because I couldn’t wrap my head around it, so this helped me bypass it. Highly recommend this course over any other React resource I found because so many of them start off with “Ok, so webpack…”

Sass is easy enough just by reading the docs on their website. It’s way easier to learn than React and kind of silly because the amount of CSS it’s saving me from writing, at least in the Markdown Previewer project, was about 50 characters.

Can’t point you anywhere on D3 because I’m not there yet.

@bonham000 I am watching the youtube link you provided for D3.Thee example of Enter,Update.Exit is not working properly(giving wrong results.). I am copy pasting it but it’s not giving the desired result as on their github link or youtube video. haven’t you face any problem? Any suggestions?

Not sure if for beginners but this is worth a look.

I found Codecademy really helpful for React. They have a Learn ReactJS part 1 and 2. The only thing is that they are not using the new ECMA 6 format, but all their code still works.

so did I, but when I understood that that tutorial is actually outdated because they are not using the new ECMA 6, I’ve left it.

Please provide the freeCodeCamp topics for D3, Sass and reactJS. It is very important …I have an interview in next days and it might include questions from that.Please provide them.

May be this will be useful to you, if you haven’t seen this yet

React Interview Questions

It has said “comming soon” for a long time on those sections now. I wish I knew when or how the plan for the sections looks like?

However, a very good SASS-tutorial is this:

1 Like

Do you guys think it is possible to skip from the front end to the back end with out doing the Data Vis portion? Or is the Data Vis really a prerequisite to the Back End?

The beta has these challenges in it now: http://beta.freecodecamp.com/en/map

1 Like

Try beta but it’s still unrealesed . beta.freecodecamp.com but the stats won’t be saved to freecodecamp.com.

1 Like

Data vis isn’t a pre-requisite and quite a few people do them out of order.

If you have a reasonable command of the front-end you can handle the rest in the order you prefer.

Great thank’s! I didn’t know about existence of beta version of fcc.

Anyone have any idea when any of those courses will be brought over from beta to the current site? Do they have a news page or forum discussion where they release any approximate time frames of when we can expect these updates?

I don’t think anyone really knows, Eric. They were originally planned to be released on September 16… Then Quincy told me he hoped to have it done by the new year…

freeCodeCamp is completely volunteer funded, so there is no set date or deadline. In the New Year’s Eve livestream, Quincy said that it should come out this year. The site is now in beta, this means that most new features are in place, but they need to be tested more fully. Also there are no more issues in the curriculum expansion repo… things are moving very quickly, it should be in place very soon!

I think this is a good starting place for d3
http://alignedleft.com/tutorials/d3


that and just Mike Bostock’s blocks themselves

I would recommend to use beta as Quincy said.

-You can re-submit your links to your challenges(copy/paster)/projects once we move beta over to freecodecamp.com-

1 Like